【手撕原理】面试官:来吧,实现一个new操作符

实现一个new操作符的具体实现步骤:

  • 首先函数接受不定量的参数,第一个参数为构造函数,接下来的参数被构造函数使用
  • 然后内部创建一个空对象 obj
  • 因为 obj 对象需要访问到构造函数原型链上的属性,所以我们通过 setPrototypeOf 将两者联系起来。这段代码等同于 obj.proto = Con.prototype
  • 将 obj 绑定到构造函数上,并且传入剩余的参数
  • 判断构造函数返回值是否为对象,如果为对象就使用构造函数返回的值,否则使用 obj,这样就实现了忽略构造函数返回的原始值
/**
 * 创建一个new操作符
 * @param {*} Con 构造函数
 * @param  {...any} args 往构造函数中传的参数
 */
function createNew(con,...args){
    let obj = {};   //创建一个对象,因为new操作符会返回一个对象
    obj.__proto__ = con.prototype;  //将对象与构造函数原型链接起来
    let res = con.apply(obj,args);  //将构造函数中的this指向这个对象,并传递参数
    if(res instanceof Object){  // 判断构造函数返回值是否为对象
        return res;
    }else{
        return obj;
    }
}

function foo(name, age) {
    this.name = name;
    this.age = age;
    //console.log(this); //此时this已经发生变化了
}
var f = createNew(foo,'Chocolate',18);
console.log(f);

注意:

一、new操作符的几个作用:

  • new操作符返回一个对象,所以我们需要在内部创建一个对象
  • 这个对象,也就是构造函数中的this,可以访问到挂载在this上的任意属性
  • 这个对象可以访问到构造函数原型链上的属性,所以需要将对象与构造函数链接起来
  • 返回原始值需要忽略,返回对象需要正常处理

二、new操作符的特点:

  • new通过构造函数Test创建处理的实例可以访问构造函数中的属性也可以访问构造函数原型链上的属性,所以:通过new操作符,实例与构造函数通过原型链连接了起来
  • 构造函数如果返回原始值,那么这个返回值毫无意义
  • 构造函数如果返回对象,那么这个返回值会被正常的使用,导致new操作符没有作用
学如逆水行舟,不进则退
一百个Chocolate CSDN认证博客专家 CSDN博客专家 Vue爱好者 博客之星
不是只会写业务代码的前端开发攻城狮!博客网站:yangchaoyi.vip做限量版的自己,就这样安静地努力。一个还在苦学前端的小小Chocolate,我的博客主要分享前端、算法、大学课程笔记、平常遇到的bug、心得感悟体会,感谢您的访问,若喜欢可以关注一下~每一个清晨,记得鼓励自己。没有奇迹,只有你努力的轨迹;没有运气,只有你坚持的勇气!每一份坚持都是成功的累积,只要相信自己,总会遇到惊喜!座右铭:学如逆水行舟,不进则退!
©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值