白话说说new操作符的背后

一、前言

今天群里有一段代码，发现小伙伴想尝试模拟new操作符，想想写一篇相关的博客吧。

二、作用

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。

三、语法

1
new constructor[([arguments])]

参数：

  • constructor
  • arguments

四、new执行的背后

举例当new Foo(…) 执行时，会发生以下事情：

  1. 一个继承自 Foo.prototype 的新对象被创建。
  2. 使用指定的参数调用构造函数 Foo ，并将 this 绑定到新创建的对象。new Foo 等同于 new Foo()，也就是没有指定参数列表，Foo 不带任何参数调用的情况。
  3. 由构造函数返回的对象就是 new 表达式的结果。如果构造函数没有显式返回一个对象，则使用步骤1创建的对象。（一般情况下，构造函数不返回值，但是用户可以选择主动返回对象，来覆盖正常的对象创建步骤）

五、自己模拟new实现

既然已经知道new操作符背后做了些什么我们可以尝试自己模拟下。

1
var a = objectFactory(Constructor,...);
1
2
3
4
5
6
7
8
9
10
11
12
13
 function objectFactory() {

   var obj = {};

   var Constructor = [].shift.call(arguments);

   obj.__proto__ = Constructor.prototype;

   var ret = Constructor.apply(obj, arguments);

   return typeof ret === 'object' ? ret : obj;

};
Share