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();     // 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 会指向全局对象 —— 但实际上因为调用事件处理函数的时候，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 自己就是设计来建立新对象的。

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 expressions 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。

勘误

• this.onButtonClick 用于 jQuery 事件的时候，this 已经被 jQuery 改成指向触发事件的元素，感谢 @月亮哥哥 和 @QoVoQ 指出。此错误已经在文中修改了。