- this指向
常规函数中的this指向是动态的,只有调用的时候才能确定。
箭头函数没有自己的this,它指向的是外层函数的this。 - 构造函数
箭头函数不能使用使用new关键字作为构造函数。 - arguments对象
常规函数中arguments是一个类数组对象,包含了函数在执行时接收到的参数列表。
箭头函数没有定义arguments关键字,它指向外层函数的arguments。
如果你想获取箭头函数自己的参数对象,可以用 ES6 的扩展运算符
function myRegularFunction() {
const myArrowFunction = (...args) => { console.log(args); }
myArrowFunction('c', 'd');
}
myRegularFunction('a', 'b'); // { 0: 'c', 1: 'd' }
- 隐式返回值
常规函数中如果没有return语句返回值,会隐式的返回undefined。
箭头函数除了可以用常规函数一样的方式返回值之外,还有一个独有的特性:如果箭头函数只包含一个表达式,那么就可以省略函数体的花括号和return语句,并且这个表达式会被当作返回值。
const increment = (num) => num + 1;
increment(41); // => 42
- 成员方法
如果是把常规函数作为类的成员方法,当把这个成员方法作为回调函数使用时,比如setTimeout()或者事件监听器,这个时候访问当前实例的this会出现问题
class Coder {
constructor(nickName) {
this.nickName = nickName;
}
logName() { console.log(this.nickName); }
}
const coder = new Coder('Kayson');
setTimeout(coder.logName, 1000);
// 1 秒后输出 "undefined"
定时器在1秒后执行实例的方法 logName,这个时候方法已经跟实例分离了,this不再是实例,而是全局对象,全局对象上没有nickName属性,因此输出undefined。
怎么办呢?可以用函数上的bind方法,指定函数的执行上下文为当前实例:
setTimeout(coder.logName.bind(coder), 1000);
// 1 秒后输出 "Kayson"
或者使用箭头函数作为成员方法
class Coder {
constructor(nickName) {
this.nickName= nickName;
}
logName = () => { console.log(this.nickName); }
}
const coder = new Coder('Kayson');
setTimeout(coder.logName, 1000);
// 1 秒后输出 "Kayson"