JavaScript 中 this 指向的规则

Question

完全掌握 this 在 JavaScript 中的指向，吹散笼罩在 this 周围的重重迷雾，理解谁决定了 this 的指向，看完本篇你能在代码运行之前就可以判断出 this 的指向。

我们都曾以不同的方式在函数中看见过 this，但仍然不能准确的指出 this 在 JavaScript 中指向谁，本篇将让你完全掌握 this。

5大规则

1、如果 new 关键词出现在被调用函数的前面，那么 JavaScript 引擎会创建一个新的对象，被调用函数中的 this 指向的就是这个新创建的函数。

function ConstructorExample() {
    console.log(this);
    this.value = 10;
    console.log(this);
}

new ConstructorExample();

// -> ConstructorExample {}
// -> ConstructorExample { value: 10 }

2、如果通过 apply、call 或者 bind 的方式触发函数，那么函数中的 this 指向传入函数的第一个参数。

function fn() {
    console.log(this);
}

var obj = {
    value: 5
};

var boundFn = fn.bind(obj);

boundFn(); // -> { value: 5 }
fn.call(obj); // -> { value: 5 }
fn.apply(obj); // -> { value: 5 }

3、如果一个函数是某个对象的方法，并且对象使用句点符号触发函数，那么 this 指向的就是该函数作为那个对象的属性的对象，也就是，this 指向句点左边的对象。

var obj = {
    value: 5,
    printThis: function() {
      console.log(this);
    }
};

obj.printThis(); // -> { value: 5, printThis: ƒ }

4、如果一个函数作为FFI被调用，意味着这个函数不符合以上任意一种调用方式，this指向全局对象，在浏览器中，即是 window。

var obj = {
    value: 5,
    printThis: function() {
      console.log(this);
    }
};

obj.printThis(); // -> { value: 5, printThis: ƒ }

注意，第4条规则和第3条很类似，不同的是当函数没有作为方法被调用时，它将自动隐式编程全局对象的属性——window。也就是当我们调用 fn()，可以理解为window.fn()，根据第三条规则，fn() 函数中的 this 指向的就是 window。

var obj = {
    value: 5,
    printThis: function() {
      console.log(this);
    }
};

obj.printThis(); // -> { value: 5, printThis: ƒ }

5、如果出现上面对条规则的累加情况，则优先级自1至4递减，this 的指向按照优先级最高的规则判断。

将规则应用于实践

看一个代码示例，并使用上面的规则判断 this 的指向。

var obj = {
    value: 'hi',
    printThis: function() {
        console.log(this);
    }
};

var print = obj.printThis;

obj.printThis(); // -> {value: "hi", printThis: ƒ}
print(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

obj.prinThis() ，根据第三条规则 this 指向的就是 obj。根据第四条规则 print() 是 FFI，因此 this 指向 window。

其实上面的示例也考察你对于 值和引用 在 JavaScript 中的区别，可以看这篇文章：

JavaScript 中原始值 vs. 引用值。

obj 对象中 printThis 这一方法其实是函数的地址的一个引用，当我们将 obj.printThis 赋值给 print 时，print 包含的也是函数的引用，和 obj 对象一点关系也没有。obj 只是碰巧拥有一个指向这个函数的引用的属性。

当不适用 obj 对象触发函数时，这个函数就是 FFI。

应用多项规则

当出现多个上述规则时，将优先级高的“获胜”，如果规则2和规则3同时存在，则规则2优先：

var obj1 = {
    value: 'hi',
    print: function() {
        console.log(this);
    },
};

var obj2 = { value: 17 };

obj1.print.call(obj2); // -> { value: 17 }

如果规则1和规则3同时被应用，则规则1优先：

var obj1 = {
    value: 'hi',
    print: function() {
        console.log(this);
    },
};

new obj1.print(); // -> print {}

代码中引用了库？

有些库会将 this 的指向绑定更有用的对象上，比如 jQuery 库，在事件处理程序中，this 的指向不是全局对象而被绑定到了元素对象上。因此如果你发现一些不能用上述5项规则解释的情况，请阅读你所使用的库的官方文档，找到关于该库是如何改变 this 的指向的，通常通过 bind 方法改变this的指向。