JavaScript深入之new的模擬實現(xiàn)

tianlai 發(fā)布于2019-08-20 16:17 / 1680人閱讀

摘要：深入系列第十二篇，通過的模擬實現(xiàn)，帶大家揭開使用獲得構(gòu)造函數(shù)實例的真相一句話介紹運算符創(chuàng)建一個用戶定義的對象類型的實例或具有構(gòu)造函數(shù)的內(nèi)置對象類型之一也許有點難懂，我們在模擬之前，先看看實現(xiàn)了哪些功能。

JavaScript深入系列第十二篇，通過new的模擬實現(xiàn)，帶大家揭開使用new獲得構(gòu)造函數(shù)實例的真相

new

一句話介紹 new:

new 運算符創(chuàng)建一個用戶定義的對象類型的實例或具有構(gòu)造函數(shù)的內(nèi)置對象類型之一

也許有點難懂，我們在模擬 new 之前，先看看 new 實現(xiàn)了哪些功能。

舉個例子：

// Otaku 御宅族，簡稱宅
function Otaku (name, age) {
    this.name = name;
    this.age = age;

    this.habit = "Games";
}

// 因為缺乏鍛煉的緣故，身體強度讓人擔憂
Otaku.prototype.strength = 60;

Otaku.prototype.sayYourName = function () {
    console.log("I am " + this.name);
}

var person = new Otaku("Kevin", "18");

console.log(person.name) // Kevin
console.log(person.habit) // Games
console.log(person.strength) // 60

person.sayYourName(); // I am Kevin

從這個例子中，我們可以看到，實例 person 可以：

訪問到 Otaku 構(gòu)造函數(shù)里的屬性

訪問到 Otaku.prototype 中的屬性

接下來，我們可以嘗試著模擬一下了。

因為 new 是關(guān)鍵字，所以無法像 bind 函數(shù)一樣直接覆蓋，所以我們寫一個函數(shù)，命名為 objectFactory，來模擬 new 的效果。用的時候是這樣的：

function Otaku () {
    ……
}

// 使用 new
var person = new Otaku(……);
// 使用 objectFactory
var person = objectFactory(Otaku, ……)

初步實現(xiàn)

分析：

因為 new 的結(jié)果是一個新對象，所以在模擬實現(xiàn)的時候，我們也要建立一個新對象，假設(shè)這個對象叫 obj，因為 obj 會具有 Otaku 構(gòu)造函數(shù)里的屬性，想想經(jīng)典繼承的例子，我們可以使用 Otaku.apply(obj, arguments)來給 obj 添加新的屬性。

在 JavaScript 深入系列第一篇中，我們便講了原型與原型鏈，我們知道實例的 __proto__ 屬性會指向構(gòu)造函數(shù)的 prototype，也正是因為建立起這樣的關(guān)系，實例可以訪問原型上的屬性。

現(xiàn)在，我們可以嘗試著寫第一版了：

// 第一版代碼
function objectFactory() {

    var obj = new Object(),

    Constructor = [].shift.call(arguments);

    obj.__proto__ = Constructor.prototype;

    Constructor.apply(obj, arguments);

    return obj;

};

在這一版中，我們：

用new Object() 的方式新建了一個對象 obj

取出第一個參數(shù)，就是我們要傳入的構(gòu)造函數(shù)。此外因為 shift 會修改原數(shù)組，所以 arguments 會被去除第一個參數(shù)

將 obj 的原型指向構(gòu)造函數(shù)，這樣 obj 就可以訪問到構(gòu)造函數(shù)原型中的屬性

使用 apply，改變構(gòu)造函數(shù) this 的指向到新建的對象，這樣 obj 就可以訪問到構(gòu)造函數(shù)中的屬性

返回 obj

更多關(guān)于：

原型與原型鏈，可以看《JavaScript深入之從原型到原型鏈》

apply，可以看《JavaScript深入之call和apply的模擬實現(xiàn)》

經(jīng)典繼承，可以看《JavaScript深入之繼承》

復制以下的代碼，到瀏覽器中，我們可以做一下測試：

function Otaku (name, age) {
    this.name = name;
    this.age = age;

    this.habit = "Games";
}

Otaku.prototype.strength = 60;

Otaku.prototype.sayYourName = function () {
    console.log("I am " + this.name);
}

function objectFactory() {
    var obj = new Object(),
    Constructor = [].shift.call(arguments);
    obj.__proto__ = Constructor.prototype;
    Constructor.apply(obj, arguments);
    return obj;
};

var person = objectFactory(Otaku, "Kevin", "18")

console.log(person.name) // Kevin
console.log(person.habit) // Games
console.log(person.strength) // 60

person.sayYourName(); // I am Kevin

[]~(￣▽￣)~**

返回值效果實現(xiàn)

接下來我們再來看一種情況，假如構(gòu)造函數(shù)有返回值，舉個例子：

function Otaku (name, age) {
    this.strength = 60;
    this.age = age;

    return {
        name: name,
        habit: "Games"
    }
}

var person = new Otaku("Kevin", "18");

console.log(person.name) // Kevin
console.log(person.habit) // Games
console.log(person.strength) // undefined
console.log(person.age) // undefined

在這個例子中，構(gòu)造函數(shù)返回了一個對象，在實例 person 中只能訪問返回的對象中的屬性。

而且還要注意一點，在這里我們是返回了一個對象，假如我們只是返回一個基本類型的值呢？

再舉個例子：

function Otaku (name, age) {
    this.strength = 60;
    this.age = age;

    return "handsome boy";
}

var person = new Otaku("Kevin", "18");

console.log(person.name) // undefined
console.log(person.habit) // undefined
console.log(person.strength) // 60
console.log(person.age) // 18

結(jié)果完全顛倒過來，這次盡管有返回值，但是相當于沒有返回值進行處理。

所以我們還需要判斷返回的值是不是一個對象，如果是一個對象，我們就返回這個對象，如果沒有，我們該返回什么就返回什么。

再來看第二版的代碼，也是最后一版的代碼：

// 第二版的代碼
function objectFactory() {

    var obj = new Object(),

    Constructor = [].shift.call(arguments);

    obj.__proto__ = Constructor.prototype;

    var ret = Constructor.apply(obj, arguments);

    return typeof ret === "object" ? ret : obj;

};

下一篇文章

JavaScript深入之類數(shù)組對象與arguments

相關(guān)鏈接

《JavaScript深入之從原型到原型鏈》

《JavaScript深入之call和apply的模擬實現(xiàn)》

《JavaScript深入之繼承》

深入系列

JavaScript深入系列目錄地址：https://github.com/mqyqingfeng/Blog。

JavaScript深入系列預計寫十五篇左右，旨在幫大家捋順JavaScript底層知識，重點講解如原型、作用域、執(zhí)行上下文、變量對象、this、閉包、按值傳遞、call、apply、bind、new、繼承等難點概念。

如果有錯誤或者不嚴謹?shù)牡胤剑垊毡亟o予指正，十分感謝。如果喜歡或者有所啟發(fā)，歡迎star，對作者也是一種鼓勵。

云服務器 GPU云服務器深入理解webrtc之a(chǎn)ec 深入javascript javascript深入深入學習javascript

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/82847.html

發(fā)表評論

登陸后可評論

0條評論

tianlai

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow1.14.0

閱讀 992·2023-04-25 19:40
怎么查看tensorflow版本

閱讀 3625·2023-04-25 17:41
#雙11#iON，美國VPS，$11.11/季，1核/2G內(nèi)存/50G SSD/2T流量/G口帶寬

閱讀 3086·2021-11-11 11:01
技本功丨呀~我不會寫CSS之vertical-align（上集）

閱讀 2787·2019-08-30 15:55
基于Node.js的大文件分片上傳

閱讀 3313·2019-08-30 15:44
基于vue項目的知識總結(jié)

閱讀 1489·2019-08-29 14:07
JQuery 對象與 DOM 對象

閱讀 572·2019-08-29 11:23
php閉合標簽輸出多余空行使xml頁面顯示錯誤的處理

閱讀 1406·2019-08-27 10:54

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JavaScript深入之new的模擬實現(xiàn)

相關(guān)文章

***JavaScript深入之bind的模擬實現(xiàn)***

JavaScript深入系列15篇正式完結(jié)！

JavaScript深入之繼承的多種方式和優(yōu)缺點

***JavaScript深入之call和apply的模擬實現(xiàn)***

JavaScript深入之創(chuàng)建對象的多種方式以及優(yōu)缺點

發(fā)表評論

0條評論

tianlai

男|高級講師

TA的文章

tensorflow1.14.0

怎么查看tensorflow版本

#雙11#iON，美國VPS，$11.11/季，1核/2G內(nèi)存/50G SSD/2T流量/G口帶寬

技本功丨呀~我不會寫CSS之vertical-align（上集）

基于Node.js的大文件分片上傳

基于vue項目的知識總結(jié)

JQuery 對象與 DOM 對象

php閉合標簽輸出多余空行使xml頁面顯示錯誤的處理

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JavaScript深入之new的模擬實現(xiàn)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！