【JS】将class转为构造函数需要注意的细节

前言

将 class 转为构造函数看似很简单，但作为封装者，有很多注意事项

class Person {
  constructor(name) {
    this.name = name;
  }
  fn() { console.log(this.name); }
}

实现

初步转化如下：

function Person() {
  this.name = name
}
Person.prototype.fn = function () { console.log(this.name); }

ES6使用类处于严格模式下

'use strict'

function Person() {
  this.name = name
}
Person.prototype.fn = function () { console.log(this.name); }

类只能通过 new 调用，但是构造函数没有该限制

在这里插入图片描述

通过 this 指向判断是否使用 new

'use strict'

function Person() {
  // 验证 this 指向
  if (!(this instanceof Person)) {
    throw new Error('请使用 new 关键字调用')
  }
  this.name = name
}
Person.prototype.fn = function () { console.log(this.name); }

类的 方法成员 是不可枚举的

在这里插入图片描述

但构造函数没有限制

在这里插入图片描述

通过 Object.defineProperty 限制不可枚举

'use strict'

function Person() {
  // 验证 this 指向
  if (!(this instanceof Person)) {
    throw new Error('请使用 new 关键字调用')
  }
  this.name = name
}

Object.defineProperty(Person.prototype, 'fn', {
  value: function () { console.log(this.name); },
  enumerable: false, // 方法成员不可枚举
})

const p = new Person('田本初')
for (const key in p) {
  console.log(key);
}

JS中所有的函数都可以使用new调用，但是类的方法成员不行

在这里插入图片描述

同样根据this指向判断

'use strict'
function Person() {
  // 验证 this 指向
  if (!(this instanceof Person)) {
    throw new Error('请使用 new 关键字调用')
  }
  this.name = name
}
Object.defineProperty(Person.prototype, 'fn', {
  value: function () { 
    if (!(this instanceof Person)) {
    throw new Error('不能使用 new 关键字调用')
  }console.log(this.name); },
  enumerable: false,
})