React ES6 箭头函数

箭头函数

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

一般语法:

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

使用箭头函数:

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

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

默认情况下，箭头函数返回值:

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

注意：仅当函数只有一条语句时，此操作才有效。

如果有参数，则将其传递到括号内:

带参数的 Arrow 函数:

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

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

无括号的箭头函数:

hello = val => "Hello " + val;

关于 this 关键字

与常规函数相比，箭头函数中的处理方式也有所不同。

简言之，对于箭头函数没有 this 的绑定。

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

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

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

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

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

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

实例

使用常规函数, this 表示调用函数的对象:

<!DOCTYPE html>
<html>
<body>
<h2>常规函数</h2>
<p><strong>this</strong> 关键字表示不同的对象，具体取决于函数的调用方式。</p>
<button id="btn">点击这里!</button>
<p><strong>this</strong> 表示:</p>
<p id="demo"></p>
<p>查看单击按钮前后的差异。</p>
<script>
class Header {
  constructor() {
    this.color = "Red";
  }
  changeColor = function() {
    document.getElementById("demo").innerHTML += this;
  }
}
const myheader = new Header();
window.addEventListener("load", myheader.changeColor);
document.getElementById("btn").addEventListener("click", myheader.changeColor);
</script>
</body>
</html>

运行一下

实例

使用箭头函数, this 表示 Header 对象，无论是谁调用函数:

<!DOCTYPE html>
<html>
<body>
<h2>箭头函数</h2>
<p><strong>this</strong> 关键字表示 Header 对象。</p>
<button id="btn">点击这里!</button>
<p><strong>this</strong> 表示:</p>
<p id="demo"></p>
<script>
class Header {
  constructor() {
    this.color = "Red";
  }
  changeColor = () => {
    document.getElementById("demo").innerHTML += this;
  }
}
const myheader = new Header();
window.addEventListener("load", myheader.changeColor);
document.getElementById("btn").addEventListener("click", myheader.changeColor);
</script>
</body>
</html>