【JS 类与函数转换】使用函数实现类一些技术细节

我们都知道类class是构造函数的一种语法糖，可以很方便的给实例添加属性或者方法，避免直接在函数的原型prototype上操作。classs底层原理也是操作原型链，但其中也包含了很多技术细节，下面我们通过普通函数来实现class，来记录一下几个细节点：

构造函数的几个细节点

1. 只能通过关键词new调用，否则抛出错误
2. class默认是开启严格模式下，严格遵守严格模式要求
3. 实例的函数不能被遍历
4. 实例的函数不能作为构造函数，否则抛出错误

class构造函数示例图

普通函数实现class

1. 使用'use strict' 启用严格模式
2. 使用new.target判断是否使用new关键词
3. 使用Object.defineProperty给对象的属性操作符配置不可迭代属性
4. 给实例函数添加new.target判断

代码如下

'use strict';// 严格模式
function Fn(name) {
  // 检查 this 是否是 Fn 的实例
  if(this instanceof Fn){
    this.name = name;
  }
  // 检查是否使用了 new 关键字调用构造函数
  if(!new.target) {
    throw new Error('Class constructor Fn cannot be invoked without new');
  }
}

Fn.prototype.fn = function() {
  // 如果使用 new 关键字，则抛出错误
  if(new.target) {
    throw new Error('f.fn is not a constructor');
  }
  console.log(this.name);
}

// 定义不可枚举的属性
Object.defineProperty(Fn.prototype, 'fn', {
  enumerable: false,
})

普通函数实现class类的实例图