ES6箭头函数：this指向

 var obj={
            fn:function(){
                console.log(this,'hhhhahahahahahahah');
            }
        }
        obj.fn()//Object

控制台输出：

以上这段代码是再浅显不过的this指向问题，也就是谁调用的函数，函数体中的this就指向谁

 

修改上述js代码

 var obj={
            fn:function(){
                setTimeout(function(){
                    console.log(this,"hshshshsh");
                },1000);
            }
        }
        obj.fn();//window

控制台输出：

 这次this指向了最外层的window对象，为什么呢，还是那个道理，这次this出现在全局函数setTImeout()中的匿名函数里，并没有某个对象进行显示调用，所以this指向window对象。

 

使用箭头函数

var obj={
	fn:function(){
		setTimeout(() => {
			console.log(this,"箭头函数箭头函数");
		},1000);
	}
}
obj.fn();//object

控制台输出：

 

this又指向函数的宿主对象了

 

嵌套情况：

var obj1={
	num:4,
	fn:function(){
		var f=() => {    //object，也就是指obj1
			console.log(this);
			setTimeout(() => {
				console.log(this);// //object，也就是指obj1
			});
		}
		f();
	}
}
obj1.fn();

改动1：

var obj1={
	num:4,
	fn:function(){
		var f=function(){    
			console.log(this); //window,因为函数f定义后并没有对象调用，this直接绑定到最外层的window对象
			setTimeout(() => {
				console.log(this);//window，外层this绑定到了window,内层也相当于定义在window层（全局环境）
			});
		}
		f();
	}
}
obj1.fn();

改动2：

var obj1={
	num: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();

总结：

1.箭头函数的this绑定看的是this所在的函数定义在哪个对象下，绑定到哪个对象则this就指向哪个对象

2.如果有对象嵌套的情况，则this绑定到最近的一层对象上