this 是 JavaScript 中最容易让人困惑的关键字之一。它的值不是在定义时确定的，而是在函数被调用时根据调用方式动态绑定的（箭头函数除外）。正因为这种“运行时决策”的特性，许多看似正常的代码在实际执行时，this 指向完全出乎意料。本节汇总了实际开发中最常见的 this 陷阱，并给出明确的修复方案。
32.3.1 普通函数调用中的 this 丢失
当一个函数被当作“普通函数”调用，而不是作为对象的方法调用时，函数内部的 this 在非严格模式下指向全局对象（浏览器中是 window，Node.js 中是 global），在严格模式下则是 undefined。
典型错误：把对象方法赋值给变量再调用
const obj = {
name: 'Alice',
greet() {
console.log(this.name);
}
};
const fn = obj.greet;
fn(); // 非严格模式：undefined（window.name 通常为空或 undefined）
// 严格模式：TypeError: Cannot read property 'name' of undefined原因：fn 只是一个函数引用，调用时没有任何对象前缀，等同于普通函数调用，this 绑定丢失。
修复：使用 bind 显式绑定 this，或者使用箭头函数捕获外层 this。
const boundFn = obj.greet.bind(obj);
boundFn(); // 'Alice'32.3.2 回调函数中的 this 漂移
许多内置方法（如 forEach、map、setTimeout）接收一个回调函数，如果直接传入一个普通函数，其 this 极易丢失。
class Timer {
constructor() {
this.seconds = 0;
}
start() {
setInterval(function() {
this.seconds++; // 此处的 this 不是 Timer 实例
}, 1000);
}
}原因：setInterval 的回调被当作普通函数调用，this 指向全局或 undefined。
修复方案：
- 使用箭头函数（自动捕获外层
this）：
setInterval(() => {
this.seconds++;
}, 1000);
- 使用
bind显式绑定：
setInterval(function() {
this.seconds++;
}.bind(this), 1000);
- 使用局部变量保存
this（经典var that = this技巧）。
32.3.3 事件监听器中的 this 冲突
DOM 事件处理函数中，this 默认指向触发事件的元素。这在面向对象的代码中会导致无法访问实例属性。
class Button {
constructor() {
this.clickCount = 0;
const btn = document.getElementById('myBtn');
btn.addEventListener('click', function() {
this.clickCount++; // this 指向 btn 元素，而非 Button 实例
});
}
}原因：addEventListener 会将事件处理函数的 this 绑定到当前元素。
修复：用箭头函数，或者 bind(this)。
btn.addEventListener('click', () => {
this.clickCount++; // 正确，箭头函数捕获 Button 实例的 this
});32.3.4 对象方法使用箭头函数的陷阱
箭头函数不绑定自己的 this，而是从定义时的外层作用域继承。这一特性在多数需要保持 this 的场景中很实用，但如果把箭头函数直接作为对象方法，它反而不会指向该对象。
const obj = {
name: 'Bob',
greet: () => {
console.log(this.name);
}
};
obj.greet(); // undefined（this 指向外层作用域，可能是全局或模块环境）原因：箭头函数在定义时 this 就已经被锁死，指向它外层的 this，而非调用时的对象。
修复：对象方法应使用普通函数（或方法简写）。
const obj = {
name: 'Bob',
greet() {
console.log(this.name);
}
};32.3.5 构造函数中返回非 this 对象
使用 new 调用构造函数时，默认会返回新创建的实例（即 this）。但如果构造函数显式 return 一个对象，则 new 表达式的结果会变成那个返回的对象，原本的 this 被丢弃。
function Person(name) {
this.name = name;
return { name: 'Override' }; // 显式返回一个对象
}
const p = new Person('Alice');
console.log(p.name); // 'Override'，不是 'Alice'如果返回的是基本类型（如数字、字符串），则 return 语句被忽略，仍返回 this。
影响：在构造函数中误用 return 可能导致实例化结果异常。
避免：构造函数中不要使用 return；若必须使用，确保返回的是 this 或根本不返回。
32.3.6 显式绑定优先级误判
call、apply、bind 具有很高的优先级，但有两处容易踩坑：
- 绑定后的函数仍可被
new覆盖：bind生成的硬绑定函数如果被new，则new的优先级更高，this依然指向新创建的实例。 - 多次绑定以第一次为准：对一个函数进行多次
bind，生效的是第一次绑定的this。
function fn() { console.log(this.x); }
const bound = fn.bind({ x: 1 });
bound(); // 1
const rebound = bound.bind({ x: 2 });
rebound(); // 1，不是 2记忆原则：new > 显式绑定 > 隐式绑定 > 默认绑定。
32.3.7 嵌套函数或闭包中的 this 断裂
在方法内部定义嵌套的普通函数时，内层函数的 this 与外层不同。
const obj = {
name: 'Charlie',
outer() {
function inner() {
console.log(this.name);
}
inner(); // this 丢失，指向全局或 undefined
}
};修复：箭头函数或 var self = this。
32.3.8 立即执行函数（IIFE）中的 this
IIFE 本质是普通函数调用，内部 this 指向全局（非严格模式）或 undefined（严格模式），即便它被定义在某个方法内部。
const obj = {
name: 'Dana',
method() {
(function() {
console.log(this.name); // undefined
})();
}
};解决方案同嵌套函数，使用箭头函数或保存 this。
32.3.9 原型方法在赋值后丢失 this
将原型上的方法赋值给变量后单独调用，this 不再指向实例。
function Animal(name) { this.name = name; }
Animal.prototype.say = function() { console.log(this.name); };
const cat = new Animal('Kitty');
const fn = cat.say;
fn(); // undefined修复：调用时确保以对象方法形式调用，或使用 bind。
32.3.10 箭头函数在动态上下文中滥用
箭头函数的 this 固定不变，适合需要保持定义时上下文的地方；但在需要动态 this（如事件处理器需要访问当前元素）时，用了箭头函数反而出错。
// 需要 this 指向触发元素，却用了箭头函数
btn.addEventListener('click', (e) => {
console.log(this); // 不再指向 btn，而是外层 this
});准则：当需要回调函数的 this 与被调用对象一致时，用普通函数；需要保留外层 this 时，用箭头函数。
总结：避免 this 异常的三个核心习惯
- 优先使用箭头函数：在回调、定时器、嵌套函数中，箭头函数能安全捕获外层
this，避免大量混乱。 - 显式绑定保底：对需要脱离对象调用的函数，使用
bind提前锁定this。 - 严格模式开启：严格模式让意外指向全局的情况报错（
this为undefined），能更快暴露问题。
掌握这几点，并结合前面第5章解释的 this 绑定规则，你就能洞悉所有异常表象背后的统一逻辑，从“猜 this”变成“定 this”。