Question

很抱歉，这似乎是一个初学者的问题，我目前正在学习Javascript，并遇到了构造函数声明的不同方法。下面的例子

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

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

使用一个或另一个有什么好处；在哪种情况下您会使用另一种？

Answer 1

箭头功能是ES2015的新语法，对我而言，主要区别是更改this上下文，您可以在此处https://medium.com/@thejasonfile/es5-functions-vs-es6-fat-arrow-functions-864033baa1a

进行了解。

Answer 2

第一个示例是函数声明，第二个示例是函数表达式。您提供的第二个示例仅用于为第一个示例提供更简洁的JavaScript代码，并没有真正捕获您何时在函数声明中使用ES6箭头函数的问题。换句话说，您的示例只是语法糖，在您的示例中，什么都还没有真正解决，只是更简洁的代码。

以下是一个更好的示例：

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());

运行此代码段，您将看到错误。现在，不必使用箭头功能来解决此错误，有两种方法可以解决它，但是您的问题是在哪种情况下要使用一种而不是另一种，这是使用箭头的一个好用例函数来解决此错误。

在提供解决方案之前，请了解粗箭头功能会使用所谓的词法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());

词汇是指该术语的位置取决于其解释方式或评估方式。因此，根据使用的粗箭头功能，this一词的位置会有所不同。

当我们使用粗箭头功能并引用其中的this时，this在周围的上下文中自动设置为等于this，在此代码段中为{{ 1}}对象。

因此，如果代替使用team并不得不缓存对.bind(this)的引用，则可以替换胖箭头功能作为解决方案。

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

2 个答案: