动态属性名调用obj[methodKey]()中this仍由调用方式决定，正确指向obj；若提取为变量调用则丢失this，需用call/bind或Proxy代理保持绑定。
在 JavaScript 中，动态属性名方法调用（如 obj[methodName]()）本身不会改变 this 的绑定规则——this 仍由**调用时的调用方式**决定，而非定义方式。关键在于：你必须确保调用时的“主语”（即点号左边的对象）是预期的那个对象。
动态访问后直接调用，this 指向调用者对象
只要是从目标对象上取方法再立即调用（即 obj[key]()），this 就正确指向 obj：
const user = {
name: 'Alice',
greet() {
return `Hello, ${this.name}`;
}
};
<p>const methodKey = 'greet';
console.log(user[methodKey]()); // "Hello, Alice" → this 指向 user这是因为 user[methodKey] 返回的是函数引用，但调用时的语法是 user.greet() 的等价形式（隐式绑定），引擎识别出调用者是 user。
避免把方法提取出来单独调用（会丢失 this）
一旦把方法赋给变量再调用，就变成独立函数调用，this 会丢失（严格模式下为 undefined）：
立即学习“Java免费学习笔记（深入）”；
const fn = user[methodKey]; fn(); // TypeError: Cannot read property 'name' of undefined
解决方法有三种：
-
用 call/apply 显式绑定：
fn.call(user) -
用 bind 预绑定：
const boundFn = fn.bind(user); boundFn() -
箭头函数包装（不推荐用于 this 依赖场景）：它不绑定自己的
this，而是继承外层，不适合替代方法调用
使用 Proxy 或自定义 getter 做安全转发（进阶）
若需频繁动态调用且希望自动保持上下文，可封装一层代理：
function createBoundInvoker(obj) {
return new Proxy(obj, {
get(target, prop) {
const value = target[prop];
if (typeof value === 'function') {
return value.bind(target);
}
return value;
}
});
}
<p>const safeUser = createBoundInvoker(user);
console.log(safeUser['greet']()); // ✅ 正常执行，无需担心 this注意：Proxy 会带来轻微性能开销，仅在确实需要“任意属性名都能安全调用”的场景才用。
类中方法需注意：不要在构造时未绑定就解构或传参
尤其在 React 或事件回调中常见错误：
class Counter {
constructor() {
this.count = 0;
}
increment() {
this.count++;
}
}
<p>const c = new Counter();
// ❌ 错误：解构后调用丢失 this
const { increment } = c;
increment(); // NaN</p><p>// ✅ 正确方式：
c['increment'](); // 动态调用，this 正确
c.increment(); // 直接调用
increment.call(c); // 显式绑定如果必须解构，建议在构造函数中绑定：this.increment = this.increment.bind(this)，或用类字段语法（箭头函数）：increment = () => { ... }（此时 this 由定义时外层决定，非调用时）。
