new的原理及实现

Posted 2020-11-24 w-yh

new的过程

// new运算的过程
/**
 * 1、创建一个空对象；
 * 2、该空对象的原型指向构造函数（链接原型）：将构造函数的 prototype 赋值给对象的 __proto__属性；
 * 3、绑定 this：将对象作为构造函数的 this 传进去，并执行该构造函数；
 * 4、返回新对象：如果构造函数返回的是一个对象，则返回该对象；否则（若没有返回值或者返回基本类型），返回第一步中新创建的对象；
 */
var Person = function(name) {
    this.name = name
    console.log('name is ', this.name)
}
Person.prototype.getName = function() {
    return this.name
}
var objectFactory = function() {
    // 1、创建一个空对象
    var obj = new Object()
    console.log('before shift arguments = ',arguments)
    // 获取构造函数Person
    Constructor = [].shift.call(arguments)
    //因为arguments是类数组，并不是真正的数组，所以不能直接调用数组的shift方法，但是可以通过call调用。
    console.log('after shift arguments = ', arguments)
    console.log(`Constructor = ${Constructor}`)
    // 2、该空对象的原型指向构造函数： 将构造函数的prototype 赋值给空对象的 __proto__属性；
    obj.__proto__ = Constructor.prototype
    // 3、将空对象作为构造函数的this传进去，并执行该构造函数
    var ret = Constructor.apply(obj, arguments)
    // 4、返回新对象：如果构造函数返回的是一个对象，则返回该对象；否则（若没有返回值或者返回基本类型），返回第一步中新创建的对象；
    return typeof ret == 'object' ? ret : obj
}
var a = objectFactory(Person, 'wyh')
console.log('执行后的name = ', a.name)

new实现的第四步解释：

构造函数返回值有如下三种情况：

• 1、返回一个对象
• 2、没有 return，即返回 undefined
• 3、返回undefined 以外的基本类型

情况1：返回一个对象

function Car(color, name) {
    this.color = color;
    return {
        name: name
    }
}

var car = new Car("black", "BMW");
car.color;
// undefined

car.name;
// "BMW"

实例 car 中只能访问到返回对象中的属性。

情况2：没有 return，即返回 undefined

function Car(color, name) {
    this.color = color;
}

var car = new Car("black", "BMW");
car.color;
// black

car.name;
// undefined

实例 car 中只能访问到构造函数中的属性，和情况1完全相反。

情况3：返回undefined 以外的基本类型

function Car(color, name) {
    this.color = color;
    return "new car";
}

var car = new Car("black", "BMW");
car.color;
// black

car.name;
// undefined

实例 car 中只能访问到构造函数中的属性，和情况1完全相反，结果相当于没有返回值。

所以需要判断下返回的值是不是一个对象，如果是对象则返回这个对象，不然返回新创建的 obj对象。