如何基于父对象属性构建嵌套JavaScript URL对象？

针对你遇到的嵌套对象里的方法无法访问父对象属性的问题，有几种实用的解决方式：

方式一：提前用变量保存父对象引用 #

在data函数里先定义父对象的核心属性或整个父对象，子方法直接引用这个变量，绕开this指向问题：

data() {
  // 先存下baseUrl或者整个backendUrls
  const baseUrl = "http://localhost:8080";
  const backendUrls = {
    baseUrl,
    generalUrls: {
      baseUrlWithPrefix: function() {
        return baseUrl + "/ver1";
      }
    },
    socketUrls: {
      messageUrls: {
        userAdd: function() {
          return backendUrls.generalUrls.baseUrlWithPrefix() + "/user/add";
        }
      }
    }
  };

  return {
    backendUrls
  };
}

如果baseUrl是动态变化的响应式数据，这种方式要注意——变量存的是初始值，后续baseUrl更新后，方法返回的还是旧值，所以更适合固定不变的URL。

方式二：用箭头函数继承外层this #

箭头函数的this会继承定义时的外层作用域，这里外层是Vue组件的实例，所以可以直接通过this.backendUrls访问父对象：

data() {
  return {
    backendUrls: {
      baseUrl: "http://localhost:8080",
      generalUrls: {
        baseUrlWithPrefix: () => this.backendUrls.baseUrl + "/ver1"
      },
      socketUrls: {
        messageUrls: {
          userAdd: () => this.backendUrls.generalUrls.baseUrlWithPrefix() + "/user/add"
        }
      }
    }
  };
}

这种方式适合URL需要动态变化的场景，因为this.backendUrls是响应式的，baseUrl更新后方法会自动拿到最新值。

方式三：手动绑定this到父对象 #

如果偏好使用普通函数，可以在创建对象后，用bind方法把函数的this强制绑定到父对象上：

data() {
  const backendUrls = {
    baseUrl: "http://localhost:8080",
    generalUrls: {
      baseUrlWithPrefix: function() {
        return this.baseUrl + "/ver1";
      }
    },
    socketUrls: {
      messageUrls: {
        userAdd: function() {
          return this.generalUrls.baseUrlWithPrefix() + "/user/add";
        }
      }
    }
  };

  // 把每个子方法的this绑定到backendUrls
  backendUrls.generalUrls.baseUrlWithPrefix = backendUrls.generalUrls.baseUrlWithPrefix.bind(backendUrls);
  backendUrls.socketUrls.messageUrls.userAdd = backendUrls.socketUrls.messageUrls.userAdd.bind(backendUrls);

  return {
    backendUrls
  };
}

这种方式保持了普通函数的写法，同时解决了this指向问题，适合习惯用普通函数的场景。

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