new的原理及实现

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对象。

巴特西

new的原理及实现

new的过程

最新文章

热门文章