如何彻底弄懂 JavaScript中的 this 指向

JavaScript中的this指向，其实是一个函数执行时的上下文标记，该标记可以是全局对象、调用函数的对象、或是某个特定指定的对象。核心因素包括函数的调用方式、是否在严格模式下执行、以及ES6箭头函数的特性。要彻底弄懂this指向，需要认识到它的灵活性以及容易变化的本质，并通过对以下几个情境的理解，深入掌握它的工作机制。

一、全局上下文和函数调用

在全局执行上下文中，this通常指向全局对象。在浏览器中，它指向Window对象，在Node.js中，它指向global对象。但是，若函数在严格模式（'use strict';）下运行，this将不会指向全局对象，而是undefined。

函数调用是最简单的调用类型。如果你直接调用一个函数比如foo(), 这时的this通常也是指向全局对象，除非使用了严格模式。在严格模式下，未指定上下文的函数调用中的this值将会是undefined。

二、方法调用

当函数作为对象的方法被调用时，this指向那个对象。例如，当你使用obj.method()这样的语法时，this就会指向obj。

const obj = {
    method: function() {
        return this;
    }
};
console.log(obj.method() === obj); // true

三、构造函数调用

当使用new关键字调用函数时，该函数将会作为构造函数来使用，this将指向一个新创建的对象。这是因为构造函数被设计为创建一个特定类型的对象，并初始化其成员属性和方法。

function ConstructorExample() {
    this.value = 'example';
}
const instance = new ConstructorExample();
console.log(instance.value); // "example"

四、显示绑定

使用call()、apply()或者bind()方法可以明确地指定this的值，不论函数在何处被调用。通过这些方法，可以直接设置调用函数的this值。

五、箭头函数

ES6引入了箭头函数，它没有自己的this值，而是从它的上下文范围内捕获this值。因此，在箭头函数中，this与封闭执行上下文的this保持一致。

下面是一些例子，展示不同情境下的this指向：

// 全局上下文
console.log(this === window); // 在浏览器中为 true
// 函数调用
function foo() { 
    console.log(this); // 在非严格模式下为 `window`，严格模式下为 `undefined`
}
foo();
// 方法调用
const obj = {
    bar: function() {
        console.log(this); // `this` 指向 `obj`
    }
};
obj.bar();
// 构造函数调用
function Baz() {
    console.log(this); // `this` 指向新创建的对象
}
new Baz();
// 显示绑定
function foobar() {
    console.log(this);
}
foobar.call(obj); // `this` 指向 `obj`
// 箭头函数
const arrowFunc = () => {
    console.log(this);
};
arrowFunc(); // `this` 的值取决于它是在哪里被定义的上下文

要彻底理解和掌握JavaScript中的this指向，需要多实践和在不同上下文中测试，还要熟悉函数的严格模式以及箭头函数的影响。

全局上下文中的this

在讨论this指向的时候，首先需要了解的是全局上下文下this指向的对象。在全球执行环境中，不论是在浏览器还是在Node环境下，this默认指向全局对象。在浏览器中，它指向window对象，而在Node.js环境中，它指向global对象。但这种指向并非绝对固定，尤其是在严格模式下会有所不同。严格模式通过字面量声明'use strict'引入，并旨在创建一个更严谨、可预测的JavaScript环境。

例如，以下两种情况下的this指向会有显著差异：

// 非严格模式下
console.log(this); // 指向全局对象 `window` 或 `global`
// 严格模式下
'use strict';
console.log(this); // `undefined`

在严格模式下，如果你不明确地为函数或方法指定this值，this则不会自动指向全局对象，更不会被默认绑定到任何值，而是保持undefined。这个变化是有意为之，目的是为了减少和避免全局变量的污染，并提供一种更安全的编程环境。

函数调用与this

当进入函数执行上下文时，如何确定this的值，取决于函数是如何被调用的。如果是以普通函数的形式调用，比如直接调用一个函数myFunction()，在非严格模式下，this将会指向全局对象。但是在严格模式下，情况又会发生变化。

考虑以下的例子：

function globalFunc() {
    console.log(this); // 这里的this指向取决于是否严格模式以及函数的调用方法
}
// 在浏览器的非严格模式下调用
globalFunc(); // `this` 指向 `window`
// 使用严格模式
function strictFunc() {
    'use strict';
    console.log(this);
}
strictFunc(); // `this` 为 `undefined`

这种情况下，严格模式显著地改变了this的绑定行为。当函数不作为任何对象的方法被调用时，非严格模式下this默认绑定到全局对象，而严格模式下则保持undefined。这要求我们在编写函数时，必须考虑到调用环境，否则可能会出现TypeError错误，尤其是当我们试图访问this所代表undefined的属性时。

对象方法中的this

当函数作为对象的属性，即作为对象的方法被调用时，函数中的this指向该对象。这是this最直观的一面，即它可以通过所属对象来获得明确的指向。如下例所示：

const myObject = {
    myMethod: function() {
        console.log(this);
    }
};
myObject.myMethod(); // `this` 指向 `myObject`

然而，即便函数定义在一个对象内部，this的指向也是可变的，并不总是指向定义它的对象。如果你把这个方法赋值给另一个变量，然后通过这个变量来调用它，this会丢失原来的对象上下文，转而指向全局对象或者undefined（在严格模式下）。

考虑以下示例：

const myObj = {
    myFunc: function() {
        console.log(this);
    }
};
const myFunc = myObj.myFunc;
myFunc(); // 这里的 `this` 不在指向 `myObj`，而是全局对象或 undefined（严格模式）

构造函数中的this

构造函数是特定类型的函数，旨在创建新对象。在构造函数中，this绑定到新创建的对象上。当你使用new操作符调用函数时，JavaScript会自动为你创建一个全新的对象，函数中的this就会指向这个新对象。

function MyConstructor() {
    this.a = 'value';
    console.log(this);
}
const newInstance = new MyConstructor(); // `this` 指向 `newInstance`

在构造函数中，如果不返回任何值或者返回非对象类型的值，那么this与新创建的对象绑定。但是，如果构造函数显式返回了一个对象，那么这个对象会成为整个表达式的结果，this绑定会被忽略。

使用构造函数时需要特别注意不要忘记new操作符，否则this会指向全局对象，这可能会导致意外的全局变量污染。

显式绑定和this

在JavaScript中，我们可以使用call、apply和bind方法显式地设置函数调用的this值。这在您想要控制函数执行上下文或者借用其他对象的方法时非常有用。

call和apply方法类似，它们都可以在调用函数的同时指定this的值。区别在于，call方法接受一个参数列表，而apply方法接受一个包含多个参数的数组。

function displayMessage(greeting) {
    console.log(greeting + ', ' + this.name);
}
const person = {
    name: 'Alice'
};
// 使用 `call` 方法
displayMessage.call(person, 'Hello'); // 输出: "Hello, Alice"
// 使用 `apply` 方法
displayMessage.apply(person, ['Hello']); // 输出: "Hello, Alice"

bind方法则稍有不同，它会创建一个新函数，并将this硬绑定到bind方法的第一个参数上，即无论如何调用这个新函数，this的值都会是固定的。

const boundMessage = displayMessage.bind(person, 'Hello');
boundMessage(); // 输出: "Hello, Alice"

显式绑定是覆盖默认绑定规则的一种方式，这在回调函数或事件处理程序中特别有用，其中this的值可能由于被传递到不同上下文或范围而发生变化。

箭头函数与this

箭头函数在ES6中新增，它们不同于传统的JavaScript函数，因为箭头函数不绑定自身的this。相反，它们捕获它们被创建时所处上下文中的this值并保持不变。

const myObject = {
    myRegularFunction: function() {
        console.log(this); // `this` 指向 `myObject`
        setTimeout(function() {
            console.log(this); // `this` 不指向 `myObject`，指向全局对象或undefined（严格模式）
        }, 1000);
    },
    myArrowFunction: function() {
        console.log(this); // `this` 指向 `myObject`
        setTimeout(() => {
            console.log(this); // `this` 始终指向 `myObject`
        }, 1000);
    }
};
myObject.myRegularFunction();
myObject.myArrowFunction();