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

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，在此代码片段中team 对象。

因此，如果不使用 .bind(this) 并且必须缓存对 this 的引用，则可以将粗箭头函数替换为解决方案。

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

Why are Javascript Functions declared in different ways

javascript

structure

function