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的模拟实现