JavaScript 项目的 this 关键字怎么引用

JavaScript项目中的this关键字引用的是函数当前的执行上下文，其具体指向取决于函数在何处以及如何被调用。一般情况下，this可指向全局对象、调用方法的对象、构造函数创建的实例、通过call、apply、bind方法显式指定的上下文。在箭头函数中，this被特别处理，它会捕获其所在上下文的this值。JavaScript的类方法中使用this时需要注意，未绑定的类方法中的this可能不会指向实例，可能导致运行时错误。

在严格模式下(use strict)，如果函数不是作为对象的方法、或通过上述三种方法之一(call/apply/bind)调用，那么this的值将是undefined。这是因为在严格模式下，this不再指向全局对象。这一点的理解与应用尤为关键，尤其是在设计复杂的JavaScript程序时。接下来，我们将详细探讨这个话题。

一、全局 & 函数上下文中的`this`

在非严格模式下，不论如何调用函数，如果this没有被设置，则默认指向全局对象。在浏览器中，this通常指向window对象。

在全局执行上下文中，也就是任何函数之外，this同样指向全局对象。

console.log(this === window); // 在浏览器中返回 true
function whatIsThis() {
    return this;
}
console.log(whatIsThis() === window); // 在非严格模式下返回 true

二、方法调用中的`this`

当函数作为对象的一个方法被调用时，this指向该方法所属的对象。

const myObject = {
    method() {
        return this;
    }
};
console.log(myObject.method() === myObject); // 返回 true

但是，如果引用对象上方法的引用被赋值给一个变量，this将不再指向原始对象。

const myMethod = myObject.method;
console.log(myMethod() === window); // 非严格模式下，返回 true

三、构造器中的`this`

在构造器函数中，this指向通过new关键词创建的新对象。

function Constructor() {
    this.value = "赋值操作";
}
const instance = new Constructor();
console.log(instance.value); // 输出 "赋值操作"

四、显式绑定中的`this`

this可以通过call、apply和bind方法显式地设置。

function foo() {
    return this;
}
let context = { bar: "context" };
console.log(foo.call(context) === context);  // 返回 true
console.log(foo.apply(context) === context); // 返回 true
console.log(foo.bind(context)() === context); // 返回 true

五、箭头函数中的`this`

箭头函数不具有自己的this，它们捕获其所在执行上下文的this值作为自己的this值。

const arrowFunc = () => {
    return this;
};
console.log(arrowFunc() === window); // 在非严格模式的浏览器中返回 true
const myContext = {
    regularFunc: function() {
        return function() {
            return this;
        };
    },
    arrowFunc: function() {
        return () => {
            return this;
        };
    }
};
console.log(myContext.regularFunc()() === window); // 非严格模式下，返回 true
console.log(myContext.arrowFunc()() === myContext); // 返回 true

六、类中的`this`

在类的方法内部，this默认指向实例对象。但如果方法被单独提取出来，则this可能会丢失。

class MyClass {
    constructor() {
        this.name = "MyClass";
    }
    greet() {
        return this.name;
    }
}
const myInstance = new MyClass();
console.log(myInstance.greet()); // 输出 "MyClass"
const greet = myInstance.greet;
console.log(greet()); // 非严格模式下，返回 undefined

因此，为了避免在事件处理或回调上下文中this断开，class方法通常需要绑定。

class MyComponent {
    constructor() {
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        // 可以安全地使用 `this`，因为 `handleClick` 被绑定到实例
    }
    // 或者使用箭头函数
    handleAnotherClick = () => {
        // `this` 指向实例
    };
}