JS 中 this 突然指向 undefined？关键的知识点要领会

2024-01-07 18:35:26

在 JavaScript 开发过程中，开发者经常会遇到一个令人困惑的问题：this 关键字指向了 undefined 而不是预期的对象。这种情况往往发生在使用现代 JavaScript 特性如箭头函数、绑定方法或处理事件时。下面将详细探讨这一现象，并给出相应的解决方案。

理解 this 的行为

在 JavaScript 中，this 关键字的值取决于它所在的执行环境（即上下文）。通常情况下，this 指向调用它的对象。然而，在特定条件下，this 可能不会指向任何对象，从而变成 undefined。

函数中的 this

当函数作为普通方法或通过构造器调用时，this 会指向该函数所属的对象。但若直接调用一个未与对象关联的函数，则在严格模式下 this 会被设置为 undefined。

function showThis() {
    console.log(this);
}
showThis(); // 输出：undefined（如果启用严格模式）

箭头函数中的 this

箭头函数不会创建自己的 this 上下文，而是继承自父作用域。因此，在使用箭头函数时要注意其所在上下文中 this 的值。

var obj = {
    name: 'JS',
    showThis: () => console.log(this)
};
obj.showThis(); // 输出：undefined（如果全局 this 指向 window 或 global）

解决方案

使用 bind 方法绑定 this

通过使用 Function.prototype.bind 可以明确设置函数内的 this 值。这种方法适用于需要确保特定上下文的情况。

var obj = {
    name: 'JS',
    showThis: function() {
        console.log(this.name);
    }
};

var boundFunc = obj.showThis.bind(obj);

setTimeout(boundFunc, 1000); // 输出：JS

使用普通函数而非箭头函数

在需要明确 this 指向的情况下，使用普通函数代替箭头函数。普通函数会在调用时创建新的 this 上下文。

var obj = {
    name: 'JS',
    showThis: function() {
        console.log(this.name);
    }
};

obj.showThis(); // 输出：JS

使用 Class 定义方法

使用 ES6 的类语法定义方法时，可以在构造函数中绑定 this。这种方式适用于创建具有上下文依赖的方法的对象。

class MyClass {
    constructor() {
        this.name = 'JS';
        this.showThis = this.showThis.bind(this);
    }

    showThis() {
        console.log(this.name);
    }
}

const instance = new MyClass();
instance.showThis(); // 输出：JS