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

posted @ 2019-12-08 22:01  _wyh  阅读(684)  评论(0编辑  收藏  举报