如果觉得还有点用,请您给我一个赞!您的赞是我坚持下去的动力
var myobj={
count:1,
getCount:function(){
console.log(this);//myobj
},
getCountArrow:()=>{
console.log(this);//window
},
getCountArrow2:function(){
let fn=()=>{ console.log(this) };
return fn();//myobj
},
}
myobj.getCount() myobj
myobj.getCountArrow() window
myobj.getCountArrow2() myobj
原理
普通函数:在执行的时候才绑定this,就像下面的步骤
myobj.getCount() ==> myobj.getCount.call(myobj);
所以getCount内this===myobj
-
箭头函数:在定义的时候就确定this,它的this指向在定义的时候继承自外层第一个普通函数的this。
- getCountArrow 在定义的时候往外层寻找函数,myobj不是函数,再外层只有window所以this指向window。
- getCountArrow2内的箭头函数,在定义的时候往外层寻找函数
函数是 getCountArrow2,所以this指向getCountArrow2所指向的this
而调用 myobj.getCountArrow2() ==> myobj.getCountArrow2.call(myobj)
所以 getCountArrow2里的this是myobj,所以箭头函数内的this也是myobj
结合上面的原理以下输出的是
var fn=myobj.getCount;
fn() ==> window.fn() ==> fn.call(window)window
var fn=myobj.getCountArrow2;
fn() ==> window.fn() ==> fn.call(window) ==> getCountArrow2内部的this === window ==> 箭头函数this===windowwindow
如果觉得还有点用,请您给我一个赞!您的赞是我坚持下去的动力