JavaScript 箭头函数简介

这篇文章最初发表在attacomsian.com/blog上。

ES6/ECMAScript 2015 中引入的箭头函数，是 ES5 常规函数的一种语法紧凑的替代方案。毫无疑问，它是 ES6 中最受欢迎的特性之一，如今已被广泛使用。箭头函数提供了一种编写简洁函数的新方法。

以下是用 ES5 函数语法编写的函数：

function absolute(num) {
    return Math.abs(num);
}

absolute(-9);   //9

现在，这是使用 ES6 箭头函数语法编写的相同函数：

const absolute = (num) => {
    return Math.abs(num);
}

absolute(-9);   //9

如果函数体只包含一个语句，我们甚至可以省略括号并将所有内容写在一行中：

const absolute = (num) => Math.abs(num);

函数参数

如果没有参数，只需在前面添加一个空括号=>：

const pi = () => Math.PI;

您甚至可以用以下方式替换空括号_：

const pi = _ => Math.PI;

如果您有一个或多个参数，只需将它们传递到括号中：

const abs = (num) => Math.abs(num); // on parameter
const sum = (a, b) => a + b;    // two parameters

如果只有一个参数，则可以完全删除括号：

const abs = num => Math.abs(num);

简洁与块状主体

箭头函数可以有简洁函数体或块函数体。如果函数只包含一个语句，则可以使用简洁函数体。在简洁函数体中，仅指定隐式返回值的表达式（不使用return关键字）：

const multiply = (a, b) => a * b;

在块体中，必须使用明确的return语句：

const multiply = (a, b) => {
    return a * b;
};

看看花括号。在块体中，它们是用来包裹语句的：

const oddNumber = (num) => {
    if(num % 2 == 0) {
        return false;
    } else {
        return true;
    }
};

对象字面量

如果使用简洁主体返回对象文字，则必须将其括在括号中，以避免将其视为块主体：

const json = () => ({x: 2});

`this`关键词

在正则函数表达式中，关键字根据函数调用的上下文this绑定到不同的值：

如果是构造函数，则为新对象。
undefined在严格模式函数调用中。
如果该函数作为对象方法调用，则为父对象。

例如，这里有一个具有fullName()以下功能的人员对象：

const person = {
    firstName: 'Mike',
    lastName: 'Lilly',
    fullName: function () {
        return `${this.firstName} ${this.lastName}`;
    }
};

person.fullName(); // Mike Lilly

调用fullName()person 对象的方法返回该人的全名。

然而，箭头函数没有自己的作用域，this并且是词法绑定的。这本质上意味着this作用域是从包含箭头函数的代码继承而来的。因此，当查找当前作用域中不存在的时，ES6 箭头函数将使用其定义作用域中this的的值。这就是为什么对的调用将不起作用并返回未定义的值：thisfullName()

const person = {
    firstName: 'Mike',
    lastName: 'Lilly',
    fullName: () => {
        return `${this.firstName} ${this.lastName}`;
    }
};

person.fullName(); // undefined undefined

箭头函数不适用于对象方法。为了避免错误，也不应该将它们用作构造函数。

DOM 事件处理

箭头函数在处理事件时可能会出现问题。DOM 事件监听器被设置this为目标元素。现在，如果使用箭头函数进行回调，this关键字将不会绑定到目标元素，而是绑定到其父级作用域。

const button = document.getElementsByTagName('button')
button.addEventListener('click', () => {
  this.classList.toggle('blur');
});

现在，如果您点击按钮，您将获得一个TypeError“因为”this引用，该引用window在此范围内。如果您需要回调函数的动态上下文，则需要使用正则函数表达式：

const button = document.getElementsByTagName('button')
button.addEventListener('click', function() {
  this.classList.toggle('blur');
});

结论

箭头函数在 ES6 中提供了一种编写简洁函数的新方法。它们更短，无需this关键字绑定，隐式返回值（使用简洁函数体时），并且在现代代码库中被广泛使用。箭头函数不适合用作对象方法，也不能用作构造函数。

✌️ 我撰写有关现代 JavaScript、Node.js、Spring Boot以及所有Web 开发方面的文章。订阅我的新闻通讯，每周获取 Web 开发教程和专业技巧。

喜欢这篇文章吗？ 请在 Twitter 上关注 @attacomsian。你也可以在LinkedIn和DEV上关注我。

照片由Nick Fewings在Unsplash上拍摄

鏂囩珷鏉ユ簮锛�https://dev.to/attacomsian/introduction-to-javascript-arrow-functions-20f

JavaScript 箭头函数简介

JavaScript 箭头函数简介

函数参数

简洁与块状主体

对象字面量

this关键词

DOM 事件处理

结论

`this`关键词