快捷導(dǎo)航

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

更新時(shí)間：2019年05月10日 10:24:24 作者：jump__jump

這篇文章主要介紹了利用es6 new.target來對模擬抽象類的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

起源

最近在使用 Symbol 來做為唯一值，發(fā)現(xiàn) Symbol 無法進(jìn)行 new 操作，只能當(dāng)作函數(shù)使用，只要進(jìn)行了new 就會(huì)發(fā)生類型錯(cuò)誤

new Symbol()

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

在不考慮底層實(shí)現(xiàn)的情況下，在代碼層面是否能夠?qū)崿F(xiàn)一個(gè)函數(shù)只可以進(jìn)行調(diào)用而不可以進(jìn)行 new 操作呢？思考之后如下寫出：

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

// 測試結(jié)果如下
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, 代碼運(yùn)行結(jié)果不變,因?yàn)閷τ趥€(gè)人而言沒有適用場景。于是就沒有繼續(xù)研究下去，可是最近在從新翻閱 es6 時(shí)候發(fā)現(xiàn) new.target這個(gè)屬性。

new.target 屬性

介紹(引用 mdn 文檔)

new.target屬性允許你檢測函數(shù)或構(gòu)造方法是否是通過new運(yùn)算符被調(diào)用的。

在通過new運(yùn)算符被初始化的函數(shù)或構(gòu)造方法中，new.target返回一個(gè)指向構(gòu)造方法或函數(shù)的引用。在普通的函數(shù)調(diào)用中，new.target 的值是undefined。

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

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

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

深入

難道 es6 特地添加的功能僅僅只能用于檢查一下我們的函數(shù)調(diào)用方式嗎？

在查閱的過程各種發(fā)現(xiàn)了大多數(shù)都方案都是用 new.target 寫出只能被繼承的類。類似于實(shí)現(xiàn)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抽象類抽象方法需要重寫，這個(gè)是沒有方案的。于是在測試與使用的過程中，卻意外發(fā)現(xiàn)了超類可以在構(gòu)造期間訪問派生類的原型，利用起來。

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

之前運(yùn)行時(shí)調(diào)用需要重寫的方法報(bào)錯(cuò)是這樣寫的。

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

然而此時(shí)利用 new.target ，我就可以利用構(gòu)造期間對子類進(jìn)行操作報(bào)錯(cuò)。

class Animal {
 constructor(name, age) {
  // 如果 target 不是 基類 且 沒有 getName 報(bào)錯(cuò)
  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

此時(shí)可以把運(yùn)行方法時(shí)候發(fā)生的錯(cuò)誤提前到構(gòu)造時(shí)期，雖然都是在運(yùn)行期，但是該錯(cuò)誤觸發(fā)機(jī)制要早危害要大。反而對代碼是一種保護(hù)。

當(dāng)然了，利用超類可以在構(gòu)造期間訪問派生類的原型作用遠(yuǎn)遠(yuǎn)不是那么簡單，必然是很強(qiáng)大的，可以結(jié)合業(yè)務(wù)場景談一談理解和作用。

其他方案