new原理分析

首先先来段我们熟悉的代码

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操作符的详细解释，希望对你有帮助～