模拟new的实现
2020-06-09 本文已影响0人
羽晞yose
function Animal (type) {
this.type = type;
}
Animal.prototype.say = function () {
console.log('hello');
}
let cat = new Animal('哺乳类');
console.log(cat);
cat.say();
console.log(Animal.prototype);
执行结果
百度百科:每个函数就是一个对象(Function),函数对象都有一个子对象 prototype 对象,类是以函数的形式来定义的。prototype表示该函数的原型,也表示一个类的成员的集合。
通过定义可以看出:定义函数的时候,函数本身是会有一个prototype属性的。但new一个类时,我们通过上面的执行结果可以看到,是没有prototype
属性的,因为结果是一个对象,对象拥有的是__proto__
。
我们要模拟new,那么就必须知道new干了什么事,而通过上图结果和函数定义我们可以分析出,new一个对象时,它会干下面几件事:
- 生成一个新的对象Object
- 将该对象的
Object.__proto__
指向构造函数的prototype(上图执行结果黄色框还可以看出,__proto__
里的constructor保存着原函数的引用) - 将this指向该新对象Object
- 执行构造函数,并将构造函数的属性添加到该新对象上
- 如果构造函数返回的是一个引用类型值,则返回的是该引用类型值,否则返回该对象
由于new是关键字,我们是没法模拟一模一样的写法的,但我们可以通过函数来实现一个newModel
function mockNew () {
// arguments是类数组,shift会改变原数组,所以此时arguments就是除去第一个剩下的参数
let constructor = [].shift.call(arguments);
// 步骤1:创建一个对象
let obj = {};
// 步骤2:将该对象的原型链指向 构造函数的prototype
obj.__proto__ = constructor.prototype;
// 步骤3/4:改变该对象的this指向,并执行(call和apply的特点)
let res = constructor.apply(obj, arguments);
// 步骤5:如果 构造函数返回是一个引用类型值,则返回该值,否则返回该新对象
return res instanceof Object ? res : obj;
}
let cat = mockNew(Animal, '哺乳类');
console.log(cat);
cat.say();
let cat2 = new Animal('哺乳类');
console.log(cat2);
cat2.say();
勘误,上面步骤5直接使用res instance Object
是不严谨的,复习重新看这篇文章的时候才发现之前写的有误,更新如下,并且用ES6语法来实现
// ES6做法
function _new (clazz, ...args) {
let object = Object.create(clazz.prototype)
// call比apply性能更高
let res = clazz.call(object, ...args);
if (res !== null && (typeof res !== 'object' || typeof res !== 'function')) {
return object
}
return res
}
注意的是对象的创建不能使用Object.create()来创建,Object.create()创建的对象将会丢失原型上的方法(当然这个说法也不完全正确,不使用null来创建还是有继承的,只是继承到了obj.__proto__.__proto__
上)
let obj = {};
obj.a = '123';
console.log(obj.__proto__);
let obj2 = Object.create({});
obj2.a = '123';
console.log(obj2.__proto__);
字面量 与 Object.create()