代码之家 › 专栏 › 技术社区 › PacketSniffer

为什么Javascript函数以不同的方式声明

structure function javascript

0

PacketSniffer · 技术社区 · 7 年前

function mapStateToProps(state) {
    console.log(state);
}

const mapStateToProps = state => {
    console.log(state);
}

使用其中一个的好处是什么;在哪种情况下你会用一个而不是另一个?

2 回复 | 直到 7 年前

1

Alexandr Dobrovolsky 7 年前

this 你可以在这里读到 https://medium.com/@thejasonfile/es5-functions-vs-es6-fat-arrow-functions-864033baa1a

2

0

Daniel 6 年前

更好的例子如下:

const team = {
	members: ['Dolly', 'Billy'],
  teamName: 'Hacking Crew',
  teamSummary: function() {
  	return this.members.map(function(member) {
    	return `${member} is on team ${this.teamName}`;
    });
  }
};

console.log(team.teamSummary());

运行此代码段,您将看到错误。现在,这个错误不一定要用arrow函数来解决,有几种方法可以解决,但是你的问题是,在什么情况下你会用一个来解决这个错误,这是一个很好的使用arrow函数来解决这个错误的用例。

this . 我将在下面提供重构,然后展开我前面的一句话:

const team = {
	members: ['Dolly', 'Billy'],
  teamName: 'Hacking Crew',
  teamSummary: function() {
  	return this.members.map((member) => {
    	return `${member} is on team ${this.teamName}`;
    });
  }
};

console.log(team.teamSummary());

词汇的意思是这个词的位置取决于它的解释方式或评价方式。所以,取决于我们把这个词放在哪里将在使用胖箭头函数时更改。

这 在里面 这 自动设置为 这 在这个代码片段中 team

所以如果不用 .bind(this) 必须缓存对 这 ,可以替代胖箭头函数作为解决方案。