JS: 根據父級屬性建構物件的方法

Question

我正在嘗試建立一個包含所有URL的JS物件。

我想透過data()部分來實現這一目標：

export default defineComponent({
  name: 'MyPage',
  data() {
    backendUrls: {...}
  }
})

以更簡單的方式來看，它會像這樣：

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

我可以使用this關鍵字，因為它指向與給定屬性所在的物件相同的物件。

但是我想再分割一下，並在物件中建立物件：

backendUrls: {
  baseUrl: "http://localhost:8080",
  generalUrls: {
    baseUrlWithPrefix: ...
  },
  socketUrls: {
    messageUrls: {
      userAdd: ...
    }
  }
}

在這裡，如果我嘗試generalUrls: { baseUrlWithPrefix: function() { return this.baseUrl "/ver1"; }}，它不會起作用，因為它找不到 baseUrl，因為this關鍵字指向generalUrls對象，而不是backendUrls對象，baseUrl存在於後者。

我需要像這樣的東西：

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

Answer 1

只需按照以下方式更改呼叫函數的方式

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

const example = backendUrls.generalUrls.baseUrlWithPrefix.bind(backendUrls);

example();