JavaScript嵌套对象this绑定错误求助：无法访问外层对象属性

你遇到的是JavaScript中this绑定的基本规则问题：函数的this指向由调用它的上下文决定。当执行car.get.getModel()时，getModel是作为car.get这个对象的方法被调用的，所以此时this指向的是car.get，而非外层的car对象——car.get中没有model属性，因此输出undefined。

除了bind，还有几种更贴合对象结构设计的方案：

1. 直接引用外层对象（简单直观） #

在getModel里直接使用变量名car访问model，避免依赖this的绑定逻辑：

const car = {
  model: "Volvo",
  get: {
    getModel() {
      console.log("The car is: " + car.model);
    }
  }
}

car.get.getModel() // The car is: Volvo

这种方式适合对象不会被重新赋值的场景，代码简洁易懂。

2. 使用箭头函数（利用词法作用域） #

箭头函数没有独立的this，它的this继承自定义时的外层作用域，可直接访问外层的car变量：

const car = {
  model: "Volvo",
  get: {
    getModel: () => {
      console.log("The car is: " + car.model);
    }
  }
}

car.get.getModel() // The car is: Volvo

注意：如果后续car变量被重新赋值，这种方式会指向新的变量值，需根据场景选择。

3. 重构对象结构（推荐的设计方式） #

如果get对象是用来封装获取类方法的，更合理的设计是扁平化方法结构，或者使用ES6的getter语法：

// 方案3.1：扁平化方法结构
const car = {
  model: "Volvo",
  getModel() {
    console.log("The car is: " + this.model);
  }
}

car.getModel() // The car is: Volvo

// 方案3.2：使用ES6 getter
const car = {
  model: "Volvo",
  get modelInfo() {
    return `The car is: ${this.model}`;
  }
}

console.log(car.modelInfo) // The car is: Volvo

这种结构符合JavaScript对象的常规设计，避免多层嵌套导致的this绑定混乱，也更易于维护。

4. 使用闭包锁定上下文 #

如果必须保留嵌套结构，可以通过闭包在初始化时捕获car的上下文：

const car = (() => {
  const self = {
    model: "Volvo"
  };
  self.get = {
    getModel() {
      console.log("The car is: " + self.model);
    }
  };
  return self;
})();

car.get.getModel() // The car is: Volvo

这种方式通过IIFE创建闭包，用self变量锁定外层对象的引用，不受后续调用方式的影响。

内容的提问来源于stack exchange，提问作者Mark Winther Hansen