這篇文章主要介紹“怎么理解JavaScript中的對(duì)象和原型鏈、函數(shù)繼承”，在日常操作中，相信很多人在怎么理解JavaScript中的對(duì)象和原型鏈、函數(shù)繼承問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么理解JavaScript中的對(duì)象和原型鏈、函數(shù)繼承”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

我們一直強(qiáng)調(diào)網(wǎng)站建設(shè)、網(wǎng)站制作對(duì)于企業(yè)的重要性,如果您也覺(jué)得重要,那么就需要我們慎重對(duì)待,選擇一個(gè)安全靠譜的網(wǎng)站建設(shè)公司,企業(yè)網(wǎng)站我們建議是要么不做，要么就做好,讓網(wǎng)站能真正成為企業(yè)發(fā)展過(guò)程中的有力推手。專(zhuān)業(yè)網(wǎng)站制作公司不一定是大公司,創(chuàng)新互聯(lián)建站作為專(zhuān)業(yè)的網(wǎng)絡(luò)公司選擇我們就是放心。

1、 JavaScript中的對(duì)象

JavaScript可以說(shuō)是一個(gè)基于對(duì)象的編程語(yǔ)言，為什么說(shuō)是基于對(duì)象而不是面向?qū)ο螅驗(yàn)镴avaScript自身只實(shí)現(xiàn)了封裝，而沒(méi)有實(shí)現(xiàn)繼承和多態(tài)。既然他是基于對(duì)象的，那么我們就來(lái)說(shuō)說(shuō)js中的對(duì)象。有人說(shuō)js中所有的都是對(duì)象，這句話(huà)不完全正確。正確的一方是他強(qiáng)調(diào)了對(duì)象在js中的重要性，對(duì)象在js中無(wú)處不在，包括可以構(gòu)造對(duì)象的函數(shù)本身也是對(duì)象。但是另一方面，js中也有一些簡(jiǎn)單的數(shù)據(jù)類(lèi)型，包括數(shù)字、字符串和布爾值、 null值和undefined值，而這些不是對(duì)象。那為什么這些類(lèi)型的值不是對(duì)象呢，畢竟他們也有方法。那讓我們來(lái)看一下，JavaScript中對(duì)于對(duì)象的定義，有兩種定義。

(1)JavaScript中的對(duì)象是可變的鍵控集合(keyed collections) (此定義來(lái)自老道的那本書(shū)的第三章)

(2)JavaScript中的對(duì)象是無(wú)序(unordered)的屬性集合，這些屬性可以含有簡(jiǎn)單的數(shù)據(jù)類(lèi)型、對(duì)象、函數(shù);保存在一個(gè)對(duì)象屬性中的函數(shù)也被稱(chēng)為這個(gè)對(duì)象的方法。 (來(lái)自ECMA-262 的4.3.3)(注:這里所說(shuō)的屬性是可以在js腳本中創(chuàng)建和訪(fǎng)問(wèn)的(我們稱(chēng)之為顯性屬性)，不包括系統(tǒng)為對(duì)象自動(dòng)分配的內(nèi)部屬性)

那為什么那個(gè)簡(jiǎn)單的數(shù)據(jù)類(lèi)型不是對(duì)象呢，主要是因?yàn)檫@些數(shù)據(jù)類(lèi)型的值中擁有的方法是不可變的，而一個(gè)對(duì)象的屬性是應(yīng)當(dāng)可以被改變的。

2、 對(duì)象中的原型鏈[[proto]]

JavaScript中的每個(gè)對(duì)象創(chuàng)建的時(shí)候系統(tǒng)都會(huì)自動(dòng)為其分配一個(gè)原型屬性[[proto]]，用來(lái)連接到他的原型對(duì)象。在 JavaScript中就是通過(guò)每個(gè)對(duì)象中的[[proto]]來(lái)實(shí)現(xiàn)對(duì)象的繼承關(guān)系的。但是對(duì)象的[[proto]]屬性在JavaScript是不能訪(fǎng)問(wèn)和修改的，他是作為一個(gè)內(nèi)部的屬性存在的，而且是在對(duì)象被創(chuàng)建的同時(shí)由系統(tǒng)自動(dòng)設(shè)定的。

當(dāng)訪(fǎng)問(wèn)一個(gè)對(duì)象的某一屬性，如果這個(gè)屬性在此對(duì)象中不存在，就在他的[[proto]]所指的原型對(duì)象的屬性中尋找，如果找到則返回，否則繼續(xù)沿著[[proto]]鏈一直找下去，直到[[proto]]的連接為null的時(shí)候停止。

3、 函數(shù)也是對(duì)象

JavaScript中的函數(shù)本身就是一個(gè)對(duì)象(所以我們經(jīng)常稱(chēng)之為函數(shù)對(duì)象)，而且可以說(shuō)他是js中最重要的對(duì)象。之所以稱(chēng)之為最重要的對(duì)象，一方面他可以扮演像其他語(yǔ)言中的函數(shù)同樣的角色，可以被調(diào)用，可以被傳入?yún)?shù);另一方面他還被作為對(duì)象的構(gòu)造器(constructor)來(lái)使用，可以結(jié)合new操作符來(lái)創(chuàng)建對(duì)象。

既然函數(shù)就是對(duì)象，所以必然含有對(duì)象擁有的全部性質(zhì)，包括對(duì)象在創(chuàng)建時(shí)設(shè)定的原型鏈[[proto]]屬性。

讓我們來(lái)看看函數(shù)對(duì)象和普通對(duì)象有什么區(qū)別。我們前面說(shuō)過(guò)，對(duì)象就是無(wú)序的屬性集合，那么函數(shù)的屬性和普通對(duì)象的屬性有什么不同呢。根據(jù) ECMA-262中的13.2節(jié)所述，在函數(shù)對(duì)象創(chuàng)建時(shí)，系統(tǒng)會(huì)默認(rèn)為其創(chuàng)建兩個(gè)屬性[[call]]和[[constructor]]，當(dāng)函數(shù)對(duì)象被當(dāng)做一個(gè)普通函數(shù)調(diào)用的時(shí)候(例如myFunc())，“()”操作符指明函數(shù)對(duì)象的[[call]]屬性就被執(zhí)行，當(dāng)他被當(dāng)做一個(gè)構(gòu)造器被調(diào)用的時(shí)候(例如new myConst())，他的[[constructor]]屬性就被執(zhí)行，[[cosntructor]]的執(zhí)行過(guò)程我們將在下一節(jié)中介紹。除此之外，當(dāng)一個(gè)函數(shù)被創(chuàng)建時(shí)，系統(tǒng)會(huì)默認(rèn)的再為其創(chuàng)建一個(gè)顯示屬性prototype，并為其賦值為

this.prototype = {constructor:this}

具體內(nèi)容可以參加老道的那本書(shū)的第五章。這個(gè)函數(shù)對(duì)象的prototype屬性也是為了js把函數(shù)當(dāng)做構(gòu)造器來(lái)實(shí)現(xiàn)繼承是準(zhǔn)備的，但是這個(gè)屬性是可以在js腳本中訪(fǎng)問(wèn)和修改的。在這里要強(qiáng)調(diào)的一點(diǎn)是，大家一定要區(qū)分對(duì)象中的[[proto]]屬性和函數(shù)對(duì)象中的prototype屬性，我在剛開(kāi)始學(xué)習(xí)的時(shí)候就是因?yàn)闆](méi)有很好的區(qū)分這兩個(gè)東西，走了很多的彎路。

4、 對(duì)象的創(chuàng)建

在js中有兩種創(chuàng)建對(duì)象的方法，一種是通過(guò)字面量來(lái)實(shí)現(xiàn)，如

var Person = {

“first_name”:’liang’,

‘last_name’:’yang’

}

另一種方法是通過(guò)構(gòu)造器來(lái)創(chuàng)建

var my = new Person(‘liang’,’yang’);

其實(shí)第一種方式的創(chuàng)建過(guò)程相當(dāng)于調(diào)用Object構(gòu)造器來(lái)實(shí)現(xiàn)，如下。

var Person = new Object();

Person.first_name = ‘liang’;

Person.last_name = ‘yang’

所以我們可以把js中所有對(duì)象的創(chuàng)建都合并到使用構(gòu)造器來(lái)實(shí)現(xiàn)，下面我么來(lái)詳細(xì)說(shuō)明構(gòu)造器創(chuàng)建對(duì)象的過(guò)程：

第一步，先創(chuàng)建一個(gè)空的對(duì)象(既沒(méi)有任何屬性)，并將這個(gè)對(duì)象的[[proto]]指向這個(gè)構(gòu)造器函數(shù)的prototype屬性對(duì)象

第二步，將這個(gè)空的對(duì)象作為this指針傳給構(gòu)造器函數(shù)并執(zhí)行

第三步，如果上面的函數(shù)返回一個(gè)對(duì)象，則返回這個(gè)對(duì)象，否則返回第一步創(chuàng)建的對(duì)象

第四步，把函數(shù)當(dāng)做一個(gè)類(lèi)來(lái)使用

由上面的步驟我們可以看出，一般來(lái)說(shuō)函數(shù)對(duì)象的prototype指向的是一個(gè)普通對(duì)象，而不是一個(gè)函數(shù)對(duì)象，這個(gè)普通對(duì)象中的屬在由此函數(shù)構(gòu)造器創(chuàng)建的對(duì)象中也可以訪(fǎng)問(wèn)。由此可以如此設(shè)計(jì)我們的代碼，假設(shè)一個(gè)函數(shù)就可以代表一個(gè)類(lèi)，這個(gè)構(gòu)造器函數(shù)生成的對(duì)象就是這個(gè)類(lèi)的實(shí)例對(duì)象，那么實(shí)例對(duì)象中應(yīng)有的屬性和方法應(yīng)該放在這個(gè)構(gòu)造器函數(shù)的prototype中，這個(gè)類(lèi)的靜態(tài)方法就可以直接放到這個(gè)函數(shù)作為對(duì)象的屬性中，最后這個(gè)函數(shù)體就是我們平時(shí)在面向?qū)ο笳Z(yǔ)言中所說(shuō)的構(gòu)造函數(shù)(在這里我們要區(qū)分連個(gè)詞“構(gòu)造函數(shù)”和“構(gòu)造器函數(shù)”，所謂構(gòu)造函數(shù)是指普通的面向?qū)ο笳Z(yǔ)言中的類(lèi)的構(gòu)造函數(shù)，而構(gòu)造器函數(shù)是指javascript中的一個(gè)函數(shù)被當(dāng)做構(gòu)造器使用)。

在第3節(jié)我們說(shuō)過(guò)每個(gè)函數(shù)的prototype對(duì)象中總是含有一個(gè)constructor屬性，這個(gè)屬性就是連接到我們的這個(gè)函數(shù)本身。再加之，有這個(gè)函數(shù)生成的每個(gè)對(duì)象的[[proto]]屬性都是指向構(gòu)造器函數(shù)的prototype對(duì)象，所以通過(guò)[[proto]]鏈，每個(gè)由構(gòu)造器函數(shù)生成的對(duì)象，都有一個(gè)constructor屬性，指向生成他的構(gòu)造器函數(shù)，因此我們可以通過(guò)這個(gè)屬性來(lái)判斷這個(gè)對(duì)象是有哪個(gè)構(gòu)造器函數(shù)生成的。

5、 函數(shù)繼承(類(lèi)繼承)

說(shuō)了這么多，終于到了我們可以在javascript中討論繼承的時(shí)候了，我們先來(lái)考慮一下要實(shí)現(xiàn)類(lèi)的繼承我們都要做些什么，假設(shè)我們要從 superClass繼承到子類(lèi)subClass

為了使得由subClass生成的對(duì)象中能夠訪(fǎng)問(wèn)superClass生成的對(duì)象中的屬性，那么可以使subClass.prototype為一個(gè)superClass構(gòu)造函數(shù)生成的對(duì)象。

subclass.prototye = new superClass();

但是問(wèn)題來(lái)了,根據(jù)我們?cè)诘?節(jié)說(shuō)的new superClass()不僅復(fù)制了superClass.prototype中的所有方法，而且還運(yùn)行了superClass()這個(gè)函數(shù)，這個(gè)函數(shù)起到的作用是類(lèi)中的構(gòu)造函數(shù)。我們知道應(yīng)該在子類(lèi)的構(gòu)造函數(shù)中調(diào)用父類(lèi)的構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)初始化。為此我們可以創(chuàng)建一個(gè)構(gòu)造函數(shù)為空的，但是原型和 superClass原型一致的函數(shù)，并使subClass.prototype指向這個(gè)函數(shù)生成的對(duì)象。

var F = function()　{};

F.prototype = superClass.prototype;

subClass.protptype = new F();

這樣我們就可以再不調(diào)用構(gòu)造函數(shù)的同時(shí)完成屬性復(fù)制的工作。但是還有一個(gè)問(wèn)題，那就是我們修改了subClass的prototype屬性，從而也就刪除了其中的constructor屬性，這樣我們就無(wú)法知道他是哪個(gè)構(gòu)造器函數(shù)生成的對(duì)象了。我們可以再次給他賦值

subClass.prototype.constructor = subClass;

這樣復(fù)制屬性的問(wèn)題就迎刃而解了。但是新的問(wèn)題又出現(xiàn)了，在subClass中我們無(wú)法知道他的父類(lèi)是哪個(gè)構(gòu)造器函數(shù)，所以就無(wú)法在構(gòu)造函數(shù)中調(diào)用父類(lèi)的構(gòu)造函數(shù)，為此我們可以為subClass添加一個(gè)屬性，指明他的父類(lèi)

subClass.superClass = superClass.prototype;

這樣我么就可以在子類(lèi)的構(gòu)造函數(shù)中使用subClass.superClass.constructor來(lái)訪(fǎng)問(wèn)父類(lèi)的構(gòu)造函數(shù)了。最后我們把以上的思路寫(xiě)成一個(gè)函數(shù)

myPro.extend = function (subClass,superClass) {

var F = function()　{};

F.prototype = superClass.prototype;

subClass.protptype = new F();

subClass.prototype.constructor = subClass;

subClass.superClass = superClass.prototype;

superClass.prototype.constructor = superClass;

}

到此，關(guān)于“怎么理解JavaScript中的對(duì)象和原型鏈、函數(shù)繼承”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

當(dāng)前文章：怎么理解JavaScript中的對(duì)象和原型鏈、函數(shù)繼承-創(chuàng)新互聯(lián)
瀏覽路徑：http://m.rwnh.cn/article0/iieoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、面包屑導(dǎo)航、企業(yè)網(wǎng)站制作、網(wǎng)站維護(hù)、用戶(hù)體驗(yàn)、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)