js之new的原理和源码
new的原理即作用:
当你写下一个new关键字时,可以考虑一下new做了哪几件事?
首先它要先创造一个空对象用来装以后调用构造函数生成的对象。
空对象造好了,就要确保我这个空对象和构造函数之间的继承关系不能乱,保证实例化对象是由其父亲构造函数创造的,确保原型链的正确
然后就是修改this指针,调用能够实例化对象的构造函数。
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,无法修改原型对象