記一次失敗的StackOverflow回答

dou_fu_gan發表於2023-02-11

有一位同學在StackOverflow上提問，他想建立一個 Future 類，非同步的實現 Future 的構造，當構造完成之後自動呼叫 .then 方法，執行後面的邏輯

class Features {
  features = null
  constructor(){
    fetchFeatures()
  }
  async fetchFeatures() {
    this.features = await fetch('https://api.github.com/'))
  }
}

const featuresInstance = new Features();
featuresInstance.then((res) => console.log(featuresInstance.features));

我第一眼想到的是繼承 Promise 但是繼承 Promise 是行不通的，具體請看 這裡
簡單來說就是 Promise 的執行需要執行時提供魔法，不能簡單的透過 super 建構函式傳參來執行，另外即便可以傳參，也無法使用this，起不到題主要求的封裝的效果

首先說明題主的需求是一個偽需求，非同步載入資源可以透過Promise來實現，沒必要封裝到建構函式里

下面給出題主要求的偽需求的實現方式

class Features {
  features = null
  #prom = null
  constructor(){
    return Object.assign(this,this.#prom = new Promise(this.fetchFeatures.bind(this)))
  }
  then(callback) {
    return this.#prom.then(callback)
  }
  async fetchFeatures(resolve) {
    resolve(this.features = await fetch('https://api.github.com/'))
  }
}

const featuresInstance = new Features();
featuresInstance.then((res) => console.log(featuresInstance));

執行結果為
image
可以說是非常完美的實現了需求，但是為什麼說是一次失敗的嘗試呢？

因為題主把問題刪了！！???

image

可能是因為被人點了踩，或者是自己意識到這是反模式吧，總之我在解決這個問題的過程中獲得了成長（this指向，bind函式細節，super用法，複習非同步程式碼，混入mixin，私有欄位）

（注意mixin是向prototype中assign目標物件，我這裡並不是正規mixin）

今天就到這裡吧，撒由那拉~~

相關文章