JavaScript的new模拟实现
new的定义
new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。
调用New的时候到底发生了什么?
调用New
- 创建了一个空对象
- 让该空对象继承构造函数的原型对象
- 将构造函数的this自动指向新对象
- 返回新对象的地址
初步模拟new的实现
function newObject(){
//第一步:创建一个空对象
var obj = new Object();
//获取构造函数(同时删除参数列表中的第一个参数)
var Constructor = [].shift.call(arguments);
//第二步:让新对象的 __proto__ 属性指向构造函数的原型
obj.__proto__ = Constructor.prototype;
//第三步:将构造函数的this自动指向新对象
Constructor.apply(obj,arguments);
//第四步:返回该对象
return obj;
}
测试一下
function Animal(name,age){
this.name = name;
this.age = age;
this.skinColour = function(){
console.log(‘我是粉皮肤’);
};
}
Animal.prototype.getName=function(){
console.log("I am "+this.name);
};
var yellow = newObject(Animal,'dog1',1.8);
yellow.name;//dog1
yellow.age;//1.8;
yellow.getName();//I am dog1
到目前为止,初步模拟new的实现步骤已经完成。但是一些特殊情况下,构造函数会有返回值。当返回值是基本类型时,跟没有返回值处理结果一样。但是当返回值是一个对象时,就只能访问构造函数返回对象的属性跟方法了。(这个大家自行模拟一下)
最终版new模拟实现
function newObject(){
//第一步:创建一个空对象
var obj = new Object();
//获取构造函数(同时删除参数列表中的第一个参数)
var Constructor = [].shift.call(arguments);
//第二步:让新对象的 __proto__ 属性指向构造函数的原型
obj.__proto__ = Constructor.prototype;
//第三步:将构造函数的this自动指向新对象,并取到构造函数的返回值
var returnObj = Constructor.apply(obj,arguments);
//第四步:返回该对象
return typeof returnObj == 'Object' ? returnObj : obj;
}