構(gòu)造函數(shù)

在介紹new之前，必須要知道什么是構(gòu)造函數(shù)。

構(gòu)造函數(shù)和普通函數(shù)在寫(xiě)法上沒(méi)有任何區(qū)別，當(dāng)一個(gè)函數(shù)通過(guò)new Fun()調(diào)用時(shí)，就叫做構(gòu)造函數(shù)，構(gòu)造函數(shù)首字母通常大寫(xiě)。

function User(name) {
    this.name = name;
}

let u = new User('leo');

這里，User就是構(gòu)造函數(shù)，當(dāng)然你也可以直接調(diào)用User()，但是這樣就起不到創(chuàng)建實(shí)例的作用，在非嚴(yán)格模式下，會(huì)把name屬性掛在window上。

new 操作符

那么new操作符到底做了什么事情呢，可以創(chuàng)建出一個(gè)實(shí)例？

new運(yùn)算符創(chuàng)建一個(gè)用戶定義的對(duì)象類型的實(shí)例或具有構(gòu)造函數(shù)的內(nèi)置對(duì)象的實(shí)例。new關(guān)鍵字會(huì)進(jìn)行如下的操作：

1.創(chuàng)建一個(gè)空的簡(jiǎn)單JavaScript對(duì)象（即**{}**）；

2.鏈接該對(duì)象（即設(shè)置該對(duì)象的構(gòu)造函數(shù)）到另一個(gè)對(duì)象 ；

3.將步驟1新創(chuàng)建的對(duì)象作為**this**的上下文 ；

4.如果該函數(shù)沒(méi)有返回對(duì)象，則返回**this**。

以上引用自new 操作符 - MDN

可能第 2、4 步大家看的不是很明白，這里我重新總結(jié)一下這 4 個(gè)步驟：

1.創(chuàng)建一個(gè)空對(duì)象u = {}

2.綁定原型，u.__proto__ = User.prototype

3.調(diào)用User()函數(shù)，并把空對(duì)象u當(dāng)做this傳入，即User.call(u)

4.如果User()函數(shù)執(zhí)行完自己return一個(gè)object類型，那么返回此變量，否則返回this，注意：如果構(gòu)造函數(shù)返回基本類型值，則不影響，還是返回this

自己實(shí)現(xiàn)一個(gè) new

知道了new操作符的原理，下面我們自己來(lái)實(shí)現(xiàn)一個(gè)FakeNew函數(shù)。

function FakeNew() {
    let obj = {};
  
    // 將類數(shù)組 arguments 轉(zhuǎn)為數(shù)組，同時(shí)將第一個(gè)參數(shù)也就是構(gòu)造函數(shù) shift 出來(lái)
    let constructor = [].shift.apply(arguments);  

    // 綁定原型
    obj.__proto__ = constructor.prototype;    
  
    // 調(diào)用構(gòu)造函數(shù)，將 obj 當(dāng)做 this 傳入
    let res = Constructor.apply(obj, arguments);    

    // 返回
    return typeof res === 'object' ? res : obj;   
}

function User(name) {
    this.name = name;
}

User.prototype.getName = function() {
    return this.name;
}

let u = FakeNew(User, 'leo');
console.log(u);
console.log(u.getName());

相應(yīng)關(guān)鍵步驟的注釋已經(jīng)附在代碼里面了，這樣我們就實(shí)現(xiàn)了一個(gè)new操作，相信大家以后再看到new，會(huì)有一種通透的感覺(jué)了。

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

最新評(píng)論