JavaScript：在子对象属性中访问父对象属性的方法

你遇到的这个问题很常见——在对象字面量还没完成初始化的时候，直接引用外部变量endpoints是行不通的，因为此时endpoints还没被赋值完成，访问endpoints.User.endpoint要么得到undefined，要么直接抛出错误。下面给你几个实用的解决方案：

方案1：提前提取父级endpoint变量 #

把User的endpoint单独抽出来定义，后续不管是父对象还是子对象都直接引用这个变量：

const userBaseEndpoint = '/api/v1/users/%s';
var endpoints = {
  User: {
    endpoint: userBaseEndpoint,
    subResources: {
      profile: {
        endpoint: userBaseEndpoint + '/profile'
      }
    }
  }
}

方案2：用getter函数动态获取父级属性 #

利用JavaScript的getter特性，让profile.endpoint在被访问时才计算值，这时候整个对象已经初始化完成了：

var endpoints = {
  User: {
    endpoint: '/api/v1/users/%s',
    subResources: {
      get endpoint() {
        return endpoints.User.endpoint + '/profile';
      }
    }
  }
}
// 访问方式：endpoints.User.subResources.endpoint

如果担心重复计算的性能问题，可以在getter里加个缓存逻辑，不过这种简单场景下一般没必要。

方案3：分步构建对象 #

先创建基础的User对象，等它初始化完成后，再给它添加subResources属性，这样就能直接引用已存在的User.endpoint了：

var endpoints = {
  User: {
    endpoint: '/api/v1/users/%s'
  }
};

endpoints.User.subResources = {
  profile: {
    endpoint: endpoints.User.endpoint + '/profile'
  }
};

这种方式逻辑直白，适合结构比较复杂的嵌套对象场景。

这几种方法都能完美解决你在子资源中引用父级endpoint的需求，根据你的实际代码复杂度选一个就行~

内容的提问来源于stack exchange，提问作者vivekfyi