new运算符的实现机制
先来看一个例子，分别用新旧方式创建类，并实例化。
// 传统实现
function Foo(name) {
this.name = name
}
// 静态属性
Foo.prototype.fn = 'Foo';
// 成员方法
Foo.prototype.sayName = function() {
console.log(this.name);
}
// 现代实现
class Bar {
constructor(name) {
// 静态属性
Bar.prototype.fn = 'Bar';
this.name = name;
}
sayName() {
console.log(this.name);
}
}
分别创建两个类的实例
const foo = new Foo('isaac');
const bar = new Bar('isaac');
image.png
首先，可以看输出结果。很明显两个实例的结构上是基本一致的，类比一下，你可以猜到新语法“class”的实现本质，当然class也确实是传统实现的语法糖。
所以，接下来直接使用Foo的定义方式作为例子讲。
再来看看定义一个类的时候我们做了什么：
定义了一个构造函数，将需要属性赋值给了上下文（context，即上文的this）
定义了构造函数的属性prototype，将方法、属性挂载在这个prototype上。
最后再对比下实例的结构：
你可以发现，传入Foo的实参被初始化到了对象的第一层属性上：
image.png
说不准这就是构造函数做的事情：通过构造函数将传参，经过逻辑处理，然后初始化到实例上。
在看输出结果，在name属性的下面还有一个__proto__属性，他是一个类对象的结构，你可以发现有两个成员是我们自己定义的：
- fn
- sayName
这两个属性都是我们在定义类的时候挂载到prototype上的。
说不准这就是我们定义在Foo.prototype属性
最后，我们根据上面两个猜想，再进行推断new做了什么事情：
new通过构造函数创建了一个对象foo，并且通过构造函数的逻辑初始化了这个对象的基本成员；
new将foo的原型引用指向了Foo.prototype，从而连接好从foo -> Foo.prototype -> Object.prototype这条原型链。
上面即是猜想也是实质，我不去证明，这不是我的主要想写的，我是想根据这个猜测去实现一个方法达到“new”的功能。
小结一下
javascript的类的实现分成两部分：
Constructor（构造函数）
Proptotype（原型）
实例化一个类的实例的本质是：
创建一个对象，且在访问该对象成员时，可以向它类指向原型回溯；
对象的成员属性（包含方法）通过Constructor进行初始化；
实现一个“new”创建实例
分析
根据上面对new操作符的分析，我们可以这么做：
- 创建一个对象；
- 将这个对象的原型引用（不是这个对象的原型，是一个内部属性
__proto__指向）；- 调用构造函数，将上下文（this）绑定到对象。
具体实现
1、使用setPrototypeOf实现原型指向
setPrototypeOf是ES6的新方法，具体实现其实就是对对象__proto__的修改
function setPrototypeOf(_ctx, _proto) {
_ctx.__proto__ = _proto;
}
复制代码
/**
* 创建实例
* @param { Constructor } ctor 构造
*/
function newIns(ctor) {
const ins = {};
Object.setPrototypeOf(ins, ctor.prototype);
ctor.apply(ins, Array.prototype.slice.call(arguments, 1));
return ins;
}
const ins = newInsOf(Foo, 'isaac')
console.log(ins);
复制代码
image.png
2、通过Object.create“继承”类
Object.create是官方对原型式继承的内部实现，具体逻辑如下：
function objectCreate(prototype) {
function F() {}
F.prototype = prototype;
return new F();
}
//创建一个新对象，将参数赋值给新对象的原型
Object.create不但创建了一个对象，并且设置了这个对象的__proto__指向。
function newInsOf(
const ins = Object.create(ctor.prototype);
ctor.apply(ins, Array.prototype.slice.call(arguments, 1));
return ins;
}
复制代码
image.png
