【JavaScript】ES6中的箭头函数是什么？

超、凢脫俗 2022-05-23 02:29 185阅读 0赞

正如其名，箭头函数由 “箭头”（=>）这种新的语法来定义。

#### 箭头函数的特点 ####

*  没有 this，arguments 绑定 -，this，arguments 的值 **由最近的不包含箭头函数的作用域决定。**
 *  不能被 new 调用 - 箭头函数内部没有 \[\[Construct\]\] 方法，因此不能当作构造函数使用。使用 new 调用箭头函数会抛出错误。
 *  没有 prototype - 既然你不能使用 new 调用箭头函数，那么 prototype 就没有存在的理由。箭头函数没有 prototype 属性。
 *  不能更改 this - this 的值在函数内部不能被修改。在函数的整个生命周期内 this 的值是永恒不变的。

#### 箭头函数的语法 ####

1.  一个空的箭头函数

var doNothing = () => {};
    
    // 等同于：
    
    var doNothing = function() {};

2 . 接收单个参数的箭头函数

var reflect = value => value;
    
    // 等同于：
    
    var reflect = function(value) {
        return value;
    };
    当箭头函数只有一个参数时，该参数可以直接使用而不需要额外的语法。之后则是箭头和需要计算的表达式，即使没有书写 return 语句也会返回该参数。

3 . 传入单个以上的参数，就需要用括号来包含它们

var sum = (num1, num2) => num1 + num2;
    
    // 等同于：
    
    var sum = function(num1, num2) {
        return num1 + num2;
    };

4 . 当函数主体内包含一条以上表达式的时候，你需要用花括号显式地包裹函数

var sum = (num1, num2) => {
        expression1；
        expression2；
        expression3；
        return num1 + num2;
    };
    
    // 等同于：
    
    var sum = function(num1, num2) {
        expression1；
        expression2；
        expression3；
        return num1 + num2;
    };

5 .如果你想返回一个对象时：

### 无this绑定 ###

*  在学习Js的过程中间，基本上每个人都吃过this的苦头，总是纠结this到底是什么？
 *  由于函数内部的 this 可以在调用时被上下文替换，所以操作了意想不到的对象的几率很大。考虑如下的例子：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <script>
            var PageHandler = {
                id: "123456",
                
                init: function () {
                    document.addEventListener("click", function (event) {     
                        this.doSomething(event.type);     // error
                    }, false);
                },
                
                doSomething: function (type) {
                    console.log("Handling " + type + " for " + this.id);
                }
            };
            PageHandler.init();
        </script>
    </body>
    </html>
    点击h1标签之后你会发现如下报错：
    Uncaught TypeError: this.doSomething is not a function
    出现问题是因为 this 指代的是调用该函数的对象（在本例中是 document）而不是PageHandler

你可以显式地在函数上调用 bind() 来绑定 this 以便解决这个问题，像这样：

虽然看起来有点奇怪，但是代码可以正常运行了。实际上我们创建了一个带有 this 绑定的新函数。为了避免额外函数的创建，更好的方式是使用箭头函数。

箭头函数没有 this 绑定，意味着**this只能通过查找作用域链来确定**。如果箭头函数被另一个不包含箭头函数的函数囊括，那么 this 的值和该函数中的 this 相等，否则 this 的值为 undefined。以下就是使用箭头函数重构的示例：