js之new的原理和源码

new的原理即作用： 
 function  Student(name,age){  this .name= name;  this .age= age;

        }  var  stu= new  Student("小明",18);

观察上述代码，Student是一个普通的构造函数，然后通过new对构造函数实例化得到了一个Student类型的数据。

实例语句里面的关系有如下三点：

①：stu.__proto__===Student.prototype;

②：根据规则，当构造函数没有参数的时候，（）可以省略。故可知，Student("小明",18)并不是对构造函数的调用，这里new还主动调用了构造函数

③：new还创造了一个容器，让这个容器去调用这个构造函数，并且来装产生的数据对象，并且最后返回这个填装完毕的对象

故当你写下一个new关键字时，new实质上就做了如上三件事
new的最终目的：
创造一个构造函数类别的对象出来，就像new date造出来的是date对象，new array造出来的 是Array对象一样，并且保证这里面的一些继承关系不能乱
new关键字源码：
构造函数：
 function  Student(name,age){  this .name= name;  this .age= age;

        }

 

mynew函数：

 1   function  mynew(fn,name,age){  2               var  obj= {};  3               //  修改原型关系，确定obj一定是由fn造出来的 
 4              obj.__proto__= fn.prototype;  5               //  obj本身没有fn方法，fn是window对象的，于是obj带着借fn所要求的参数去向window借，这样的话，fn借来后obj就可以用了，fn里的this什么的指向的也就是obj了，也可用apply或bind，这也就是修改this指针的原理，this一般是谁调用指向谁 
 6               var  result= fn.call(obj,name,age);  7               //  判断通过构造函数实例化的对象是否为对象，是的话就输出，不是的话就输出新创建的obj 
 8               return  result  instanceof  Object? result:obj;  9          }

调用：

console.log(mynew(Student,"小明",18)) ;

mynew不带形参的源码，除了mynew函数略有不同，其它均相同 

     function  mynew(){  var  obj= {};  //  获取函数调用时传的第一个参数，即为构造函数fn 
             var  fn= [].shift.call(arguments);  //  修改原型关系，确定obj一定是由fn造出来的 
            obj.__proto__= fn.prototype;  //  修改fn的this指针，arguements必须要转为以逗号相连的数据 
 fn.call(obj,...arguments);  return  obj;

        }

        console.log(mynew(Student, "小明",18)) ;

箭头函数不能写new：

注意箭头函数不能用来写new的源码，

  • 箭头函数没有自己的 this，无法修改this指针
  • 箭头函数没有自己的 prototype，无法修改原型对象

标签: Javascript

添加新评论