利用 es6 new.target 来对模拟抽象类

k00baa 发布于2019-08-26 18:27 / 3390人阅读

摘要：类似于实现的抽象类。其他代码公公但是抽象类抽象方法需要重写，这个是没有方案的。于是在测试与使用的过程中，却意外发现了超类可以在构造期间访问派生类的原型，利用起来。

起源

最近在使用 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
修饰器

服务器托管私有云抽象类接口抽象类 javac抽象类 python 抽象类

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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