码农教程 - 一技在手,衣食无忧! tools

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 对象两次。

示例

具有常规功能，this代表调用该函数的对象：

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);

亲自试一试 »

示例

通过箭头函数，this代表 Header 对象，无论谁调用该函数：

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);

亲自试一试 »

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

通过练习测试一下

练习:

完成这个箭头函数：

hello =  "Hello World!";

开始练习

❮ 上一节 下一节 ❯