new操作符

1.new操作符的作用

　　实际上，构造函数跟普通函数并没有什么区别，都是函数，只不过使用了new关键字让函数返回了一个对象，使函数有了构造函数的效果。

 

window.onload = test;
function test(){
    let p1 =Person1();
    console.log(p1); //输出的是window对象
    let p2 = new Person2(); 
    console.log(p2); //输出的是Person2对象
}

function Person1(){
    this.myname = "John";
    this.age = 20;
    return this; 
}

function Person2(){
    this.myname = "Tom";
    this.age = 18;
    return this;
}

 

　　从示例中可以看到，Person1将返回值赋予了p1，而Person1()中的this是window对象；而p2调用了new关键字，使得Person2()返回了一个Person2对象给p2。实际上，Person1(）中的myname属性和age属性是被添加到了window对象中。

 

实际上，使用new关键字会进行如下操作：

1. 创建一个空的javascript对象；
2. 为步骤1创建的对象添加_proto_属性，该属性指向构造函数的原型对象prototype；
3. 将步骤1创建的对象作为构造函数中this的上下文（而相比之下，在全局作用域中声明的函数，this指向的是window，new关键字修改了这个指针）；
4. 如果函数没有返回对象，则返回这个this（这也是为什么构造函数通常不写return语句）；实际上，只要构造函数return的不是对象，就会自动忽略。如下面示例：

window.onload = test;
function test(){
    let p2 = new Person2("Mike",20);
    console.log(p2); //输出Object类型，p2.name = "Tom", p2.age = 18
}

function Person2(name,age){
    console.log(this); //这里输出的是Person2实例，name = "Mike", age = 20
    this.name = name;
    this.age = age;
    return {
        name:"Tom",
        age:18
    };
    // return 0; //若使用这个return，则返回的仍是this指向的Person2对象，忽略了0值
}

 

2.自定义方法实现new关键字

 

//Constructor:构造函数
//arg:参数列表
function createObject(Constructor,...arg){
    let obj = {};  //创建一个空对象
    Object.setPrototypeOf(obj,Constructor.prototype); //将构造函数的原型对象绑定到obj的_proto_属性上
    let res = Constructor.apply(obj,arg);  //调用构造函数
    if(res instanceof Object){ //对应了构造函数以对象作为返回值的情况
        return res;
    }else {     //正常情况下，构造函数作为一个普通函数是没有返回对象的，因此会跳到else语句内
        return obj;
    }
}

function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype.getName = function (){
    return this.name;
}

let p = createObject(Person,"Tom",20);
console.log(p);  //输出Person{name:"Tom",age:20}对象
console.log(p.getName()); //输出"Tom"

 

 

代码解读：

　　Constructor.apply(obj,arg)语句其实仅仅是给obj添加name属性和age属性，没有返回值，因此res值为undefined，是不会进入if语句的。