箭头函数和普通函数区别
箭头函数
- 箭头函数的this指向父级作用域的this,通过查找作用域链来确定的,也就是上下文的this.指向的定义它的对象。普通函数指向它的调用者。
- 箭头函数没有prototype原型.
- call,apply,bind无法改变箭头函数的this,因为箭头函数的this在定义时就确定了不会修改。
- 箭头函数不能作为构造函数。
原因:构造函数的new: 1、js内部会首先生成一个对象,2、把函数中的this指向对象 3、执行构造函数的语句 4、 最终返回该对象实例
- 箭头函数不绑定arguments,取而代之用rest参数...代替arguments对象,来访问箭头函数的参数列表
普通函数的this
1、普通函数最终指向调用它的对象,也就是说谁调用就指向谁。
2、没有被对象调用的函数默认指向windows
(函数没有调用时的this指向是无法确定的,也就是说普通函数的this在执行时确定的)
- 1
function test1(){ return function(){ console.log(this) } } var Test1 = new test1(); Test1() //打印 windows function test2(){ return ()=>{ console.log(this) } } var Test2 = new test2(); Test2() //打印 Test2
箭头函数的特殊本质就是函数中的this没有绑定作用,即: 箭头函数的this始终指向函数定义时的this指向而非执行时的。
- 2
const obj = { bg:() => { console.log(this) } } obj.bg() //windows
箭头函数没有this,它的this取决于作用域链上的this。 在这里有一个误区,就是总以为bg的箭头函数上一层作用域是obj这个对象的块级作用域,其实bg是obj的一个属性,他们应该是同一级的作用域,我来换种写就可理解了const obj.bg = ()=> {}这样上层作用域就是window。