一、是什么
在JavaScript中，new操作符用于创建一个给定构造函数的实例对象
举个粟子
function Parent (name,age){
this.name = name;
this.age = age;
}
undefined
Parent.prototype.sayName = function(){
console.log(this.name)
}
ƒ (){
console.log(this.name)
}
const child = new Parent('小爱同学',25)
undefined
child
Parent {name: '小爱同学', age: 25}
child.sayName
ƒ (){
console.log(this.name)
}
从上面可以看到：
- new 通过构造函数Parent 创建出来的实例可以访问到构造函数中的属性
- new 通过构造函数 Parent 创建出来的实例可以访问到构造函数原型链中的属性（即实例与构造函数通过原型链连接了起来）
现在在构建函数中显式加上返回值，并且这个返回值是一个原始类型
// 返回一个对象
function Test(name){
this.name = name
return {}
}
undefined
const t = new Test('小爱同学')
undefined
t.name
undefined
从上面可以发现，构造函数如果返回值为一个对象，那么这个返回值会被正常使用
// 返回基本类型
function Test(name){
this.name = name
return 1
}
undefined
const t1 = new Test('小爱同学')
undefined
t1.name
'小爱同学'
可以发现，构造函数中返回一个原始值，然而这个返回值并没有作用这个在this的应用中有讲过
二、流程
从上面介绍中，我们可以看到new关键字主要做了以下的工作：
- 创建一个新的对象obj
- 将对象与构建函数通过原型链连接起来
- 将构建函数中的this绑定到新建的对象obj上
- 根据构建函数返回类型作判断，如果是原始值则被忽略，如果是返回对象，需要正常处理
举个粟子：
function Person(name, age){
this.name = name;
this.age = age;
}
const person1 = new Person('Tom', 20)
console.log(person1) // Person {name: "Tom", age: 20}
t.sayName() // 'Tom'
流程图如下：
三、手写new操作符
现在我们已经清楚地掌握了new的执行过程
那么我们就动手来实现一下new
function myNew(fn,...args){
const obj = {}
obj.__proto__ = fn.prototype
let result = fn.apply(obj,args)
return result instanceof Object?result:obj
}
测试一下
function myNew(fn,...args){
const obj = {}
obj.__proto__ = fn.prototype
let result = fn.apply(obj,args)
return result instanceof Object?result:obj
}
undefined
function Parent(name,age){
this.name = name
this.age = age
}
undefined
const child = myNew(Parent,'小爱同学',25)
undefined
child
Parent {name: '小爱同学', age: 25}
Parent.prototype.sayName = function(){
console.log(this.name)
}
ƒ (){
console.log(this.name)
}
const child = myNew(Parent,'小爱同学',25)
undefined
child
Parent {name: '小爱同学', age: 25}
child.sayName()
小爱同学
可以发现，代码虽然很短，但是能够模拟实现new
