箭头函数里this理解

Posted 2021-02-01 ykingcc

先来看代码：

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!!