JS的new操作符

一、new的使用

当我们定义一个构造函数，用new创建对象时

function Person(){
}

var person = new Person();

console.log(person); // Person{}

会返回一个指向该构造函数原型的对象。

二、new创建对象的过程

根据红宝书的描述分为以下4个步骤：

1. 创建一个新的对象；
2. 将构造函数的函数作用域赋给新对象（因此this就指向了这个新对象）；
3. 执行构造函数中的代码（为这个新对象添加属性）；
4. 返回新对象。

三、模拟实现new操作

// newObj接受不定量的参数，第一个参数是一个构造函数
function newObj(fn, ...arg) {
    // 1.新建一个空对象
    var obj = {};
    // 2.将新对象的原型指向构造函数的原型
    obj.__proto__ = fn.prototype;
    // 3.将 fn 的 this 指向 obj
    fn.apply(obj, arg);
    // 4.返回新对象
    return obj;
}

或
function newObj(fn, ...arg) {
    var obj = Object.create(fn.prototype);
    fn.apply(obj, arg);
    return obj;
}

接下来对newObj函数进行测试

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
}

// 在Person的原型上添加sayName()方法
Person.prototype.sayName = function() {
    alert(this.firstName + " " + this.lastName);
}

// 使用自定义的newObj创建Person的对象实例
var pitt = newObj(Person, "Bob", "Pitt");
// 调用sayName()
pitt.sayName(); // "Bob Pitt"

//使用new操作符创建实例对象
var sunny = new Person("Bob", "Sunny");
sunny.sayName(); // "Bob Sunny"