js中箭头函数和普通函数的区别

5次阅读

共计 773 个字符,预计需要花费 2 分钟才能阅读完成。

一、前言
今天电话面试的小姐姐问我箭头函数和普通函数的区别的时候,我记得我回答了,箭头函数没有 this???写起来比较方便???好坑阿,连我都觉得不好意思了,赶紧来补习一下。
// 箭头函数
let fun = () => {
console.log(‘lalalala’);
}

// 普通函数
function fun() {
console.log(‘lalla’);
}

二、定义
首先我认为箭头函数是匿名函数,不能作为构造函数,不能使用 new 然后借鉴阮一峰老师的 es6 教程里第七章(函数扩展)里面的第五小节箭头函数来看看他的定义
箭头函数有几个使用注意点。

函数体内的 this 对象,就是定义时所在的对象,而不是使用时所在的对象。
不可以当作构造函数,也就是说,不可以使用 new 命令,否则会抛出一个错误。
不可以使用 arguments 对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
不可以使用 yield 命令,因此箭头函数不能用作 Generator 函数。

上面四点中,第一点尤其值得注意。this 对象的指向是可变的,但是在箭头函数中,它是固定的。
把动态 this 转换为静态 this

长期以来,JavaScript 语言的 this 对象一直是一个令人头痛的问题,在对象方法中使用 this,必须非常小心。箭头函数”绑定”this,很大程度上解决了这个困扰。
箭头函数可以让 this 指向固定化,这种特性很有利于封装回调函数。

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

箭头函数的 this 永远指向其上下文的 this,任何方法都改变不了其指向,如 call() , bind() , apply()
普通函数的 this 指向调用它的那个对象

正文完
 0