js函数中的new做了什么?深入了解new

我们可能平时都接触到new方法,通过new关键字创建了一个实例。比如new Vue();那么当我们new的时候究竟做了什么?今天看了篇分享,自己实践了下个,感觉有必要和大家一起分项一下啊。

  众所众知当我们用new构造一个实例的时候,我们构造出来的实例会有两个属性,__proto__指向构造函数的原型,constructor:指向构造函数,同时构造函数也有一个prototype属性指向原型。

  我们来举个例子,function animal(name){this.name = name}--构造函数;   animal.prototype.sayName=function(){console.log(this.name)};--构造函数的原型,
          var dog = new animal(‘dog’);--构造函数的实例
  好了,接下来我们开始讲new,new是一个关键字当我们new 一个构造函数的时候做了哪些事呐,一,创建了一个实例对象,并且实现了上边的一些关联。那么new是如何实现的呐?我们来试着写一个我们自己的new方法

 

function selfNew(){ 
        var obj = new Object();
	var con = [].shift.call(arguments);
	console.log(con);
	debugger;
	obj.__proto__ = con.prototype;
	con.apply(obj,arguments);
	return obj;  
}

  里边已经有了断点,大家可以调试下。可能大家会疑惑这条语句[].shift.call(arguments);我也小小的迷惑了下,查了下mdn的shift方法,发现原来shifit是有返回值的。一直以为shift只是删除了元素。可能大家会有疑惑,我来说一下。我们调用数组的shift方法删除arguments的第一个元素并返回第一个元素,arguments是什么呐?回想一下我们怎么new的,new person('a',1);selfNew(animal,'dog',12);当我们调用selfNew时,arguments的值为[animal,'dog',12]这是个类数组。然后我们用shift删除了animal并且返回给con接收,这个时候con就是我们的构造函数了。
  接下来obj是一个new的对象,也是用来代替我们构造函数的实例的。我们首先让obj.__proto__指向了构造函数con的原型,然后我们需要给构造函数的传递的参数进行处理了。上边我们把arguments的第一个函数删除了,那么这时候arguments中的值就是['dog',12];现在要做的就是把这个两个参数传递给我们的构造函数con,因此我们利用apply方法,con.apply(obj,argumetns);这个时候con里边的this就是obj也就是我么返回的实例对象了。最后我们把obj返回去。好了,万事大吉!当然还有些特殊的情况需要处理,下一篇再说吧。

原文地址:https://www.cnblogs.com/hjdjs/p/6970989.html