這篇文章主要介紹“怎么理解JavaScript中的對象和原型鏈、函數繼承”，在日常操作中，相信很多人在怎么理解JavaScript中的對象和原型鏈、函數繼承問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么理解JavaScript中的對象和原型鏈、函數繼承”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

1、 JavaScript中的對象

JavaScript可以說是一個基于對象的編程語言，為什么說是基于對象而不是面向對象，因為JavaScript自身只實現了封裝，而沒有實現繼承和多態(tài)。既然他是基于對象的，那么我們就來說說js中的對象。有人說js中所有的都是對象，這句話不完全正確。正確的一方是他強調了對象在js中的重要性，對象在js中無處不在，包括可以構造對象的函數本身也是對象。但是另一方面，js中也有一些簡單的數據類型，包括數字、字符串和布爾值、 null值和undefined值，而這些不是對象。那為什么這些類型的值不是對象呢，畢竟他們也有方法。那讓我們來看一下，JavaScript中對于對象的定義，有兩種定義。

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

(2)JavaScript中的對象是無序(unordered)的屬性集合，這些屬性可以含有簡單的數據類型、對象、函數;保存在一個對象屬性中的函數也被稱為這個對象的方法。 (來自ECMA-262 的4.3.3)(注:這里所說的屬性是可以在js腳本中創(chuàng)建和訪問的(我們稱之為顯性屬性)，不包括系統(tǒng)為對象自動分配的內部屬性)

那為什么那個簡單的數據類型不是對象呢，主要是因為這些數據類型的值中擁有的方法是不可變的，而一個對象的屬性是應當可以被改變的。

2、 對象中的原型鏈[[proto]]

JavaScript中的每個對象創(chuàng)建的時候系統(tǒng)都會自動為其分配一個原型屬性[[proto]]，用來連接到他的原型對象。在 JavaScript中就是通過每個對象中的[[proto]]來實現對象的繼承關系的。但是對象的[[proto]]屬性在JavaScript是不能訪問和修改的，他是作為一個內部的屬性存在的，而且是在對象被創(chuàng)建的同時由系統(tǒng)自動設定的。

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

3、 函數也是對象

JavaScript中的函數本身就是一個對象(所以我們經常稱之為函數對象)，而且可以說他是js中最重要的對象。之所以稱之為最重要的對象，一方面他可以扮演像其他語言中的函數同樣的角色，可以被調用，可以被傳入參數;另一方面他還被作為對象的構造器(constructor)來使用，可以結合new操作符來創(chuàng)建對象。

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

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

this.prototype = {constructor:this}

具體內容可以參加老道的那本書的第五章。這個函數對象的prototype屬性也是為了js把函數當做構造器來實現繼承是準備的，但是這個屬性是可以在js腳本中訪問和修改的。在這里要強調的一點是，大家一定要區(qū)分對象中的[[proto]]屬性和函數對象中的prototype屬性，我在剛開始學習的時候就是因為沒有很好的區(qū)分這兩個東西，走了很多的彎路。

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

在js中有兩種創(chuàng)建對象的方法，一種是通過字面量來實現，如

var Person = {

“first_name”:’liang’,

‘last_name’:’yang’

}

另一種方法是通過構造器來創(chuàng)建

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

其實第一種方式的創(chuàng)建過程相當于調用Object構造器來實現，如下。

var Person = new Object();

Person.first_name = ‘liang’;

Person.last_name = ‘yang’

所以我們可以把js中所有對象的創(chuàng)建都合并到使用構造器來實現，下面我么來詳細說明構造器創(chuàng)建對象的過程：

第一步，先創(chuàng)建一個空的對象(既沒有任何屬性)，并將這個對象的[[proto]]指向這個構造器函數的prototype屬性對象

第二步，將這個空的對象作為this指針傳給構造器函數并執(zhí)行

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

第四步，把函數當做一個類來使用

由上面的步驟我們可以看出，一般來說函數對象的prototype指向的是一個普通對象，而不是一個函數對象，這個普通對象中的屬在由此函數構造器創(chuàng)建的對象中也可以訪問。由此可以如此設計我們的代碼，假設一個函數就可以代表一個類，這個構造器函數生成的對象就是這個類的實例對象，那么實例對象中應有的屬性和方法應該放在這個構造器函數的prototype中，這個類的靜態(tài)方法就可以直接放到這個函數作為對象的屬性中，最后這個函數體就是我們平時在面向對象語言中所說的構造函數(在這里我們要區(qū)分連個詞“構造函數”和“構造器函數”，所謂構造函數是指普通的面向對象語言中的類的構造函數，而構造器函數是指javascript中的一個函數被當做構造器使用)。

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

5、 函數繼承(類繼承)

說了這么多，終于到了我們可以在javascript中討論繼承的時候了，我們先來考慮一下要實現類的繼承我們都要做些什么，假設我們要從 superClass繼承到子類subClass

為了使得由subClass生成的對象中能夠訪問superClass生成的對象中的屬性，那么可以使subClass.prototype為一個superClass構造函數生成的對象。

subclass.prototye = new superClass();

但是問題來了,根據我們在第4節(jié)說的new superClass()不僅復制了superClass.prototype中的所有方法，而且還運行了superClass()這個函數，這個函數起到的作用是類中的構造函數。我們知道應該在子類的構造函數中調用父類的構造函數來實現初始化。為此我們可以創(chuàng)建一個構造函數為空的，但是原型和 superClass原型一致的函數，并使subClass.prototype指向這個函數生成的對象。

var F = function()　{};

F.prototype = superClass.prototype;

subClass.protptype = new F();

這樣我們就可以再不調用構造函數的同時完成屬性復制的工作。但是還有一個問題，那就是我們修改了subClass的prototype屬性，從而也就刪除了其中的constructor屬性，這樣我們就無法知道他是哪個構造器函數生成的對象了。我們可以再次給他賦值

subClass.prototype.constructor = subClass;

這樣復制屬性的問題就迎刃而解了。但是新的問題又出現了，在subClass中我們無法知道他的父類是哪個構造器函數，所以就無法在構造函數中調用父類的構造函數，為此我們可以為subClass添加一個屬性，指明他的父類

subClass.superClass = superClass.prototype;

這樣我么就可以在子類的構造函數中使用subClass.superClass.constructor來訪問父類的構造函數了。最后我們把以上的思路寫成一個函數

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;

}

到此，關于“怎么理解JavaScript中的對象和原型鏈、函數繼承”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯網站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
分享標題：怎么理解JavaScript中的對象和原型鏈、函數繼承-創(chuàng)新互聯
本文鏈接：http://weahome.cn/article/iieoo.html