new的实现原理

关键字new在调用构造函数的时候实际上进行了如下的几个步骤:

  1. 创建一个新的对象
  2. 将构造函数的作用域赋值给这个新的对象(因此this指向了这个新的对象)
  3. 执行构造函数中的代码(为这个新对象添加属性)
  4. 返回新对象

我们写一个函数,命名为objectFactory,来模拟new的效果,使用的时候像下面这样:

function Person () {
    ……
}

// 使用 new
var student = new Person(……);
// 使用 objectFactory
var student = objectFactory(Person, ……)

接下来,我们按照new调用构造函数的四个步骤来实现objectFactory:

function objectFactory() {
    // 创建一个新的对象
    const obj = {}    
    // 获取第一个参数,arguments是类数组,不可直接调用shift方法
    //此外因为 shift 会修改原数组,所以 arguments 会被去除第一个参数
    const Constructor = [].shift.call(arguments)  
    // 将obj的原型指向构造函数的原型对象,这样obj就可以访问构造函数原型上的属性
    obj.__proto__ = Constructor.prototype   
    // 将构造函数的this指向obj,这样obj就可以访问到构造函数中的属性
    Constructor.apply(obj, arguments);
    // 返回 obj
    return obj;
}

如果构造函数中返回了一个对象,则在实例中只能访问到返回的对象中的属性。

所以我们还需要判断返回的值是不是一个对象,如果是一个对象,我们就返回这个对象,如果没有,我们该返回什么就返回什么。

function objectFactory() {
    const obj = {}    
    const Constructor = [].shift.call(arguments)  
    obj.__proto__ = Constructor.prototype   
    const res = Constructor.apply(obj, arguments);
    return typeof res === 'object' ? res : obj;
}

转载于:https://www.cnblogs.com/renzhiwei2017/p/10364771.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值