JavaScript中new的用处及其实现

[yangrenmu]

new 的用途

new：new 运算符用于创建一个自定义对象实例，或者是一个构造函数内置对象的实例。啥意思呢，有点拗口，我们先看个栗子先。

new F() 时，发生了什么

• 第一版

栗子在这：

function Person(name, age) {
    this.name = name
    this.age = age
    console.log(this) // Person{name: "xuedinge", age: "20"}
}
Person.prototype.have = "cat"
const person = new Person("xuedinge", "20")
console.log(person.name) // xuedinge
console.log(person.have) // cat
console.log(person) // Person{name: "xuedinge", age: "20"}

从这个栗子中，我们可以看到，new 具有以下能力：
1、new 创建出来的实例可以访问构造函数Person内的属性；
2、new 创建出来的实例可以访问构造函数原型上的属性；
3、new 可以将构造函数中的this绑定到新创建出来的对象上；
那我们就先针对new的这三个能力先实现一下：

function fakeNew(Fn) {
    // 创建一个空对象
    let obj = new Object()
    // 将新对象的原型指针指向构造函数的原型
    obj.__proto__ = Fn.prototype
    // 处理除了 Fn 以外的剩余参数
    Fn.apply(obj, [].slice.call(arguments, 1))
    return obj
}

看下效果：

function Person(name, age) {
    this.name = name
    this.age = age
    console.log(this) // Person {name: "xuedinge", age: "20"}
}
Person.prototype.have = "cat"
function fakeNew(Fn) {
    // 创建一个空对象
    let obj = new Object()
    // 将新对象的原型指针指向构造函数的原型
    obj.__proto__ = Fn.prototype
    // 处理除了 Fn 以外的剩余参数
    Fn.apply(obj, [].slice.call(arguments, 1))
    return obj
}
const newPerson = fakeNew(Person, "xuedinge", "20")
console.log(newPerson.name) // xuedinge
console.log(newPerson.have) // 20
console.log(newPerson) // Person {name: "xuedinge", age: "20"}

看样子跟new的能力比较相像了。但是当构造函数里有返回值时，是怎么样子的呢，再看个🌰：

// 当返回值是对象时：
function Person(name, age) {
    this.name = name
    this.age = age
    console.log(this) // Person {name: "xuedinge", age: "20"}
    return {
      car: "leikesasi"
    }
}
Person.prototype.have = "cat"
const person = new Person("xuedinge", "20")
console.log(person.name) // undefined
console.log(person.have) // undefined
console.log(person.car) // leikesasi
console.log(person) // {car: "leikesasi"}

可以看出，当构造函数有返回值是对象时，new创建的实例对象就是构造函数返回的结果，当返回值是普通对象时呢，看下面这个🌰：

// 当返回值是普通值时：
unction Person(name, age) {
    this.name = name
    this.age = age
    console.log(this) // Person{name: "xuedinge", age: "20"}
    return "leikesasi"
}
Person.prototype.have = "cat"
const person = new Person("xuedinge", "20")
console.log(person.name) // xuedinge
console.log(person.have) // cat
console.log(person) // Person{name: "xuedinge", age: "20"}

当返回值是普通对象时，跟没有返回值时，结果是一致的。

• 第二版

现在呢，我们把第一版的实现稍作修改：

function fakeNew(Fn) {
    // 创建一个空对象
    let obj = new Object()
    // 将新对象的原型指针指向构造函数的原型
    obj.__proto__ = Fn.prototype
    // 处理除了 Fn 以外的剩余参数
    let result = Fn.apply(obj, [].slice.call(arguments, 1))
    // 若构造函数返回对象（ null 除外），则返回 result，否则返回 obj
    return typeof result === "object" ? result || obj : obj
}

看下效果，见证奇迹的时刻：

function Person(name, age) {
    this.name = name
    this.age = age
    console.log(this) // Person {name: "xuedinge", age: "20"}
    return {
      car: "leikesasi"
    }
}
Person.prototype.have = "cat"
function fakeNew(Fn) {
    // 创建一个空对象
    let obj = new Object()
    // 将新对象的原型指针指向构造函数的原型
    obj.__proto__ = Fn.prototype
    // 处理除了 Fn 以外的剩余参数
    let result = Fn.apply(obj, [].slice.call(arguments, 1))
    return typeof result === "object" ? result || obj : obj
}
const newPerson = fakeNew(Person, "xuedinge", "20")
console.log(newPerson.name) // undefined
console.log(newPerson.have) // undefined
console.log(newPerson) // {car: "leikesasi"}

👏👏👏👏👏👏