序言

这是前端进阶的文章，要想知道new的原理，必须深刻理解原型链、js继承的几种方式与及call、apply等相关知识再来看。

对象实例化

例子:
es5中的构造函数A

function A(name){
  this.name = name
}

var a = new A('a')
console.log(a)

结果：

image.png

由上图可以看出a 实例就是一个普通的对象而已
但是呢，这个对象要符合继承的条件:

a instanceof A
a.constructor === A
a.__proto__ === A.prototype

我们再来验证一下:

image.png

没问题，为什么 在A 前面加个new就完成了这么多事情呢？A是构造函数，构造函数也是一个普通函数，在前面加个new就可以完成对象实例化了，如果不加new会怎么样？

image.png

其实就是一个普通函数执行了一下并且没有return 语句，所以a是undefined

如果构造函数本身有return呢？

function A(name){
  this.name = name
  this.type = 'type'
  return {a: 'a', b: 'b'}
}

var a = new A('a的name')
console.log(a)

捕获.PNG
结果是无论我在构造函数中怎么申明this.name=name,最后实例a都是return的那个对象 {a:'a', b:'b'}

由此我敢大胆推测，new操作符 应该是返回了一个实例对象的，如果构造函数本身有返回的话就直接拿构造函数返回的结果，如果构造函数没有返回并且构造函数内部定义了this.xx=xxx的话，new就自己生成一个对象并把构造函数的this指向这个新建的对象。于是我可以尝试写一个模拟函数模拟new的过程：

预期1：创建一个对象并且返回这个对象

function myNew(){
  var obj = {}
  return obj
}

预期2：如果构造函数有this.xx = xxx的话，返回的对象也要有对应的属性，所以重写上面的函数

function myNew(){
  var obj = {}
  var constructorFunction = [].shift.call(arguments) // 拿到构造函数，因为构造函数是第一个参数，arguments里面的其余的参数就是构造函数的参数
  var params = arguments // 此时的arguments已经是去掉了第一个参数的arguments
  var res = constructorFunction.apply(obj, params) // 这句是改变constructorFunction的this指向到obj并且执行constructorFunction这个函数

  return res instanceof Object ? res : obj
}

这样貌似可以了，那我们来验证一下是不是我们想要的结果

image.png

a1、a2看起来很像，但是仔细看的话a1前面有个A，代表是A的实例，而a2呢却没有，代表它不是A的实例。不信我们可以来验证一下：

image.png

从上图可以看出，a1确实是A的实例，而a2却不是A的实例，所以我写的myNew函数还没有正确的，因为myNew函数缺少关键的步骤，把实例与构造函数它们的关系建立起来，所以再次重写myNew函数，在新建的对象上面加上这句：

obj.__proto__ = constructorFunction.prototype

function myNew(){
  var obj = {}
  var constructorFunction = [].shift.call(arguments)
  obj.__proto__ = constructorFunction.prototype
  var params = arguments
  var res = constructorFunction.apply(obj, params)

  return res instanceof Object ? res : obj
}

我们再来验证一次结果是否符合我们的预期：

捕获.PNG

可以看到：

a1 instanceof A // true
a1.constructor === A // true
a1.__proto__ === A.prototype // true
a2 instanceof A // true
a2.constructor === A // true
a2.__proto__ === A.prototype // true

完美,a1 与 a2 都是A的实例，a1是通过 new A()产生， a2是通过我们一步步写出来的函数myNew创建的。

如果有什么错误，欢迎留言指正，谢谢。