ES6箭头函数

138 阅读1分钟

写法上简洁

let foo = (test) => {
    console.log(test)
};

// 如果只有一句表达式
let woo = test => console.log(test);

// 一句表达式时可以省略return
let doo = test => test + 1;

// 如果是返回一个对象,需要加圆括号
let soo = test => ({ a: test })

没有this

箭头函数本没有this,绑定的是最近一层非箭头函数的this,如果没有,则为window; 所以无法使用call,apply,bind改变箭头函数的this.

没有arguments

同this一样,可以访问外层的arguments;

可以使用rest参数

let foo = (...rest) => {
    console.log(...rest)
};
foo(1,2,3);     //  1   2   3

没有protoType

没有protoType,意味着不可以作为构造函数,不能使用new调用,Generator函数等。

箭头函数的注意点

因为其特性,我们在封装函数中经常会使用箭头函数,但最外层最好包裹一个function,防止内部this被改变。

对象内的属性和prototype内尽量不要使用箭头函数。

setTimeout,addEventListener等的回调函数,不要直接使用箭头函数,应该在function内使用箭头函数,否则this指向window。