欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS中new的实现

程序员文章站 2022-06-21 13:24:26
...

我们知道,JS中的new操作符可以用来创建构造函数的实例对象,比如下????:

function Cat(name, age) {
    this.name = name
    this.age = age
}
var cat1 = new Cat('小米', 2) // Cat { name: "小米", age: 2 }

我们打印一下cat1:
JS中new的实现
那么new内部到底做了什么呢❓听我们娓娓道来

1、创建一个空的JavaScript对象{}

2、链接该对象,将该对象的__proto__指向构造函数的原型prototype

3、将构造函数内部的this绑定到步骤1创建的对象

4、如果构造函数没有返回对象,则返回步骤1创建的对象

⚠️⚠️⚠️这里要特别注意的是最后一点,只要构造函数没有return一个对象,就都会返回前三步新创建的obj(具体可见下????)
JS中new的实现
根据以上实现过程,我们也可以试着来自定义实现一个new

function myNew(constrc, ...args) {
    const obj = {} // 1
    obj.__proto__ = constrc.prototype // 2
    let result = constrc.apply(obj, args) // 3
    return result instanceof Object ? result : obj // 4
}

// 构造函数
function Cat(name, age) {
    this.name = name
    this.age = age
}
var cat1 = myNew(Cat, '小米', 2)
console.log(cat1) // Cat { name: "小米", age: 2 }

cat1:
JS中new的实现
如此一来,一个继承自 Cat.prototype 的新对象就被创建了

相关标签: new