利用 es6 new.target 來對模擬抽象類

k00baa 發布于2019-08-26 18:27 / 3494人閱讀

摘要：類似于實現的抽象類。其他代碼公公但是抽象類抽象方法需要重寫，這個是沒有方案的。于是在測試與使用的過程中，卻意外發現了超類可以在構造期間訪問派生類的原型，利用起來。

起源

最近在使用 Symbol 來做為唯一值，發現 Symbol 無法進行 new 操作，只能當作函數使用，只要進行了new 就會發生類型錯誤

new Symbol()

// error
Uncaught TypeError: Symbol is not a constructor
    at new Symbol ()
    at :1:1

在不考慮底層實現的情況下，在代碼層面是否能夠實現一個函數只可以進行調用而不可以進行 new 操作呢？思考之后如下寫出：

function disConstructor() {
  if (this !== window) {
    throw new TypeError(" disConstructor is not a constructor")
  }
  console.log("gogo go")
}

// 測試結果如下
disConstructor() // gogo go

new disConstructor()

// error
Uncaught TypeError:  disConstructor is not a constructor
    at new disConstructor (:3:15)
    at :1:1

如果使用 nodejs,window 可以切換為 global, 代碼運行結果不變,因為對于個人而言沒有適用場景。于是就沒有繼續研究下去，可是最近在從新翻閱 es6 時候發現 new.target這個屬性。

new.target 屬性 介紹(引用 mdn 文檔)

new.target屬性允許你檢測函數或構造方法是否是通過new運算符被調用的。
在通過new運算符被初始化的函數或構造方法中，new.target返回一個指向構造方法或函數的引用。在普通的函數調用中，new.target 的值是undefined。

這樣的話我們的代碼就可以這樣改為

function disConstructor() {
  // 普通的函數調用中，new.target 的值是undefined。
  if (new.target) {
    throw new TypeError(" disConstructor is not a constructor")
  }
  console.log("gogo go")
}

得到與上述代碼一樣的答案。

深入

難道 es6 特地添加的功能僅僅只能用于檢查一下我們的函數調用方式嗎？
在查閱的過程各種發現了大多數都方案都是用 new.target 寫出只能被繼承的類。類似于實現java的抽象類。

class Animal {
  constructor(name, age) {
    if (new.target === Animal) {
      throw new Error("Animal class can`t instantiate");
    }
    this.name = name
    this.age = age
  }
  // 其他代碼
  ...
}

class Dog extends Animal{
  constructor(name, age, sex) {
    super(name, age)
    this.sex = sex
  }
}

new Animal()
// error
Uncaught Error: Animal class can`t instantiate
    at new Animal (:4:13)
    at :1:1

new Dog("mimi", 12, "公")
// Dog?{name: "mimi", age: 12, sex: "公"}

但是 java抽象類抽象方法需要重寫，這個是沒有方案的。于是在測試與使用的過程中，卻意外發現了超類可以在構造期間訪問派生類的原型，利用起來。

class Animal {
  constructor(name, age) {
    console.log(new.target.prototype)
  }
  // 其他代碼
  ...
}

之前運行時調用需要重寫的方法報錯是這樣寫的。

class Animal {
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  getName () {
    throw new Error("please overwrite getName method")
  }
}

class Dog extends Animal{
  constructor(name, age, sex) {
    super(name, age)
    this.sex = sex
  }
}

const pite = new Dog("pite", 2, "公")
a.getName()
// error
Uncaught Error: please overwrite getName method
    at Dog.getName (:8:11)
    at :1:3

然而此時利用 new.target ，我就可以利用構造期間對子類進行操作報錯。

class Animal {
  constructor(name, age) {
    // 如果 target 不是 基類 且 沒有 getName 報錯
    if (new.target !== Animal && !new.target.prototype.hasOwnProperty("getName")) {
      throw new Error("please overwrite getName method")
    }
    this.name = name
    this.age = age
  }
}

class Dog extends Animal{
  constructor(name, age, sex) {
    super(name, age)
    this.sex = sex
  }
}

const pite = new Dog("pite", 2, "公")
// error
Uncaught Error: please overwrite getName method
    at new Animal (:5:13)
    at new Dog (:14:5)
    at :1:1

此時可以把運行方法時候發生的錯誤提前到構造時期，雖然都是在運行期，但是該錯誤觸發機制要早危害要大。反而對代碼是一種保護。

當然了，利用超類可以在構造期間訪問派生類的原型作用遠遠不是那么簡單，必然是很強大的，可以結合業務場景談一談理解和作用。

其他方案

增加編輯器插件
proxy
修飾器

GPU云服務器云服務器抽象類接口抽象類 javac抽象類 python 抽象類

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110214.html

【ES6】更易于繼承的類語法

摘要：的類使用熟悉的關鍵字指定類繼承的函數，并且可以通過方法訪問父類的構造函數。例如繼承一個的類繼承了，術語上稱為基類，為派生類。例如注意到上例中，不僅是派生類的實例，也是派生類的實例，內建對象繼承的實用之處是改變返回對象的類型。和其它面向對象編程語言一樣，ES6 正式定義了 class 類以及 extend 繼承語法糖，并且支持靜態、派生、抽象、迭代、單例等，而且根據 ES6 的新特性衍...

Lionad-Morotar 2019-08-23 12:44 評論0 收藏0
從ES6重新認識JavaScript設計模式(二): 工廠模式

摘要：簡單工廠模式簡單工廠模式又叫靜態工廠模式，由一個工廠對象決定創建某一種產品對象類的實例。工廠方法模式工廠方法模式的本意是將實際創建對象的工作推遲到子類中，這樣核心類就變成了抽象類。抽象工廠模式一般用在 1 什么是工廠模式? 工廠模式是用來創建對象的一種最常用的設計模式。我們不暴露創建對象的具體邏輯，而是將將邏輯封裝在一個函數中，那么這個函數就可以被視為一個工廠。工廠模式根據抽象程度的不...

Reducto 2019-08-30 14:22 評論0 收藏0
從ES6重新認識JavaScript設計模式(二): 工廠模式

摘要：簡單工廠模式簡單工廠模式又叫靜態工廠模式，由一個工廠對象決定創建某一種產品對象類的實例。工廠方法模式工廠方法模式的本意是將實際創建對象的工作推遲到子類中，這樣核心類就變成了抽象類。抽象工廠模式一般用在 1 什么是工廠模式? 工廠模式是用來創建對象的一種最常用的設計模式。我們不暴露創建對象的具體邏輯，而是將將邏輯封裝在一個函數中，那么這個函數就可以被視為一個工廠。工廠模式根據抽象程度的不...

szysky 2019-08-22 16:02 評論0 收藏0
ES6系列---類

摘要：原型會自動調整，通過調用方法即可訪問基類的構造函數。在簡單情況下，等于類的構造函數的值是輸出這段代碼展示了當調用時等于。大多數面向對象編程語言都支持類和類繼承的特性，而JavaScript只能通過各種特定方式模仿并關聯多個相似的對象。這個情況一直持續到ES5。由于類似的庫層出不窮，最終ES6引入了類特性，統一了類和類繼承的標準。 ES5模仿類先看一段ES5中模仿類的代碼： func...

huayeluoliuhen 2019-08-22 11:09 評論0 收藏0