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的模擬實現