【前端】全面解析 JavaScript 中的 this 指向规则

💯前言

• JavaScript 是现代 Web 开发中不可或缺的编程语言，其灵活性和强大的特性使其在浏览器端和服务器端均占据重要地位。然而，这种灵活性也导致了诸多复杂的语法规则，尤其是关于 this 的动态绑定规则。this 的指向机制作为 JavaScript 中的核心概念之一，不仅广泛应用于面向对象编程，还在函数式编程和事件处理等场景中扮演关键角色。
  许多开发者初次接触 JavaScript 时，容易误解或混淆 this 的行为，原因在于其指向是动态的，完全取决于函数的调用方式，而非函数的定义位置或作用域。对于中高级开发者来说，深入掌握 this 的绑定规则，不仅有助于书写清晰且高效的代码，还能避免潜在的错误和逻辑漏洞。
  在本文中，我们将通过具体代码实例，逐步剖析 this 的核心规则及其在不同场景中的表现。同时，本文将结合严格模式与箭头函数等高级特性，探讨如何在复杂项目中灵活运用 this。通过对基础规则的总结和理论的延展，我们希望帮助读者全面掌握这一概念，为实际开发奠定坚实的基础。
  JavaScript

💯代码实例与执行分析

以下代码展示了一个典型的 this 指向问题：

var name = '李四';

var obj = {
    name: '张三',
    speak: function () {
        console.log(this.name);//obj
        showName();
    }
}

obj.speak(); //obj调用的speak speak 函数内部的this指向obj

function showName() {
    console.log(this.name);
}

我们将按步骤分析代码执行的行为。

步骤一：全局变量声明

var name = '李四';

在全局作用域中声明的变量 name，在浏览器环境中会被挂载至全局对象 window。因此，代码等价于：

window.name = '李四';

这意味着后续可以通过 this.name 访问到全局变量 name 的值。

步骤二：定义对象 obj

var obj = {
    name: '张三',
    speak: function () {
        console.log(this.name); // obj
        showName();
    }
};

这里定义了一个对象 obj，包含两个成员：

1. name 属性：存储字符串 '张三'。
2. speak 方法：在调用时输出 this.name 的值，并调用全局函数 showName。

值得注意的是，speak 方法中的 this 指向是动态的，其值取决于函数的调用方式。

步骤三：调用 obj.speak()

obj.speak();

调用 obj.speak() 时：

1. 方法 speak 是由对象 obj 调用，因此 this 指向调用者 obj。
2. console.log(this.name) 输出 obj.name 的值，即：

张三

3. 接着调用全局函数 showName()。

步骤四：调用全局函数 showName()

function showName() {
    console.log(this.name);
}

showName 是一个全局函数，其调用方式未绑定至任何对象，因此：

• 在非严格模式下，this 指向全局对象 window。
• window.name 的值为 '李四'，因此输出：

李四

最终输出结果

根据以上分析，代码的执行结果如下：

1. console.log(this.name) 输出：

张三

2. console.log(this.name) 输出：

李四

完整输出：

张三
李四

💯this 的规则与理论拓展

1. 动态绑定规则

JavaScript 中的 this 是动态绑定的，其值由函数的调用方式决定，具体包括以下情形：

（1）全局上下文中的 this

在全局作用域中：

• 在浏览器环境中，this 指向全局对象 window。
• 在 Node.js 环境中，this 指向模块的 exports 对象。

示例：

console.log(this); // 浏览器中输出：window

（2）普通函数调用

当函数直接调用时：

• 在非严格模式下，this 指向全局对象 window。
• 在严格模式下，this 的值为 undefined。

示例：

function show() {
    console.log(this);
}

show(); // 非严格模式：window；严格模式：undefined

（3）对象方法调用

当函数作为对象的方法调用时，this 指向调用方法的对象。

示例：

var obj = {
    name: '张三',
    show: function () {
        console.log(this.name);
    }
};

obj.show(); // 输出：'张三'

（4）赋值后的函数调用

当对象的方法被赋值给变量后调用，该函数的调用上下文不再与原对象绑定，this 指向全局对象。

示例：

var obj = {
    name: '张三',
    showName: function () {
        console.log(this.name);
    }
};

var fn = () => obj.showName();
fn(); // 输出：'李四'，因为 this 指向 window

（5）箭头函数的特性

箭头函数没有自己的 this，其值由定义时的上下文决定。

示例：

var obj = {
    name: '张三',
    show: () => {
        console.log(this.name);
    }
};

obj.show(); // 输出：undefined 或 '李四'

2. 严格模式的行为

在严格模式下，普通函数调用的 this 为 undefined，这一特性可以帮助开发者避免无意间的全局对象污染。

示例：

'use strict';

function show() {
    console.log(this);
}

show(); // 输出：undefined

💯小结

• 
  通过系统分析，我们可以归纳出以下关键点：

1. this 的值完全取决于函数的调用方式，而非定义位置。
2. 当函数作为对象的方法调用时，this 通常指向该对象。
3. 箭头函数绑定定义时的上下文，this 不随调用方式改变。
4. 在非严格模式下，未绑定对象的普通函数调用，其 this 默认指向全局对象。
5. 在严格模式下，普通函数的 this 为 undefined，从而减少全局作用域污染的可能性。

为了掌握 this 的使用细节，建议开发者在不同的调用情境下进行动态调试，通过 console.log(this) 深入理解其行为，从而在复杂项目中更加灵活地应用。