JavaScript中的this指向问题有很多博客在解释，仍然有很多人问。上周我们的开发团队连续两个人遇到相关问题，所以我不得不将关于前端构建技术的交流会延长了半个时候讨论this的问题。
与我们常见的很多语言不同，JavaScript函数中的this指向并不是在函数定义的时候确定的，而是在调用的时候确定的。换句话说，函数的调用方式决定了this指向。
JavaScript中，普通的函数调用方式有三种：直接调用、方法调用和new调用。除此之外，还有一些特殊的调用方式，比如通过bind()将函数绑定到对象之后再进行调用、通过call()、apply()进行调用等。而 es6 引入了箭头函数之后，箭头函数调用时，其this指向又有所不同。下面就来分析这些情况下的this指向。
直接调用
直接调用，就是通过函数名(...)这种方式调用。这时候，函数内部的this指向全局对象，在浏览器中全局对象是window，在 NodeJs 中全局对象是global。
来看一个例子：
// 简单兼容浏览器和 NodeJs 的全局对象const_global =typeofwindow==="undefined"? global :window;functiontest(){console.log(this=== _global);// true}test();// 直接调用
这里需要注意的一点是，直接调用并不是指在全局作用域下进行调用，在任何作用域下，直接通过函数名(...)来对函数进行调用的方式，都称为直接调用。比如下面这个例子也是直接调用
(function(_global){// 通过 IIFE 限定作用域functiontest(){console.log(this=== _global);// true} test();// 非全局作用域下的直接调用})(typeofwindow==="undefined"? global :window);
bind() 对直接调用的影响
还有一点需要注意的是bind()的影响。Function.prototype.bind()的作用是将当前函数与指定的对象绑定，并返回一个新函数，这个新函数无论以什么样的方式调用，其this始终指向绑定的对象。还是来看例子：
constobj = {};functiontest(){console.log(this=== obj);}consttestObj = test.bind(obj);test();// falsetestObj();// true
那么bind()干了啥？不妨模拟一个bind()来了解它是如何做到对this产生影响的。
constobj = {};functiontest(){console.log(this=== obj);}// 自定义的函数，模拟 bind() 对 this 的影响functionmyBind(func, target){returnfunction(){returnfunc.apply(target,arguments); };}consttestObj = myBind(test, obj);test();// falsetestObj();// true
从上面的示例可以看到，首先，通过闭包，保持了target，即绑定的对象；然后在调用函数的时候，对原函数使用了apply方法来指定函数的this。当然原生的bind()实现可能会不同，而且更高效。但这个示例说明了bind()的可行性。
call 和 apply 对 this 的影响
上面的示例中用到了Function.prototype.apply()，与之类似的还有Function.prototype.call()。这两方法的用法请大家自己通过链接去看文档。不过，它们的第一个参数都是指定函数运行时其中的this指向。
不过使用apply和call的时候仍然需要注意，如果目录函数本身是一个绑定了this对象的函数，那apply和call不会像预期那样执行，比如
constobj = {};functiontest(){console.log(this=== obj);}// 绑定到一个新对象，而不是 objconsttestObj = test.bind({});test.apply(obj);// true// 期望 this 是 obj，即输出 true// 但是因为 testObj 绑定了不是 obj 的对象，所以会输出 falsetestObj.apply(obj);// false
由此可见，bind()对函数的影响是深远的，慎用！
方法调用
方法调用是指通过对象来调用其方法函数，它是对象.方法函数(...)这样的调用形式。这种情况下，函数中的this指向调用该方法的对象。但是，同样需要注意bind()的影响。
constobj = {// 第一种方式，定义对象的时候定义其方法test() {console.log(this=== obj); }};// 第二种方式，对象定义好之后为其附加一个方法(函数表达式)obj.test2 =function(){console.log(this=== obj);};// 第三种方式和第二种方式原理相同// 是对象定义好之后为其附加一个方法(函数定义)functiont(){console.log(this=== obj);}obj.test3 = t;// 这也是为对象附加一个方法函数// 但是这个函数绑定了一个不是 obj 的其它对象obj.test4 = (function(){console.log(this=== obj);}).bind({});obj.test();// trueobj.test2();// trueobj.test3();// true// 受 bind() 影响，test4 中的 this 指向不是 objobj.test4();// false
这里需要注意的是，后三种方式都是预定定义函数，再将其附加给obj对象作为其方法。再次强调，函数内部的this指向与定义无关，受调用方式的影响。
方法中 this 指向全局对象的情况
注意这里说的是方法中而不是方法调用中。方法中的this指向全局对象，如果不是因为bind()，那就一定是因为不是用的方法调用方式，比如
constobj = { test() {console.log(this=== obj); }};constt = obj.test;t();// false
t就是obj的test方法，但是t()调用时，其中的this指向了全局。
之所以要特别提出这种情况，主要是因为常常将一个对象方法作为回调传递给某个函数之后，却发现运行结果与预期不符——因为忽略了调用方式对this的影响。比如下面的例子是在页面中对某些事情进行封装之后特别容易遇到的问题：
classHandlers {// 这里 $button 假设是一个指向某个按钮的 jQuery 对象constructor(data, $button) {this.data = data; $button.on("click",this.onButtonClick); } onButtonClick(e) {console.log(this.data); }}consthandlers =newHandlers("string data", $("#someButton"));// 对 #someButton 进行点击操作之后// 输出 undefined// 但预期是输出 string data
this.onButtonClick作为一个参数传入on()之后，事件触发时，理论上是对这个函数进行的直接调用，而不是方法调用，所以其中的this会指向全局对象 —— 但实际上由于调用事件处理函数的时候，this指向会绑定到触发事件的 DOM 元素上，所以这里的this是指向触发事件的的 DOM 元素(注意：this并非 jQuery 对象)，即$button.get(0)(注意代码前注释中的假设)。
要解决这个问题有很多种方法：
// 这是在 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本身就是设计来创建新对象的。
vardata ="Hi";// 全局变量functionAClass(data){this.data = data;}vara =newAClass("Hello World");console.log(a.data);// Hello Worldconsole.log(data);// Hivarb =newAClass("Hello World");console.log(a === b);// false
箭头函数中的 this
先来看看MDN 上对箭头函数的说明
An arrow function expression has a shorter syntax than a function expression and doesnotbind its ownthis,arguments,super, ornew.target. Arrow functions are always anonymous. These function expressions are best suited for non-method functions, and they cannot be used as constructors.
这里已经清楚了说明了，箭头函数没有自己的this绑定。箭头函数中使用的this，其实是直接包含它的那个函数或函数表达式中的this。比如
constobj = { test() {constarrow = () => {// 这里的 this 是 test() 中的 this，// 由 test() 的调用方式决定console.log(this=== obj); }; arrow(); }, getArrow() {return() => {// 这里的 this 是 getArrow() 中的 this，// 由 getArrow() 的调用方式决定console.log(this=== obj); }; }};obj.test();// trueconstarrow = obj.getArrow();arrow();// true
示例中的两个this都是由箭头函数的直接外层函数(方法)决定的，而方法函数中的this是由其调用方式决定的。上例的调用方式都是方法调用，所以this都指向方法调用的对象，即obj。
箭头函数让大家在使用闭包的时候不需要太纠结this，不需要通过像_this这样的局部变量来临时引用this给闭包函数使用。来看一段 Babel 对箭头函数的转译可能能加深理解：
// ES6constobj = { getArrow() {return() => {console.log(this=== obj); }; }}
// ES5，由 Babel 转译varobj = { getArrow:functiongetArrow(){var_this =this;returnfunction(){console.log(_this === obj); }; }};
另外需要注意的是，箭头函数不能用new调用，不能bind()到某个对象(虽然bind()方法调用没问题，但是不会产生预期效果)。不管在什么情况下使用箭头函数，它本身是没有绑定this的，它用的是直接外层函数(即包含它的最近的一层函数或函数表达式)绑定的this。
勘误
this.onButtonClick 用于 jQuery 事件的时候，this已经被 jQuery 改为指向触发事件的元素，感谢@月亮哥哥和@QoVoQ指出。此错误已经在文中修改了。
网友评论