携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情

思维导图

每个函数的 this 是在调用时被绑定的，这完全取决于函数的调用位置。

调用位置： 调用位置就是函数在代码中被调用的位置，而不是声明的位置。

调用栈和调用位置

function baz() {
    // 当前调用栈是：baz
    // 因此，当前调用位置是全局作用域
    console.log("baz");
    bar(); // <-- bar 的调用位置
}
function bar() {
    // 当前调用栈是 baz -> bar
    // 因此，当前调用位置在 baz 中
    console.log("bar");
    foo(); // <-- foo 的调用位置
}
function foo() {
    // 当前调用栈是 baz -> bar -> foo
    // 因此，当前调用位置在 bar 中
    console.log("foo");
}
baz(); // <-- baz 的调用位置
复制代码

调用栈就像一个函数调用链，调用位置就是函数所处的外部作用域。

绑定规则

默认绑定

独立函数调用，就是单独不加任何修饰的直接调用函数。

function foo() {
    console.log(this.name);
}
var name = 1;
foo() // 1
复制代码

注意

如果使用严格模式（strict mode），那么不管你怎么以什么方式调用函数，全局对象将一定无法使用默认绑定，因此 this 会绑定到 undefined。

function foo() {
    "use strict"
    console.log(this.name);
}
var name = 1;
foo() // TypeError: Cannot read properties of undefined (reading 'name')
复制代码

隐式绑定

调用位置是否有上下文对象，或者说是否被某个对象拥有或者包含。隐式绑定规则会把函数调用中的 this 绑定到这个上下文对象

function foo() {
    console.log(this.a);
}
var obj = {
    a: 2,
    foo: foo
};
obj.foo(); // 2
复制代码

无论是直接在 obj 中定义还是先定义再添加为引用属性，这个函数严格来说都不属于 obj 对象。调用位置会使用 obj 上下文来引用函数，因此你可以说函数被调用时 obj 对象“拥有”或者“包含”它。

注意对象属性引用链中只有最顶层或者说最后一层会影响调用位置。

function foo() {
    console.log(this.a);
}
var obj2 = {
    a: 42,
    foo: foo
};
var obj1 = {
    a: 2,
    obj2: obj2
};
obj1.obj2.foo(); // 42
复制代码

和一级标识符对照记忆。

隐式丢失

当将一个函数丢失绑定对象时就会启动默认绑定。

function foo() {
    console.log(this.a);
}
var obj = {
    a: 2,
    foo: foo
};
var bar = obj.foo; // 函数别名！
var a = "oops, global"; // a 是全局对象的属性
bar(); // "oops, global
复制代码

bar 引用的是 foo函数本身，bar() 其实是一个不带任何修饰的函数调用，因此应用了默认绑定。

不管什么情况，只要将函数本身多添加一个引用，使用这个引用直接调用函数，那么就是默认绑定。

显式绑定

JavaScript 提供的绝大多数函数以及你自己创建的所有函数都可以使用 call(..) 和 apply(..) 方法。这两个方法是如何工作的呢？它们的第一个参数是一个对象，它们会把这个对象绑定到 this，接着在调用函数时指定这个 this。因为你可以直接指定 this 的绑定对象，因此我们称之为显式绑定。

如果你传入了一个原始值（字符串类型、布尔类型或者数字类型）来当作 this 的绑定对象，这个原始值会被转换成它的对象形式（也就是 new String(..)、new Boolean(..) 或者 new Number(..)）。这通常被称为“装箱”。

1. 硬绑定

硬绑定的典型应用场景就是创建一个包裹函数，传入所有的参数并返回接收到的所有值：

function foo(something) {
    console.log(this.a, something);
    return this.a + something;
}
var obj = {
    a: 2
};
var bar = function () {
    return foo.apply(obj, arguments);
};
var b = bar(3); // 2 3
console.log(b); // 5
复制代码

2. API调用的“上下文”

第三方库的许多函数，以及 JavaScript 语言和宿主环境中许多新的内置函数，都提供了一个可选的参数，通常被称为“上下文”（context），其作用和 bind(..) 一样，确保你的回调函数使用指定的 this。

function foo(el) {
    console.log(el, this.id);
}
var obj = {
    id: "awesome"
};
// 调用 foo(..) 时把 this 绑定到 obj
[1, 2, 3].forEach(foo, obj);
    // 1 awesome 2 awesome 3 awesome
复制代码

new绑定

new 干了什么事

使用 new 来调用函数，或者说发生构造函数调用时，会自动执行下面的操作。

创建（或者说构造）一个全新的对象。
这个新对象会被执行 [[ 原型 ]] 连接。
这个新对象会绑定到函数调用的 this。
如果函数没有返回其他对象，那么 new 表达式中的函数调用会自动返回这个新对象。

function foo(a) {
    this.a = a;
}
var bar = new foo(2);
console.log(bar.a); // 2
复制代码

参考

《你不知道的js》（上卷）

进来就之后，你的this将不再“瞎指”！