先来看代码:
var obj1={ id:4, fn:function(){ var f=() => { console.log(this); //object,f()定义在obj1对象中,this就指向obj1,这就是箭头函数this指向的关键 setTimeout(function() { console.log(this);//window,非箭头函数的情况下还是要看宿主对象是谁,如果没有被对象调用,函数体中的this就绑定的window上 }); } f(); } } obj1.fn();
正如注释说的那样,可以描述出箭头函数里的this定义:
箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象,
定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this
上面的
var f=() => { console.log(this); 这一部分,箭头函数定义在了obj1对象里面,所以this指向obj1。 那么我们再来改变一下代码:
var obj1={ id:4, fn:()=>{ var f=() => { console.log(this); setTimeout(function() { console.log(this); }); } f(); } } obj1.fn();
这里,我们给obj1的fn属性也改成了箭头函数,那么他又会输出什么呢?
没错,放到浏览器运行后,发现this都指向window对象。为什么不是obj1呢?
不是说箭头函数的this由定义的时候的作用域对象决定的吗?
其实是这样的,
var obj1={ id:4, fn:()=>{这里面,obj1是{id:4,fn:()=>{}}这一整个的定义,而obj1是定义在整个代码空间下,或者说window下。所以this继承自window!!
原文地址:https://www.cnblogs.com/YKingcc/p/10230300.html
时间: 2024-10-08 08:49:47