JavaScript中new实现原理

一、JavaScript中new实现原理

1、创建一个空对象 obj

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

并且在原型链 __proto__ 上设置 构造函数 constructor 为要实例化的 Fn

3、传入参数，并让 构造函数 Fn 改变指向到 obj，并执行

4、最后返回 obj

 

 

二、例子：

构造函数

function Parent(age, name) {
    this.age = age
    this.name = name
    this.sayAge = function() {
        console.log('this.age :', this.age)
    }
}
Parent.prototype.sayName = function() {
    console.log('this.name :', this.name)
}

模拟 new 运算符功能函数

function New(Fn) {
    let obj = {}
    let arg = Array.prototype.slice.call(arguments, 1)
    obj.__proto__ = Fn.prototype
    obj.__proto__.constructor = Fn
    Fn.apply(obj, arg)
    return obj
}

三、测试

let son = new Parent(18, 'lining')
let newSon = New(Parent, 18, 'lining')

console.log('son :', son)       // son : Parent { age: 18, name: 'lining', sayAge: [Function] }
console.log('newSon :', newSon) // newSon : Parent { age: 18, name: 'lining', sayAge: [Function] }

console.log('son.constructor :', son.constructor)
// son.constructor : function Parent(age, name) {
//     this.age = age
//     this.name = name
//     this.sayAge = function() {
//         console.log('this.age :', this.age)
//     }
// }

console.log('newSon.constructor :', newSon.constructor)
// newSon.constructor : function Parent(age, name) {
//     this.age = age
//     this.name = name
//     this.sayAge = function() {
//         console.log('this.age :', this.age)
//     }
// }

四、特殊情况

上面的实现过程是一般我们所普遍知晓的构造过程

但是在 JavaScript 实现中，如果构造函数返回的是个对象/原始类型

那么最终得到的实例就不一样了

 

各个返回类型情况：

function Parent(age, name) {
    this.age = age
    this.name = name
    this.sayAge = function() {
        console.log('this.age :', this.age)
    }
    // return 0
    // return null
    // return undefined
    // return false
    // return true
    // return ''
    // return 'parent'
    // return Symbol('parent')
    // return []
    // return {}
    // return {
    //     hands: 2,
    //     foot: 2
    // }
}
Parent.prototype.sayName = function() {
    console.log('this.name :', this.name)
}

下面分别对应上面 11 种 return 情况

return 0:
let p1 = new Parent(18, 'jolin')
console.log('p1 :', p1) // p1 : Parent { age: 18, name: 'jolin', sayAge: [Function] }

return null:
let p2 = new Parent(18, 'jolin')
console.log('p2 :', p2) // p2 : Parent { age: 18, name: 'jolin', sayAge: [Function] }

return undefined:
let p3 = new Parent(18, 'jolin')
console.log('p3 :', p3) // p3 : Parent { age: 18, name: 'jolin', sayAge: [Function] }

return false:
let p4 = new Parent(18, 'jolin')
console.log('p4 :', p4) // p4 : Parent { age: 18, name: 'jolin', sayAge: [Function] }

return true:
let p5 = new Parent(18, 'jolin')
console.log('p5 :', p5) // p5 : Parent { age: 18, name: 'jolin', sayAge: [Function] }

return '':
let p6 = new Parent(18, 'jolin')
console.log('p6 :', p6) // p6 : Parent { age: 18, name: 'jolin', sayAge: [Function] }

return 'parent':
let p7 = new Parent(18, 'jolin')
console.log('p7 :', p7) // p7 : Parent { age: 18, name: 'jolin', sayAge: [Function] }

return Symbol('parent'):
let p8 = new Parent(18, 'jolin')
console.log('p8 :', p8) // p8 : Parent { age: 18, name: 'jolin', sayAge: [Function] }

return []:
let p9 = new Parent(18, 'jolin')
console.log('p9 :', p9) // p9 : []

return {}:
let p10 = new Parent(18, 'jolin')
console.log('p10 :', p10) // p10 : {}

return {
    hands: 2,
    foot: 2
}
let p11 = new Parent(18, 'jolin')
console.log('p11 :', p11) // p11 : { hands: 2, foot: 2 }

因此实现原理改一下：

1、创建一个空对象 obj

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

并且在原型链 __proto__ 上设置 构造函数 constructor 为要实例化的 Fn

3、传入参数，并让 构造函数 Fn 改变指向到 obj，并执行

4、如果 Fn 执行后返回的是对象类型（null除外），则返回该对象，否则返回 obj

修改模拟 new 运算符功能函数

function New(Fn) {
    let obj = {}
    let arg = Array.prototype.slice.call(arguments, 1)
    obj.__proto__ = Fn.prototype
    obj.__proto__.constructor = Fn
    let ret = Fn.apply(obj, arg)
    return typeof ret === 'object' ? ret || obj : obj
}

参考地址：JavaScript深入之new的模拟实现