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

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

如果对非箭头函数this指向有问题的朋友，建议看我之前的文章。【JavaScript】this的指向详解

（为了展示方便，这两个例子都是在浏览器环境中运行，所以全局对象是window）

一、例子①

//这里只能用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);

运行结果

通过运行结果可以发现， 无论我们怎么改变箭头函数arrowFn的调用方式，都不会改变this的指向，this始终指向它被创建时所处的词法作用域中的this。

 

二、例子②

//这里只能用var定义变量,let,const定义的变量，不是绑定在window下。
var str = 'window';  
 
const obj = {
    str:'obj',
    fn: ()=>{
	    console.log(this.str);	
    }
}

obj.fn();

运行结果

这时候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();
newObj.fn();

运行结果

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

（参照obj.newFn），

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