探索javascript中new操作符

new操作符相信大家平时都用得不少，为了知其所以然，今天我们一起探索下new操作。

首先，我们先思考下通过new操作符生成的对象都有哪些特点呢。

1. 是一个对象；

2. 具备构造函数原型对象的属性；

3. 具备构造函数中this绑定的属性。

接下来我们分别来探讨下这三个特点。

1. 是一个对象。

这一点相信很好理解，通过new操作符创建的是一个对象。可以配合下面例子理解：

function Person() {}

var person1 = new Person();
console.log(Object.prototype.toString.call(person1)); //[object Object]

2. 具备构造函数原型对象的属性。相信了解“原型”概念就能很好的理解这句话了。大家可以了解之前的一篇博客。同样我们也列举一个例子：

function Person() {}
Person.prototype.name = '张三';

var person1 = new Person();
console.log(person1.name); //张三

3. 具备构造函数中绑定的属性。这句话可能有点令人迷糊，我们同样也列举一个例子：

function Person() {
    this.age = 19;
}
Person.prototype.name = '张三';

var person1 = new Person();
console.log(person1.age); //19

刚才我们已经了解了new操作符生产的对象具备了一些特性。接下来，我们自己写一个方法实现这些功能。

我们依然根据特性来一步步实现new功能。

1. 是一个对象。

function myNew() {
    let ret = {};

    return ret;
}

现在我们返回了一个全新的对象。

2. 具备构造函数原型对象的属性。

function myNew() {
    const con = arguments[0];
    const params = [...arguments].splice(1);
    let ret = {};

    ret.__proto__ = con.prototype;

    return ret;
}

3. 具备构造函数中绑定的属性。

function myNew() {
    const con = arguments[0];
    const params = [...arguments].splice(1);
    let ret = {};

    ret.__proto__ = con.prototype;

    con.call(ret, ...params);

    return ret;
}

至此，我们已经完成了这三个特性的实现。最后，附上全部的测试代码。

function Person(sex) {
    this.age = 19;
    this.sex = sex;
}

Person.prototype.name = '张三'
var person2 = myNew(Person, "men");
console.log({ name: person2.name, age: person2.age, sex: person2.sex }); //{name: "张三", age: 19, sex: "men"}


function myNew() {
    const con = arguments[0];
    const params = [...arguments].splice(1);
    let ret = {};

    ret.__proto__ = con.prototype;

    con.call(ret, ...params);

    return ret;
}

浅陋见识，不足之处，请大神指正。

相关推荐