箭头函数和普通函数区别

箭头函数

  • 箭头函数的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。

 

 

posted @ 2022-02-24 10:10  阿兰儿  阅读(240)  评论(0编辑  收藏  举报