New操作符的机制与实现相同功能的方法

发表于 更新于 分类于

大纲

new操作符做了什么？

回到顶部

先来看一个例子，分别用新旧方式创建类，并实例化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 传统实现
function Foo(name) {
  this.name = name
}
// 静态属性
Foo.fn = 'Foo';
// 成员方法
Foo.prototype.sayName = function() {
  console.log(this.name);
}

// 现代实现
class Bar {
  constructor(name) {
    // 静态属性
    Bar.fn = 'Bar';
    this.name = name;
  }

  sayName() {
    console.log(this.name);
  }
}

分别创建两个类的实例

1
2
const foo = new Foo('isaac');
const bar = new Bar('isaac');
New操作符的机制与实现相同功能的方法

首先，可以看输出结果。很明显两个实例的结构上是基本一致的，类比一下，你可以猜到新语法“class”的实现本质，当然class也确实是传统实现的语法糖。

所以，接下来直接使用Foo的定义方式作为例子讲。

再来看看定义一个类的时候我们做了什么：

  • 定义了一个构造函数，将需要属性赋值给了上下文（context，即上文的this）
  • 定义了构造函数的属性prototype，将方法、属性挂载在这个prototype上。

最后再对比下实例的结构：

你可以发现，传入Foo的实参被初始化到了对象的第一层属性上：

New操作符的机制与实现相同功能的方法

说不准这就是构造函数做的事情：通过构造函数将传参，经过逻辑处理，然后初始化到实例上。

在看输出结果，在name属性的下面还有一个__proto__属性，他是一个类对象的结构，你可以发现有两个成员是我们自己定义的：

  1. fn
  2. sayName

这两个属性都是我们在定义类的时候挂载到prototype上的。

说不准这就是我们定义在Foo.prototype属性

最后，我们根据上面两个猜想，再进行推断new做了什么事情：

  • new通过构造函数创建了一个对象foo，并且通过构造函数的逻辑初始化了这个对象的基本成员；
  • new将foo的原型引用指向了Foo.prototype，从而连接好从foo -> Foo.prototype -> Object.prototype这条原型链。

上面即是猜想也是实质，我不去证明，这不是我的主要想写的，我是想根据这个猜测去实现一个方法达到“new”的功能。

小结一下

javascript的类的实现分成两部分：

  • Constructor（构造函数）
  • Proptotype（原型）

实例化一个类的实例的本质是：

  • 创建一个对象，且在访问该对象成员时，可以向它类指向原型回溯；
  • 对象的成员属性（包含方法）通过Constructor进行初始化；

实现一个new创建实例

回到顶部

分析

根据上面对new操作符的分析，我们可以这么做：

  1. 创建一个对象；
  2. 将这个对象的原型引用（不是这个对象的原型，是一个内部属性__proto__指向）；
  3. 调用构造函数，将上下文（this）绑定到对象。

具体实现

  • 使用setPrototypeOf实现原型指向

setPrototypeOf是ES6的新方法，具体实现其实就是对对象__proto__的修改

1
2
3
function setPrototypeOf(_ctx, _proto) {
  _ctx.__proto__ = _proto;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
/**
 * 创建实例
 * @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);
New操作符的机制与实现相同功能的方法
  • 通过Object.create“继承”类

Object.create是官方对原型式继承的内部实现，具体逻辑如下：

1
2
3
4
5
function objectCreate(prototype) {
  function F() {}
  F.prototype = prototype;
  return new F();
}

对于原型式继承可参考: 原型式继承

Object.create不但创建了一个对象，并且设置了这个对象的__proto__指向。

1
2
3
4
5
function newInsOf(
  const ins = Object.create(ctor.prototype);
  ctor.apply(ins, Array.prototype.slice.call(arguments, 1));
  return ins;
}
New操作符的机制与实现相同功能的方法