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

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标准入门，有修改。

发表回复 取消回复