前端开发学习笔记(九) : JavaScript的this
JavaScript的this
JavaScript 中 this 的全面解析
this 是 JavaScript 中最容易让人困惑的关键字之一，它的值在 运行时动态绑定，取决于函数的调用方式。以下从基础到进阶，全面解析 this 的行为规则。
一、this 的基本规则
this 的指向由 函数被调用的方式 决定，而非函数定义的位置。以下是 this 的 5 种常见绑定规则：
1. 默认绑定（独立函数调用）
当函数被直接调用（非方法、非构造函数、非显式绑定），this 指向 全局对象（浏览器中是 window，Node.js 中是 global）。严格模式下为 undefined。
function showThis() {
console.log(this);
}
showThis(); // 浏览器中输出 window；严格模式下输出 undefined
2. 隐式绑定（方法调用）
当函数作为对象的方法调用时，this 指向 调用该方法的对象。
const obj = {
name: "Alice",
greet: function () {
console.log(this.name); // this 指向 obj
},
};
obj.greet(); // "Alice"
3. 隐式丢失问题
若将对象的方法赋值给变量后调用，this 会丢失原对象的绑定，退回到默认绑定。
const greet = obj.greet;
greet(); // 浏览器中输出 undefined（严格模式）或空（非严格模式）
4. 显式绑定（call/apply/bind）
通过 call、apply 或 bind 强制指定 this 的指向。
function greet() {
console.log(this.name);
}
const person = { name: "Bob" };
greet.call(person); // "Bob"（立即调用）
greet.apply(person); // "Bob"（同上，参数格式不同）
const boundGreet = greet.bind(person); // 返回绑定后的函数
boundGreet(); // "Bob"
5. new 绑定（构造函数）
使用 new 调用构造函数时，this 指向 新创建的实例对象。
function Person(name) {
this.name = name;
}
const alice = new Person("Alice");
console.log(alice.name); // "Alice"
二、特殊场景下的 this
1. 箭头函数中的 this
箭头函数没有自己的 this，它会 捕获外层作用域的 this，且不可被 call/apply/bind 修改。
const obj = {
name: "Charlie",
greet: function () {
setTimeout(() => {
console.log(this.name); // 捕获外层 greet 的 this（指向 obj）
}, 100);
},
};
obj.greet(); // "Charlie"
2. DOM 事件处理函数中的 this
在 DOM 事件处理函数中，this 指向 触发事件的元素。
<button onclick="console.log(this)">点击</button>
<!-- 输出 <button> -->
3. 回调函数中的 this
回调函数中的 this 通常指向全局对象（默认绑定），除非显式绑定。
const obj = {
data: "Hello",
handleClick: function () {
setTimeout(function () {
console.log(this.data); // 默认绑定，输出 undefined
}, 100);
},
};
// 修复方法1：使用箭头函数
setTimeout(() => console.log(this.data), 100); // 捕获外层 this
// 修复方法2：显式绑定
setTimeout(
function () {
console.log(this.data);
}.bind(this),
100
);
三、this 的优先级规则
当多个规则同时存在时，优先级从高到低依次为：
new绑定：new Foo()- 显式绑定：
call/apply/bind - 隐式绑定：
obj.foo() - 默认绑定：直接调用
foo()
四、常见问题与解决方案
1. 如何避免隐式丢失？
- 使用
bind预先绑定this。 - 使用箭头函数保留外层
this。
2. 类方法中的 this 问题
在类（Class）中，若将方法作为回调传递，需绑定 this。
class Counter {
constructor() {
this.count = 0;
// 使用 bind 确保 this 指向实例
this.increment = this.increment.bind(this);
}
increment() {
this.count++;
}
}
const counter = new Counter();
button.addEventListener("click", counter.increment); // 正确绑定 this
3. 模块中的 this
在 ES6 模块中，顶层的 this 是 undefined（严格模式默认启用）。
五、总结
- 普通函数：
this由调用方式决定。 - 箭头函数：
this由定义时的外层作用域决定。 - 显式绑定：
call/apply/bind可强制指定this。 - 构造函数：
this指向新创建的实例。 - 事件处理：
this指向触发事件的 DOM 元素。
理解 this 的核心在于 分析函数是如何被调用的，而非它被定义的位置。通过实践和调试，可以更直观地掌握其行为。
最后修改于 2025-03-23