中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發布時間:2020-10-09 10:44:19 來源:腳本之家 閱讀:154 作者:jump__jump 欄目:web開發

起源

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

new Symbol()

// error
Uncaught TypeError: Symbol is not a constructor
  at new Symbol (<anonymous>)
  at <anonymous>: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 (<anonymous>:3:15)
  at <anonymous>: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 (<anonymous>:4:13)
  at <anonymous>: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 (<anonymous>:8:11)
  at <anonymous>: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 (<anonymous>:5:13)
  at new Dog (<anonymous>:14:5)
  at <anonymous>:1:1

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

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

其他方案

  • 增加 編輯器插件
  • proxy
  • 修飾器

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

开远市| 冕宁县| 栖霞市| 建水县| 巫山县| 伊春市| 山阴县| 砚山县| 循化| 合川市| 慈利县| 廊坊市| 呼伦贝尔市| 大姚县| 玛纳斯县| 兴山县| 米脂县| 秦皇岛市| 通州市| 始兴县| 达州市| 盐池县| 鹿泉市| 万全县| 陵水| 海原县| 常德市| 安仁县| 胶南市| 呼玛县| 迁西县| 连平县| 顺昌县| 灵寿县| 南漳县| 蛟河市| 吴堡县| 安徽省| 咸阳市| 临猗县| 东丰县|