curTain

网上有很多讲原型、原型链、new 的执行与实现的文章,我也看了很多。

本文描述一下 new 的执行过程与手写实现一个 new 的实现。

1. new 的执行过程

我们以上图为例阐述 new 的执行过程。

  1. 创建一个中间对象
  2. 将该中间对象的原型指向构造函数的原型
  3. 将构造函数的 this 指向该中间对象并执行
  4. 返回该中间对象,即返回实例对象

2. 代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function myNew(){
// 取出传入参数
let argArray = Array.from( arguments )
// 取出构造函数与需要传入构造函数的参数
let constructorFun = argArray.shift()
// 创建中间函数
let obj = {}
// 将该中间对象的原型指向构造函数的原型
obj.__proto__ = constructorFun.prototype
// 绑定 this 并传入参数执行
constructorFun.apply( obj, argArray )
// 返回创建的对象
return obj
}

3. 运行测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function Animal( name, age ){
this.name = name
this.age = age
}

function myNew(){
let argArray = Array.from( arguments )
let constructorFun = argArray.shift()
let obj = {}
obj.__proto__ = constructorFun.prototype
constructorFun.apply( obj, argArray )
return obj
}

console.log( "myNew:",myNew( Animal, "dog", "12" ) )
console.log( "new:", new Animal( "cat", "11" ) )

测试结果:

总结

写出 new 的执行过程与实现,基本算是考察对 prototype 原型链的理解。

参考:

彻底捋清楚 new 的实现


 评论