ES6入门教程笔记(7)-箭头函数

￡神魔★判官ぃ 2022-03-18 07:18 255阅读 0赞

#### 基本用法 ####

ES6允许使用“箭头”（=>）定义函数。

// 箭头函数
    let f = () => 5;
    // ES5
    let f = function() { 
        return 5;
    };

箭头函数用圆括号代表参数部分，如果代码部分多于一条语句，就用大括号括起来。

// 箭头函数
    let sum = (n1, n2) => {  return n1 + n2; }
    // ES5
    let sum = function(n1, n2) { 
        return n1 + n2;
    };

箭头函数使得表达更加简洁，另外一个用处是简化了回调函数。

// 箭头函数写法
    let result = values.sort((a, b) => a - b);
    // 正常函数写法
    let result = values.sort(function(a, b) { 
        return a - b;
    });

#### 使用注意 ####

箭头函数有几个使用注意点。

*  函数体内的`this`，指定义时所在的对象，而不是使用时所在的对象。
 *  不可以当作构造函数，即不可以使用`new`命令，否则会报错。

function foo() { 
        setTimeout(() => { 
          console.log('id: ', this.id);
        }, 100);
    }
    
    var id = 22;
    
    foo.call({ id: 44});
    // id: 44

上面代码中，箭头函数让`this`总是指向函数定义所在的对象，所以输出的是`44`。

箭头函数让`this`指向固定化，并不是因为内部绑定了`this`，实际原因是箭头函数根本没有自己的`this`，导致内部的`this`就是外层代码块的`this`。也正因为它没有`this`，所以不能用作构造函数。

所以，箭头函数转成ES5的代码如下。

// ES5
    function foo() { 
        var _this = this;
        
        setTimeout(() => { 
          console.log('id: ', _this.id);
        }, 100);
    }
    // id: 44

上面代码清楚地说明了，箭头函数没有自己的`this`，而是引用了外层的`this`。

#### 不适用场合 ####

箭头函数简化了回调函数，使得表达更加简洁。同时它使得`this`从“动态”变成“静态”，所以下面几个场合不适合使用箭头函数。

1 函数定义，且函数内部包括`this`。

const cat = {
        lives: 9,
        jumps: () => {
            this.lives--;
        }
    }

上面的箭头函数中，`this`指向全局对象，因此不会得到预期结果。

2 需要动态`this`的时候，不应使用箭头函数。

var button = document.getElementById('press');
    button.addEventListener('click', () => {
        this.classList.toggle('on');
    });

上面代码运行会报错，因为`this`指向全局对象。如果改成普通对象，`this`就会动态指向正确对象。

3 另外，如果函数体很复杂也不应使用箭头函数，而是使用普通函数，可以提高代码可读性。

*注：本文原始内容来自 [ES6标准入门][ES6]，有修改。*

[ES6]: http://es6.ruanyifeng.com/