【ES6】两个例子明白箭头函数this指向

【ES6】两个例子明白箭头函数this指向

版权声明：本文为CSDN博主「汪小穆」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/w390058785/article/details/82884032

前言：es6箭头函数没出现之前，this的指向不是函数被创建时绑定，而是被怎么样的方式调用时绑定的。而箭头函数刚好相反，箭头函数的this指向是函数被创建时绑定的，它的指向就是当前词法作用域中的this，并且不会因为被怎么样的方式调用改变绑定.

例子1

//这里只能用var定义变量,let,const定义的变量，不是绑定在window下。
var str = 'window';  
 
const obj = {
    str:'obj',
    nativeFn: function(){
	console.log(this.str, '当前词法作用域中的this');
	return function(){
	    console.log('原生函数',this.str);	
	}
    },
    arrowFn: function(){
	console.log(this.str, '当前词法作用域中的this');
	return ()=>{
	    console.log('箭头函数',this.str);	
	}
    }
};
const obj2 = {
    str:'obj2'	
}

var nativeFn = obj.nativeFn();
var arrowFn = obj.arrowFn();
	
console.log('函数调用一 **********');  
nativeFn();
arrowFn();  
	
console.log('函数调用二 **********');  
nativeFn.call(obj2);
arrowFn.call(obj2);    
	
console.log('函数调用三 **********'); 
setTimeout(function(){    
    nativeFn();
    arrowFn();	
},50);
 
//函数调用四
var doc = document.documentElement;
doc.str = 'document';
doc.addEventListener('click',function(){
    console.log('函数调用四 **********'); 
},false);
doc.addEventListener('click',nativeFn,false);
doc.addEventListener('click',arrowFn,false);
————————————————
版权声明：本文为CSDN博主「汪小穆」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/w390058785/article/details/82884032

例子2

//这里只能用var定义变量,let,const定义的变量，不是绑定在window下。
var str = 'window';  
 
const obj = {
    str:'obj',
    fn: ()=>{
	console.log(this.str);	
    }
}
 
obj.fn();
————————————————
版权声明：本文为CSDN博主「汪小穆」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/w390058785/article/details/82884032

这时候this竟然指向了window对象，这也是使很多刚接触箭头函数的朋友容易困惑的一个点。在看看下面的例子相信就能理解这个问题的原因了。

//这里只能用var定义变量,let,const定义的变量，不是绑定在window下。
var str = 'window';  
 
const obj = {
    str:'obj',
    fn: ()=>{
	console.log(this.str);	
    },
    fn2: function(){
	console.log(this.str, '当前词法作用域中的this')
	return {
	    str: 'newObj',
	    fn: ()=>{
		console.log(this.str);	
	    }	
	}
    }
}
 
obj.newFn = ()=>{
    console.log(this.str);	
}
 
obj.fn();
obj.newFn();
 
var newObj = obj.fn2();

————————————————
版权声明：本文为CSDN博主「汪小穆」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/w390058785/article/details/82884032

这里已经不难看出来了，当我们创建对象的时候，是在全局作用域下创建的，而对象中的方法也是这时候创建的

（参照obj.newFn），

所以这时候的this是指向全局的，而我们在fn2里面创建的对象，这个对象的方法的this就指向他被创建时的词法作用域obj了。