React ES6 箭头函数

箭头函数

箭头函数允许我们编写更短的函数语法。

hello = function() {
  return "Hello World!";
}

hello = () => {
  return "Hello World!";
}

它变得更短了！如果函数只有一个语句，并且该语句返回一个值，则可以删除括号和return关键字。

hello = () => "Hello World!";

如果您有参数，则将它们传递到括号内。

hello = (val) => "Hello " + val;

事实上，如果您只有一个参数，您也可以跳过括号。

hello = val => "Hello " + val;

this 怎么样？

与普通函数相比，箭头函数中this的处理方式也不同。

简而言之，在箭头函数中，没有this的绑定。

在普通函数中，this关键字表示调用该函数的对象，该对象可以是窗口、文档、按钮或任何其他对象。

使用箭头函数时，this关键字始终表示定义箭头函数的对象。

让我们来看两个例子来理解其中的区别。

这两个示例都调用了一个方法两次，第一次是在页面加载时，第二次是在用户点击按钮时。

第一个示例使用普通函数，第二个示例使用箭头函数。

结果表明，第一个示例返回两个不同的对象（窗口和按钮），第二个示例两次返回 Header 对象。

class Header {
  constructor() {
    this.color = "Red";
  }

//Regular function:
  changeColor = function() {
    document.getElementById("demo").innerHTML += this;
  }
}

const myheader = new Header();

//The window object calls the function:
window.addEventListener("load", myheader.changeColor);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);

class Header {
  constructor() {
    this.color = "Red";
  }

//Arrow function:
  changeColor = () => {
    document.getElementById("demo").innerHTML += this;
  }
}

const myheader = new Header();


//The window object calls the function:
window.addEventListener("load", myheader.changeColor);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);

在使用函数时，请记住这些差异。有时普通函数的行为是您想要的，如果不是，请使用箭头函数。