前端架构系列

模拟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一个对象时,它会干下面几件事:

  1. 生成一个新的对象Object
  2. 将该对象的Object.__proto__指向构造函数的prototype(上图执行结果黄色框还可以看出,__proto__里的constructor保存着原函数的引用)
  3. 将this指向该新对象Object
  4. 执行构造函数,并将构造函数的属性添加到该新对象上
  5. 如果构造函数返回的是一个引用类型值,则返回的是该引用类型值,否则返回该对象

由于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()
上一篇 下一篇

猜你喜欢

热点阅读