如何在嵌套对象中访问修改外层对象属性

解决嵌套对象中的 this 指向问题：从根源到实践

在 JavaScript 面向对象编程中，你是否遇到过这样的场景：一个内嵌在实例中的对象，其方法明明用于操作外层实例的属性，却始终无法生效？

别急着怀疑代码逻辑，这通常是 this 指向问题所致。例如，你创建了一个 part 构造函数，内部嵌套了一个 exampleObj，后者拥有方法 action，目标是递增 part 实例的 x 属性。但当直接调用 exampleObj.action() 时，this 却指向了 exampleObj 自身——它并不具备 x 属性。结果要么静默失败，要么报错。

问题的根源在于 JavaScript 的基本规则：函数的 this 指向由调用方式决定，而非定义位置。当以 exampleObj.action() 方式调用时，this 自然指向 exampleObj；但我们希望它指向 part 实例（例如 p）。解决方案很直接——显式地指定函数执行时的 this 对象。

最推荐的做法是使用 call() 在调用时动态绑定 this：

var doThing = function() {    
    this.x++; // 这里的 this 会指向 part 实例
};  

var exampleObj = {    
    action: doThing
};  

function part(x, y, obj) {    
    this.x = x;    
    this.y = y;    
    this.exampleObj = obj;    
    this.function = function() {        
        this.exampleObj.action.call(this); // 关键：把当前 part 实例作为 this 传进去    
    };  
}  

const p = new part(1, 2, exampleObj);  
p.function();  
console.log(p.x, p.y); // 输出：2 2   

以下几点值得注意：

• 切勿直接调用 this.exampleObj.action()——这会导致 this 指向 exampleObj，方案失效。
• 若希望 action 方法在执行时锁定某个 this，可在构造函数中使用 bind() 提前绑定：this.exampleObj.action = doThing.bind(this)。但注意，这会为每个实例创建新函数，实例数量多时可能影响性能。
• 箭头函数无法解决此问题——因为它不绑定 this。此处需要动态绑定运行时的实例，箭头函数的固定上下文不适用。
• 如果 exampleObj 被多个 part 实例共享（如配置项或工具集），绝不要在构造时用 bind() 将其绑定到某个实例。否则其他实例调用时，this 仍指向最初绑定的实例，导致数据串乱，引发状态污染。

总结：当内层对象的方法需要修改外层实例的状态时，不要依赖隐式的 this 绑定。应通过 call(this)、apply(this, [...]) 或 bind(this) 主动控制执行上下文。这正是 JavaScript this 机制的核心实践，也是确保嵌套对象与外部状态保持清晰归属关系的关键。