用原生js实现一个new?




prototype和__proto__

JS 代码还没运行的时候,JS 环境里已经有一个 window 对象了,window 对象有一个 Object 属性,window.Object 是一个函数对象,window.Object 这个函数对象有一个重要属性是 prototype,window.Object.prototype 里面有 toString(函数)、valueOf(函数)等属性。

img

prototype 指向一块内存,这个内存里面有共用属性

__proto__ 指向同一块内存

prototype 和 __proto__ 的不同点在于

prototype 是构造函数的属性,而 proto 是对象的属性

new的实现原理

new实例化的时候,会执行以下操作。

  • 新生成了一个对象newObj

  • newObj.__proto__链接到TargetClass原型上

  • newObj绑定 this到目标类TargetClass上

  • 返回新对象newObj

function create() {
    let newObj = new Object()

    // 获得构造函数  将arguments数组化 并取出第一个值
    // shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
    let TargetClass = Array.prototype.shift.call(arguments)

    // console.log(TargetClass);

    // 链接到原型
    newObj.__proto__ = TargetClass.prototype

    // 绑定this,执行构造函数
    let result = TargetClass.apply(newObj, arguments);

    // 确保new出来的是obj
    return typeof result === 'object' ? result : newObj
}
function Person(name, age) {
    this.name = name;
    this.age = age;
}

//通过new创建构造实例
let person1 = new Person('user1', 20);
console.log(person1)


//通过create方法创造实例
let person2 = create(Person, 'user2', 18);//调用自定义create实现new
console.log(person2) 

img

new 的作用,就是省那么几行代码。(即语法糖)

参考资料

《JS 的 new 到底是干什么的?》 https://zhuanlan.zhihu.com/p/23987456

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值