深入解读 JavaScript 中 `this` 的指向机制：覆盖所有场景与底层原理

this 是 JavaScript 中最容易引发困惑的核心概念之一，它的指向在不同场景下呈现截然不同的行为。本文将系统性地解析 this 的所有使用场景，结合代码示例和底层原理，帮助你彻底掌握其运行机制。

一、全局环境下的 `this`

1. 浏览器环境
在浏览器全局作用域中，this 指向 window 对象：

console.log(this === window); // true (非严格模式)

2. Node.js 环境
在 Node.js 模块顶层作用域中，this 指向当前模块的 exports 对象：

console.log(this === module.exports); // true

底层原理
全局环境中的 this 由执行环境的全局对象决定，浏览器为 window，Node.js 模块中为 exports。

二、函数调用中的 `this`

1. 独立函数调用（非严格模式）

function showThis() {console.log(this);
}
showThis(); // window (浏览器) / global (Node.js)

2. 严格模式下的函数调用

"use strict";
function strictThis() {console.log(this);
}
strictThis(); // undefined

底层原理
函数调用时，若未指定 this（即非方法调用、未使用 new 或绑定），非严格模式下 this 回退到全局对象；严格模式下保持为 undefined。

三、对象方法中的 `this`

const obj = {name: "Alice",greet: function() {console.log(this.name);}
};
obj.greet(); // "Alice"

隐式丢失问题

const greet = obj.greet;
greet(); // undefined (严格模式下) 或 window.name (非严格模式)

原理分析
方法赋值给变量后，调用变为独立函数调用，this 丢失原始绑定。

四、构造函数中的 `this`

使用 new 调用构造函数时，this 指向新创建的实例：

function Person(name) {this.name = name;
}
const bob = new Person("Bob");
console.log(bob.name); // "Bob"

底层过程

创建空对象，其 [[Prototype]] 指向构造函数原型
构造函数内的 this 绑定到此新对象
若构造函数无显式返回，自动返回新对象

五、显式绑定：call/apply/bind

1. call & apply

function introduce(lang) {console.log(`${this.name} codes in ${lang}`);
}
const user = { name: "Charlie" };
introduce.call(user, "JavaScript"); // "Charlie codes in JavaScript"
introduce.apply(user, ["Python"]);   // 参数以数组传递

2. bind 方法

const boundFunc = introduce.bind(user);
boundFunc("Java"); // "Charlie codes in Java"

优先级规则
显式绑定 > 隐式绑定（对象方法） > 默认绑定

六、箭头函数的 `this`

箭头函数没有自身的 this，继承外层词法作用域的 this：

const obj = {value: 42,getValue: () => {console.log(this.value); // 指向全局对象}
};
obj.getValue(); // undefined (浏览器中 window.value 未定义)

适用场景

function Timer() {this.seconds = 0;setInterval(() => {this.seconds++; // 正确指向 Timer 实例}, 1000);
}

底层机制
箭头函数的 [[ThisMode]] 为 lexical，不创建自身的 this 绑定。

七、事件处理器中的 `this`

DOM 事件处理函数中，this 指向触发事件的元素：

<button onclick="console.log(this)">Click</button> 
<!-- 输出 <button> 元素 -->

例外情况（箭头函数）

button.addEventListener("click", () => {console.log(this); // 指向外层 this（通常为 window）
});

八、严格模式的影响总结

场景	非严格模式	严格模式
独立函数调用	全局对象	`undefined`
未绑定方法的调用	全局对象	`undefined`
构造函数未使用 new	意外修改全局对象	抛出错误

九、底层原理深度解析

1. 执行上下文与 `this` 绑定

每次函数调用时，会创建执行上下文（ExecutionContext），其中包含：

LexicalEnvironment：用于变量/函数声明
VariableEnvironment：用于 var 变量
ThisBinding：确定当前 this 值

2. [[ThisMode]] 内部属性

函数对象拥有内部属性 [[ThisMode]]：

lexical：箭头函数，继承外层 this
strict：严格模式函数，this 不转为对象
global：非严格模式函数，this 可能为全局对象

3. 绑定优先级

new 绑定：new Foo()
显式绑定：call/apply/bind
隐式绑定：obj.method()
默认绑定：独立函数调用

十、特殊场景与陷阱

1. 回调函数中的 `this`

const loader = {load: function() {fetchData(function() {console.log(this); // 指向全局或 undefined});}
};
// 解决方案：使用箭头函数或 bind

2. 原型链上的 `this`

function Animal(name) {this.name = name;
}
Animal.prototype.speak = function() {console.log(this.name);
};
const cat = new Animal("Whiskers");
cat.speak(); // "Whiskers"

3. 类（Class）中的 `this`

类方法默认启用严格模式：

class User {constructor(name) {this.name = name;}sayHi() {console.log(this.name);}
}
const user = new User("Dave");
const say = user.sayHi;
say(); // TypeError: Cannot read property 'name' of undefined