思维导图
每个函数的 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 复制代码
