JavaScript中函数作为对象属性时的this指向漂移问题-js教程-PHP中文网

this丢失是因为函数调用方式决定其绑定，而非定义位置；修复推荐顺序为：箭头函数、bind、包装函数、类字段语法。

javascript中函数作为对象属性时的this指向漂移问题

当函数作为对象属性被赋值后单独调用（比如传给定时器、事件监听器或回调），this 会丢失原本指向该对象的绑定，转而指向全局对象（非严格模式）或 undefined（严格模式）。这不是“this 漂移”，而是函数调用方式决定的 this 绑定规则生效 —— 核心在于“谁调用它”。

为什么 this 会变？看调用位置

JavaScript 中 this 的值取决于函数**如何被调用**，而非如何被定义。即使函数写在对象内部，只要不是通过 obj.method() 形式调用，this 就不会自动绑定到该对象。

obj.fn() → this 是 obj
const f = obj.fn; f(); → this 是全局对象或 undefined
setTimeout(obj.fn, 100); → 等同于上一条，this 已丢失
button.addEventListener('click', obj.handleClick); → 点击时由 DOM 元素触发，this 是 button，不是 obj

常见修复方式（按推荐顺序）

目标是让函数执行时 this 仍指向预期对象，而不是依赖调用上下文。

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

箭头函数（推荐用于类/对象方法内）：不绑定自己的 this，继承外层词法作用域的 this。
例如：handleClick = () => { console.log(this.name); }（注意：这是类字段语法，需确保环境支持）
bind 显式绑定：在赋值时就锁定 this。
例如：setTimeout(obj.fn.bind(obj), 100); 或 button.addEventListener('click', obj.handleClick.bind(obj));
包装函数（匿名函数或内联箭头）：用新函数包裹原调用，手动指定上下文。
例如：setTimeout(() => obj.fn(), 100); 或 button.addEventListener('click', () => obj.handleClick());
class 中使用 public class fields（现代写法）：结合箭头函数语法，避免每次绑定。
例如：class MyComponent { name = 'test'; handleClick = () => console.log(this.name); }

避免陷阱：call/apply/bind 不等于“修复调用”

fn.call(obj) 或 fn.bind(obj)() 确实能临时或永久绑定 this，但关键要分清：如果函数本身已经是一个绑定后的结果（比如 obj.method.bind(obj)），再套一层 call 并不必要，还可能掩盖设计问题。优先从调用源头控制，而不是层层补救。