前言

new 運(yùn)算符是我們在用構(gòu)造函數(shù)創(chuàng)建實(shí)例的時(shí)候使用的，本文來說一下 new 運(yùn)算符的執(zhí)行過程和如何自己實(shí)現(xiàn)一個(gè)類似 new 運(yùn)算符的函數(shù)。

new 運(yùn)算符的運(yùn)行過程

new 運(yùn)算符的主要目的就是為我們創(chuàng)建一個(gè)用戶定義的對象類型的實(shí)例或具有構(gòu)造函數(shù)的內(nèi)置對象的實(shí)例（比如箭頭函數(shù)就沒有構(gòu)造函數(shù)，所以是不能 new 的）。new 操作符的執(zhí)行大概有以下幾個(gè)步驟：

1. 創(chuàng)建一個(gè)新的空對象
2. 把新對象的 __proto__ 鏈接到構(gòu)造函數(shù)的 prototype 對象（每一個(gè)用戶定義函數(shù)都有一個(gè) prototype 屬性指向一個(gè)對象，該對象有一個(gè) constructor 屬性指向該函數(shù)），讓我們的公共屬性和方法可以從原型上繼承，不用每個(gè)實(shí)例都創(chuàng)建一次。
3. 將第一步創(chuàng)建的新的對象作為構(gòu)造函數(shù)的 this 的上下文，執(zhí)行構(gòu)造函數(shù)，構(gòu)造函數(shù)的執(zhí)行讓我們配置對象的私有屬性和方法。
4. 執(zhí)行構(gòu)造函數(shù)，如果構(gòu)造函數(shù)沒有返回值或者返回值不是一個(gè)對象，則返回 this。
   

我么可以用代碼簡單表示上面的邏輯：

function new_ (constr, ...rests) {
 var obj = {};
 obj.__proto__ = constr.prototype;
 var ret = constr.apply(obj, rests);
 return isPrimitive(ret) ? obj : ret; //判斷構(gòu)造函數(shù)的返回值是否為對象，不是則直接返回創(chuàng)建的obj對象
}

new 的實(shí)現(xiàn)

上面講了 new 運(yùn)算符的執(zhí)行過程，下面我們來自己動(dòng)手實(shí)現(xiàn)一個(gè) new 運(yùn)算符。

function new_(constr, ...rests) {
 if (typeof constr !== "function") {
 throw "the first param must be a function";
 }
 new_.target = constr;
 var obj = Object.create(constr.prototype);
 var ret = constr.apply(obj, rests);
 var isObj = typeof ret !== null && typeof ret === "object";
 var isFun = typeof ret === "function";
 //var isObj = typeof ret === "function" || typeof ret === "object" && !!ret;
 if (isObj || isFun) {
 return ret;
 }
 return obj;
}

function Person(name, age) {
 this.name = name;
 this.age = age;
}
Person.prototype.say = function () {
 console.log(this.name);
};
var p1 = new_(Person, 'clloz', '28')
var p2 = new_(Person, 'csx', '31')
console.log(p1); //Person {name: "clloz", age: "28"}
p1.say(); //clloz
console.log(p2); //Person {name: "csx", age: "31"}
p2.say(); //csx

console.log(p1.__proto__ === Person.prototype); //true
console.log(p2.__proto__ === Person.prototype); //true

以上就是一個(gè)簡單的 new 實(shí)現(xiàn)，判斷是否為對象那里可能不是很嚴(yán)謹(jǐn)，不過沒有想到更好的方法。

一個(gè)小補(bǔ)充，在 mdn 的 Function.prototype.apply() 詞條中看到的直接把方法寫到 Function.prototype 上，也是個(gè)不錯(cuò)的思路，Function.prototype 在所以函數(shù)的原型鏈上，所以這個(gè)方法可以在每個(gè)函數(shù)上調(diào)用，方法內(nèi)部的 this 也是指向調(diào)用方法的函數(shù)的。

Function.prototype.construct = function (aArgs) {
 var oNew = Object.create(this.prototype);
 this.apply(oNew, aArgs);
 return oNew;
};

強(qiáng)制用 new 調(diào)用構(gòu)造函數(shù)

function Clloz(...arguments) {
 if (!(this instanceof Clloz)) {
 return new Clloz(...arguments)
 }
}

Tips

補(bǔ)充兩個(gè)關(guān)于 new 運(yùn)算符的知識點(diǎn)。

1. 上面提到 new 的執(zhí)行過程的最后一步，如果構(gòu)造函數(shù)沒有返回值或者返回值不是一個(gè)對象，則返回 this。但是如果返回的是一個(gè) null 的話，依然返回 this，雖然 null 也算是 object。
2. new 操作符后面的構(gòu)造函數(shù)可以帶括號也可以不帶括號，除了帶括號可以傳遞參數(shù)以外，還有一個(gè)重要的點(diǎn)是兩種用法的運(yùn)算符優(yōu)先級不一樣，在JS運(yùn)算符優(yōu)先級這篇文章中有提到，帶參數(shù)的 new 操作符的優(yōu)先級是比不帶參數(shù)的要高的，new Foo() > Foo() > new Foo。

一般不太會(huì)遇到，可能有些題目會(huì)問這些問題。

以上就是詳解JavaScript中new操作符的解析和實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于JavaScript new解析和實(shí)現(xiàn)的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論