java部落起源_利用 es6 new.target 来对模拟抽象类

起源

最近，我们发现symbol是唯一的值，但symbol不能进行new操作，只能作为函数使用，运行new时会发生类型错误

new Symbol()

// error

Uncaught TypeError: Symbol is not a constructor

at new Symbol ()

at :1:1

如果不考虑底层实现，是否有可能在代码级别实现一个只能调用但不能调用的函数？思考后，写出如下代码:

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，代码的执行结果不变。 这是因为个人没有适用的场景。 因此，虽然没有继续研究，但最近，重读es 6发现了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

修饰器

原文链接：

原创文章，作者：犀牛前端部落，如若转载，请注明出处：https://www.pipipi.net/1025.html