模拟new的实现

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()

最后编辑于：2020.08.23 23:33:52