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) {  // 通过 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();   // falsetestObj(); // 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();   // falsetestObj(); // true

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