一、new是什么
案例1:创建一个给定构造函数的实例对象
function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.sayHello = function () {
console.log("Hello,My name is "+this.name)
}
const person1 = new Person('fatesgo', 20)
console.log(person1) // Person {name: "fatesgo", age: 18}
person1.sayHello() // 'Hello,My name is fatesgo'
new
通过构造函数Person
创建出来的实例可以访问到构造函数中的属性new
通过构造函数Person
创建出来的实例可以访问到构造函数原型链中的属性(即实例与构造函数通过原型链连接了起来
案例2:构造函数加上返回值,并且这个返回值是一个原始类型
function Student(name) {
this.name = name
return 1
}
const stu = new Student('小明')
console.log(stu.name) // '小明'
可以发现,构造函数中返回一个原始值,然而这个返回值并没有作用
案例3:构造函数中返回一个对象
function Student(name) {
this.name = name
console.log(this) //Student {name:'小明'}
return {name:'王华',age:18}
}
const stu = new Student('小明')
console.log(stu) // {name:'王华',age:18}
console.log(stu.name) // 'undefined'
这个案例发现,构造函数如果返回值为一个对象,那么这个返回值会被正常使用
二、new做了什么工作?
从上面案例中,我们可以看到new
主要做了以下的工作:
创建一个新的对象
object
将对象与构建函数通过原型链连接起来
将构建函数中的
this
绑定到新建的对象obj
上根据构建函数返回类型作判断,如果是原始值则被忽略,如果是返回对象,需要正常处理
流程如下:
- 创建一个空对象
- 将新对象的prototype指向为Person.prototype
- 将Person构造函数的this设置为新创建的对象,执行
- 构造函数Person没有return语句,则将该新创建的对象返回
三、手写new操作符
function MyNew(fun, ...args) {
1.创建一个新对象
const obj = {}
2.新对象原型指向构造函数原型对象
obj.__proto__ = fun.prototype
3.将构建函数的this指向新对象
let result = fun.apply(obj, args)
4.根据返回值判断
return result instanceof Object ? result : obj
}
测试
function MyNew(fun, ...args) {
const obj = {}
obj.__proto__ = fun.prototype
let result = fun.apply(obj, args)
return result instanceof Object ? result : obj
}
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayHello = function() {
console.log("Hello,My name is " + this.name)
}
const person1 = MyNew(Person,'fatesgo', 20)
console.log(person1) // Person {name: "fatesgo", age: 18}
person1.sayHello() // 'Hello,My name is fatesgo'