1. 程式人生 > 實用技巧 >探索javascript中new操作符

探索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;
}

淺陋見識,不足之處,請大神指正。