首先先来段我们熟悉的代码
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function(){
console.log('i can speak');
}
let girl = new Person('weboof', 18);
console.log(girl.name);
console.log(girl.age);
girl.say();
这是我们经常看到并且常用的代码，由此可以看出通过new创建出来的实例有以下几个特征：
- new通过构造函数Person创造出来的实例可以访问构造函数中定义的属性和方法。
- new通过构造函数Person创造出来的实例可以访问构造函数原型上的属性和方法。
接下来，按照以上总结内容，我们试着自己实现以下new操作符。首先我们需要了解以下几个问题点：
- 如何让实例和构造函数产生关系，如何实现属性和方法的继承？
- 如何让实例和构造函数的原型产生关联？
简易版
function creat(Construction, ...args){
let obj = {};
Construction.call(obj, ...args); //继承构造函数内部属性和方法
//Construction.apply(obj, args); //继承构造函数内部属性和方法
Object.setPrototypeOf(obj, Construction.prototype); //连接原型
return obj;
}
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function(){
console.log('i can speak');
}
let girl = creat(Person, 'weboof', 18);
console.log(girl.name); //weboof
console.log(girl.age); //18
girl.say(); // i can speak
我们看到以上方法已经可以实现一个简易的new操作符了。接下来我们还需要讨论一下，当构造函数有返回值时， 会出现什么情况？
构造函数返回原始类型
function Person(name, age) {
this.name = name;
this.age = age;
return 1
}
Person.prototype.say = function(){
console.log('i can speak');
}
let girl = new Person('weboof', 18);
console.log(girl.name); //weboof
console.log(girl.age); //18
girl.say(); //i can speak
由此，我们可以看出，如果构造函数返回值为原始类型时，对于创建出来的实例不会有任何影响。
构造函数返回对象类型
function Person(name, age) {
this.name = name;
this.age = age;
return {
name: 'hanhh'
}
}
Person.prototype.say = function(){
console.log('i can speak');
}
let girl = new Person('weboof', 18);
console.log(girl.name); //hanhh
console.log(girl.age); //undefined
girl.say(); //VM267:17 Uncaught TypeError: girl.say is not a function
由此可以看出，如果构造函数返回的值为对象类型，通过构造函数创建出的实例是会受到返回值的影响，并且不会继承构造函数原型链上的属性和方法。
完整代码如下
function creat(con, ...args) {
//con为传进来的构造函数
let obj = {};
//obj可以访问构造函数上面的属性和方法
// let result = con.call(obj, ...args);
let result = con.apply(obj, args);
if(result instanceof Object) {
return result;
}else {
Object.setPrototypeOf(obj, con.prototype); //obj可以访问构造函数原型链上的属性
return obj;
}
}
以上就是对new操作符的详细解释，希望对你有帮助～
