“箭头功能”和“功能”是等效/可交换的吗？

Question

“箭头功能”和“功能”是等效/可交换的吗？ES2015中的箭头功能提供了更简洁的语法。我现在可以用箭头功能替换所有函数声明/表达式吗？我需要注意什么？例子：构造函数function User(name) {  this.name = name;}// vsconst User = name => {  this.name = name;};原型方法User.prototype.getName = function() {  return this.name;};// vsUser.prototype.getName = () => this.name;对象（文字）方法const obj = {  getName: function() {    // ...  }};// vsconst obj = {  getName: () => {    // ...  }};回调setTimeout(function() {  // ...}, 500);// vssetTimeout(() => {  // ...}, 500);变量函数function sum() {  let args = [].slice.call(arguments);  // ...}// vsconst sum = (...args) => {  // ...};

Answer 1

看看这个Plnkr的例子

每次调用按钮时，变量的增量this都是非常不同的timesCalled增量。这回答了我的个人问题：

.click( () => { } )

和

.click(function() { })

从Plnkr中的Guid计数可以看出，在循环中使用时都会创建相同数量的函数。

Answer 2

JavaScript箭头函数只是定义函数的另一种方式。

箭头函数不仅使您的代码看起来更干净，更具体，更易于阅读。它还提供了隐含回报的好处。

下面我将分享一些简单的示例，这些示例自我解释函数的声明以及如何定义JavaScript箭头函数。

/*----------------------------------

    JavaScript Arrow Functions 

  ----------------------------------*/

// Defining a function.

function addNumbers(a, b) {

    return a + b;

}

addNumbers(10, 6);  // 16

// Using anonymous function.

var addNumbers = function(a, b) {

    return a + b;

}

addNumbers(10, 6); // 16

// using Arrow Functions or Fat Arrow functions.

var addNumbers = (a, b) => {

    return a + b; // with return statement

}

addNumbers(10, 6); // 16

// Using Arrow Functions or Fat Arrow functions without return statements and without curly braces.

var addNumbers = (a, b) => a + b; // this is a condensed way to define a function.

addNumbers(10, 6); // 16

在这里，我将为您提供有关JavaScript箭头功能的链接：如何，为什么，何时（以及何时）使用它们将向您提供示例和详细信息...