JavaScript中new實現原理

1、JavaScript中new實現原理

一、建立一個空對象 obj

二、將該對象 obj 的原型鏈 __proto__ 指向構造函數的原型 prototype，

而且在原型鏈 __proto__ 上設置 構造函數 constructor 爲要實例化的 Fn

三、傳入參數，並讓 構造函數 Fn 改變指向到 obj，並執行

四、最後返回 obj

 

 

2、例子：

構造函數

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 }

 

3、測試

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) // } // }

 

 

4、特殊狀況

上面的實現過程是通常咱們所廣泛知曉的構造過程

可是在 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 }

所以實現原理改一下：

一、建立一個空對象 obj

二、將該對象 obj 的原型鏈 __proto__ 指向構造函數的原型 prototype，

而且在原型鏈 __proto__ 上設置 構造函數 constructor 爲要實例化的 Fn

三、傳入參數，並讓 構造函數 Fn 改變指向到 obj，並執行

四、若是 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的模擬實現