归子莫的博客

「笔杆揭不起,绘不出青烟别春泥 ————归子莫」

前端面试—new操作符的原理解析

博客说明

文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!

new实例

JavaScript中new操作符用于创建一个给定构造函数的对象实例

1
2
3
4
5
6
function Person(name, age){
this.name = name;
this.age = age;
}
const res = new Person('Tom', 20)
console.log(res) // Person {name: "Tom", age: 20}

原型,构造函数,实例的关系

  • 原型(prototype):一个简单的对象,用于实现对象的属性继承。可以简单理解成对象的父亲。在火狐和谷歌中,每个js对象中都包含一个proto(非标准)的属性指向它爹(该对象原型),可obj.proto进行访问。
  • 构造函数:可以 通过new来新建一个对象 的函数。
  • 实例:通过 构造函数new 创建出来的 对象,就是实例。实例通过proto指向原型,通过constructor指向构造函数。
因此看得出三者的关系
1
2
3
4
实例.__proto__===原型
原型.constructor === 构造函数
构造函数.prototype === 原型
实例.constructor === 构造函数

new操作符实现原理

  • 新生成一个对象
  • 链接到原型
  • 绑定this
  • 返回新对象(如果构造函数有自己 retrun 时,则返回该值)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function myNew(constrc, ...args) {
const obj = {}; // 1. 创建一个空对象
obj.__proto__ = constrc.prototype; // 2. 将obj的[[prototype]]属性指向构造函数的原型对象
const result = constrc.apply(obj, args); // 3.将constrc执行的上下文this绑定到obj上,并执行
return result instanceof Object ? result : obj; //4. 如果构造函数返回的是对象,则使用构造函数执行的结果。否则,返回新创建的对象
}

// 使用的例子:
function Person(name, age){
this.name = name;
this.age = age;
}
const res = myNew(Person, 'Tom', 20)
console.log(res) // Person {name: "Tom", age: 20}

感谢

以及勤劳的自己,个人博客GitHub

微信公众号

评论