JavaScript的this指向问题深度解析

JavaScript中的this指向问题有很多博客在解释，仍然有很多人问。上周我们的开发团队连续两个人遇到相关问题，所以我不得不将关于前端构建技术的交流会延长了半个时候讨论this的问题。

与我们常见的很多语言不同，JavaScript函数中的this指向并不是在函数定义的时候确定的，而是在调用的时候确定的。换句话说，函数的调用方式决定了this指向。

JavaScript中，普通的函数调用方式有三种，直接调用，方法调用和new调用。除此之外，还有一些特殊的调用方式，比如通过bind()将函数绑定到对象之后再调用、通过call()、apply()进行调用等。而es6引入了箭头函数时，其this指向又有所不同。下面就来分析这些情况下的this指向。

直接调用

    直接调用，就是通过函数名(...)这种方式调用。这时候，函数内部的this指向全局对象，在浏览器中全局对象是window，在NodeJs中全局对象是global。

来看一个例子：

//简单兼容浏览器和NodeJs的全局对象
const _global=typeof window===”undefined”?global:window

function test(){
console.log(this===_global); //true
}
test();

    这里需要注意的一点是，直接调用并不是指在全局作用域下进行调用，在任何作用域下，直接通过 函数名(...)来对函数进行调用的方式，都称为直接调用。比如下面这个例子也是直接调用

(function(_global){这里写代码片
function test(){
console.log(this===_global); //true
}
test(); //非全局作用域下的直接调用
})(typeof window===’undefined’?global:window);

bind()对直接调用的影响

还有一点需要注意的是bind()的影响。
Function.prototype.bind()的作用是将当前函数与指定的对象绑定，并返回一个新函数，这个新函数无论以什么样的方式调用，其this始终指向绑定的对象。还是来看例子：

const obj={}；

function test(){
console.log(this===obj);
}

const testObj=test.bind(obj);
test(); //false
testObj(); //true

那么bind()干了啥？不妨模拟一个bind()来了解它是如何做到对this产生影响的。

const obj={}；

function test(){
console.log(this===obj)
}

//自定义的函数，模拟bind()对this的影响
function myBind(func,target){
return function(){
return func.apply(target,arguments)
}
}

const testObj=myBind(test,obj);
test(); //false
testObj(); //true

从上面的示例可以看到，首先，通过闭包，保持了target，即绑定的对象；然后在调用函数的时候，对原函数使用了apply方法来指定函数的this。当然原生的bind()实现可能会不同，而且更高效。但这个示例说明了bind()的可行性。

call和apply对this的影响

上面的示例中用到了Function.prototype.apply(),与之类似的还有Function.prototype.call()。这两方法的用法请大家自己通过链接去看文档。不过，它们的第一个参数都是指定函数运行时其中的this指向。

不过使用apply和call的时候仍然需要注意，如果目录函数本身是一个绑定了this对象的函数，那apply和call不会像预期那样执行，比如

const obj={}；

function test(){
console.log(this===obj)
}

//绑定到一个新对象，而不是obj
const testObj=test.bind({});
test.apply(obj); //true

//期望this是obj，即输出true
//但是应为testObj绑定了不是obj的对象，所以会输出false
testObj.apply(obj)； //false

由此可见，bind()对函数的影响是深远的，慎用！

方法调用

方法调用是指通过对象来调用其方法函数，它是对象.方法函数(…)这样的调用形式。这种情况下，函数中的this指向调用该方法的对象，但是，同样需要注意bind()的影响。

const obj={
//第一种方式，定义对象的时候定义其方法
test(){
console.log(this===obj);
}
}

//第二种方式，对象定义好之后为其附加一个方法(函数表达式)
obj.test2=function(){
console.log(this===obj);
}

//第三种方式和第二种方式原理相同
//是对象定义好之后为其附加一个方法（函数定义）
function t(){
console.log(this===obj);
}
obj.test3=t;

//这也是为对象附加一个方法函数
//但是这个函数绑定了一个不是obj的其他对象
obj.test4=(function(){
console.log(this===obj);
}).bind({})

obj.test(); //true
obj.test2(); //true
obj.test3(); //true

//受bind()影响，test4中的this指向不是obj
obj.test4(); //false

这里需要注意的是，后三种方式都是预定定义函数，再将其附加给obj对象作为其方法。再次强调，函数内部的this指向与定义无关，受调用方式的影响。

方法中this指向全局对象的情况
注意这里说的是方法中而不是方法调用中。方法中的this指向全局对象，如果不是因为bind()，那就一定是因为不是用的方法调用方式，比如

const obj={
test(){
console.log(this===obj);
}
}

const t=obj.test;
t(); //false

t就是obj的test方法，但是t()调用时，其中的this指向了全局。

之所以要特别提出这种情况，主要是因为常常将一个对象方法作为回调传递给某个函数之后，却发现运行结果与预期不符——因为忽略了调用方式对this的影响。比如下面的例子是在页面中对某些事情进行封装之后特别容易遇到的问题。

class Handlers{
//这里button假设是一个指向某个按钮的jQuery对象constructor(data,button){
this.data=data;
$button.on(“click”,this.onButtonClick);
}

   onButtonClick(e){        console.log(this.data);   }

}

const handlers=new Handlers(“string data”,$(“#someButton”));
//对#someButton进行点击操作之后
//输出undefined
//但预期是输出string data

很显然this.onButtonClick作为一个参数传入on()之后，事件触发时，是对这个函数进行的直接调用，而不是方法调用，所以其中的this会指向全局对象。要解决这个问题有很多种方法

//这事在es5中的解决办法之一
var _this=this;
$button.on(“click”，function(){
_this.onButtonClick();
})

//也可以通过bind()来解决
$button.on(“click”,this.onButtonClick.bind(this))

//es6中可以通过箭头函数来处理，在jQuery中慎用
$button.on(“click”，e=>this.onButtonClick(e))

不过请注意，将箭头函数用作jQuery的回调时造成要小心函数内对this的使用。jQuery大多数回调函数(非箭头函数)中this
都是表示调用目标，所以可以写$(this).text()这样的语句，但jQuery无法改变箭头函数的this指向，同样的语句语义完全不同

new调用
在es6之前，每一个函数都可以当做是构造函数，通过new调用来产生新的对象(函数内无特定返回值的情况下)。而es6改变了这种状态，虽然class定义的类用typeof运算符得到的仍然是”function”,但它不能像普通函数一样直接调用，同时，class中定义的方法函数，也不能当作构造函数用new来调用。

而在es5中，用new调用一个构造函数，会创建一个新对象，而其中的this就指向这个新对象。这没神马悬念，因为new本身就是设计来创建新对象的。

var data=’Hi’; //全局变量

function AClass(data){
this.data=data
}

var a=new AClass(‘Hello World’);
console.log(a.data) //Hello World
console.log(data) //Hi

var b=new AClass(“Hello World”);
console.log(a===b) //false

箭头函数中的this

先来看看MDN上对间箭头函数的说明

An arrow function expression has a shorter syntax than a function expression and does not bind its own this,arguments,super,or new.target. Arrow functions are always anonymous. These function expression are best suited for non-method functions, and they cannot be used as constructors.

这里已经说清楚说明了，箭头函数没有自己的this绑定。箭头函数中使用this，其实是直接包含它的那个函数或函数表达式的this。比如

const obj={
test(){
const arrow=()=>{
//这里的this是test()中的this
//由test()的调用方式决定的
console.log(this===obj)
}
arrow();
},
getArrow(){
return ()=>{
//这里的this是getArrow()中的this
//由getArrow()的调用方式决定
console.log(this===obj)
}
}
}

obj.test() //true

const arrow=obj.getArrow();
arrow(); //true

示例中的两个this都是由箭头函数的直接外层函数(方法)决定的，而方法函数中的this是由其调用方式决定的，所以this都是指向方法调用的对象，即obj

箭头函数让大家在使用闭包的时候不需要太纠结this，不需要通过像_this这样的局部变量来临时引用this给闭包函数使用。来看一段Babel对箭头函数的转义可能能加深理解：

//ES6
const obj={
getArrow(){
return ()=>{
console.log(this===obj)
}

   }

}

//ES5,由Babel转译
var obj={
getArrow:function getArrow(){
var _this=this;
return function(){
console.log(_this===obj)
}

    }

}

另外需要注意的是，箭头函数不能用new调用，不能bind()到某个对象（虽然bind()方法调用没问题，但是不会产生预期效果）。不管在什么情况下使用箭头函数，它本身是没有绑定this的，它用的是直接外层函数（即包含它最近的一层函数或函数表达式）绑定的this

—–完—–