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 关键字代表调用函数的对象，可以是 window，document，一个按钮或任何其他对象。

对于箭头函数，this 关键字总是代表定义该箭头函数的对象。

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

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

第一个例子使用了一个常规函数，第二个例子使用了一个箭头函数。

结果显示第一个例子返回了两个不同的对象（window 和 button），而第二个例子返回了两次 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);

在处理函数时，请记住这些差异。有时常规函数的行为是你想要的，如果不是，则使用箭头函数。