如何正确访问与修改嵌套对象中外层属性值

解决嵌套对象中的 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 机制的核心实践，也是确保嵌套对象与外部状态保持清晰归属关系的关键所在。