new的实现机制

Posted 2020-09-30

3.1： new 基本原理

　　new命令的作用，就是执行一个构造函数，并且返回一个对象实例。使用new命令时，它后面的函数调用就不是正常的调用，而是依次执行下面的步骤。

　　a：创建一个空对象，作为将要返回的对象实例。

　　b：将空对象的原型指向了构造函数的prototype属性。

　　c：将空对象赋值给构造函数内部的this关键字。

　　d：开始执行构造函数内部的代码。

　　也就是说，构造函数内部，this指向的是一个新生成的空对象，所有针对this的操作，都会发生在这个空对象上。构造函数之所谓构造函数，意思是这个函数的目的就是操作一个空对象（即this对象），将其构造为需要的样子。

　　以上是new命令的基本原理，这个很重要。以下会用具体实例来验证该原理的过程。

 

 

一个问题，如果我们忘记使用new命令来调用构造函数，直接调用构造函数了，会发生什么？

这种情况下，构造函数就变成了普通函数，并不会生成实例对象。而且由于后面会说到的原因，this这时代表全局对象，将造成一些意想不到的结果

function Keith(){
    this.height = 180;
}

 var person = Keith();
  console.log(person.height);  //person is underfined

上面代码中，当在调用构造函数Keith时，忘记加上new命令。结果是this指向了全局作用域，height也就变成了全局变量。而变量person变成了undefined。

因此，应该非常小心，避免出现不使用new命令、直接调用构造函数的情况

 

如果构造函数内部有return语句，而且return后面跟着一个复杂数据类型（对象，数组等），new命令会返回return语句指定的对象；如果return语句后面跟着一个简单数据类型（字符串，布尔值，数字等），则会忽略return语句，返回this对象。

 

function Keith(){
    this.height = 180;
    return{
        height:200
    };
}
    var boy = new Keith();
    console.log(boy.height) //200

    function Keith(){
        this.height =100;
        return 200;
}

    var boy = new Keith();
    console.log(boy.height); //100

 

总结一下：我们这里有个Foo函数，这个函数有个prototype的对象属性，它的作用就是当使用new Foo()去构造实例的时候，这个构造器的prototype属性会用作new出来的这些对象的原型。

所以我们要搞清楚，prototype和原型是两回事，prototype是函数对象上的预设属性，原型通常是构造器上的prototype属性。