前言

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è)步驟：

創(chuàng)建一個(gè)新的空對象 把新對象的 __proto__ 鏈接到構(gòu)造函數(shù)的 prototype 對象（每一個(gè)用戶定義函數(shù)都有一個(gè) prototype 屬性指向一個(gè)對象，該對象有一個(gè) constructor 屬性指向該函數(shù)），讓我們的公共屬性和方法可以從原型上繼承，不用每個(gè)實(shí)例都創(chuàng)建一次。 將第一步創(chuàng)建的新的對象作為構(gòu)造函數(shù)的 this 的上下文，執(zhí)行構(gòu)造函數(shù)，構(gòu)造函數(shù)的執(zhí)行讓我們配置對象的私有屬性和方法。 執(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(); //cllozconsole.log(p2); //Person {name: 'csx', age: '31'}p2.say(); //csxconsole.log(p1.__proto__ === Person.prototype); //trueconsole.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ò)的思路，F(xiàn)unction.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)。

上面提到 new 的執(zhí)行過程的最后一步，如果構(gòu)造函數(shù)沒有返回值或者返回值不是一個(gè)對象，則返回 this。但是如果返回的是一個(gè) null 的話，依然返回 this，雖然 null 也算是 object。 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)注好吧啦網(wǎng)其它相關(guān)文章！