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) { // 通过 IIFE 限定作用域 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