怎么理解Javascript中原型屬性

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

　　1、 理解指針

　　要理解JAVASCRIPT中的原型，先理解指針，在C/C++中，會提到指針，其實，指針不應該屬于C/C++的專利，上篇文章中，提到的引用類型(也是很多面向對象語言中的數據類型的叫法)，就是指針。

　　C/C++中對指針的解釋：指針就是地址。地址為何物?

　　地址：是計算機對內存每個存儲單元的管理方式。在計算機的內存中，存儲著若干數據，計算機的CPU是如何讀取內存中的數據的?

　　計算機的每個存儲單元都有一個編號，就像到超市存包時，每個存包的格子都有一個編號，這個編號就是地址，內存的地址。超市每個格子為什么要有編號，目的就是為了方便服務員進行查找(根據編號進行查找)，計算機每個存儲單元為什么會有一個編號，目的也是為了CPU查找內存。

01

　　如果某個內存中直接存儲的是數據，則這種數據是基本類型的數據，如果某個內存中存儲的是其它內存的編號(數據)，那么這種數據就叫引用類型的數據。

　　2、 理解原型

　　a) 原型(屬性)的概念

　　JAVASCRIPT中的函數也是對象(如果不懂函數也是個對象，請百度JAVASCRIPT中函數是功能完整的類)，每個函數都有一個原型(prototype)屬性，這個屬性是指針類型。原型屬性是對象類型，所以，也可以叫原型對象，原型就是模子，模型。函數何來原型，其實理解原型(模型)更應該用構造函數來理解會更好。

　　構造函數是用來構造實例的，每次用new運算符調用構造函數產生一個實例時，模型就會起作用。就像我們要造一個塑料制品(如：杯子，電腦顯示器的外殼，打印機的外殼等)，都有一個模具，只要是同一個模具做出來的物體，都非常相似。所以，百度上對模具的解釋：模具的俗稱。常用于比喻具有大量相似點的兩個或多個人或者事物。

　　b) 原型模式創建對象(把構造函數和原型模式合在一起)

　　用同一個構造函數構造的實例，具有很多的共同點(共同的屬性或者函數)，這些共同點就是很多書籍描述的“所有實例共享的屬性和方法”。這些共同點就是用prototype屬性進行維護的。具體的做法就是：所有實例共享的屬性和方法用prototype屬性進行表示。

　　如：

　　function Person(id,name,sex){

　　//在構造函數里寫的是每個實例特有的屬性(屬性值不一樣)

　　this.id =id;

　　this.name = name;

　　this.sex = sex;

　　}

　　//所有人的國籍都是中國，國籍屬性就用prototype來表示

　　Person.prototype.country = “中國”;

　　//所有人吃的邏輯都一樣。所以，吃的函數也用prototype來表示

　　Person.Prototype.eat = function(str){

　　alert(this.name+”在吃”+str+”，天在看……”);

　　}

　　var p1 = new Person(“007”, “樂樂”, “女”);

　　var p2 = new Person(“008”, “寶寶”, “男”);

　　Console.log(p1.country);//中國

　　Console.log(p2.country); //中國

　　p1和p2兩個實例的country屬性值都是中國，因為它們兩個是一個構造函數實例化出來的(一個模子“刻”出來的)。

　　如下是示意圖，其中帶箭頭的線表示指向。

02

　　圖中可以看出：

　　1)、在Person構造函數的prototype屬性中有個constructor屬性，指向了構造函數本身。constructor屬性到底有何用，大家先把它save到大腦中，后面給大家講解。

　　2)、兩個實例p1和p2指向了Person構造函數的prototype屬性，跟Person構造函數沒有直接關系。

　　3)、兩個實例p1和p2都有[[prototype]]屬性。實例靠著 [[prototype]]屬性找到它所對應構造函數的原型，也是靠它來找到，原型中的屬性的。注意， [[prototype]]屬性不能直接在代碼中使用。

　　c) 原型(類型的)屬性和實例(類型的)屬性

　　每個實例特有的屬性和方法存放在實例所在內存區域，也叫實例屬性，如以上例中的id，name，sex屬性。所有實例共享的屬性和方法，都在原型(prototype)對應的內存區域，也叫原型的屬性，如上例中的country。

　　i. 原型(類型的)屬性變成實例(類型的)屬性

　　這里有點疑惑，隨著時間的推移，有的對象的原型屬性的值會發生變化?

　　如：寶寶年輕時，覺得俄羅斯的美女多，決定定居俄羅斯了。即p2的country(國籍)的值為俄羅斯。那該如何是好，改還是不改?改了會不會影響其它對象的country屬性的值。不改，又不能滿足需求。看來，JAVASCRIPT在這方面還是考慮到了。可以改，而且不會影響其它對象的屬性值。

　　還有，如果出現了實例屬性和原型屬性重名的情況，用實例來訪問該屬性時，到底訪問的是實例屬性還是原型屬性。這個JAVASCRIPT中解決了。

　　如何解決上面的問題的。在JAVASCRIPT中，當給原型屬性賦值時，在對應實例中會增加了一個同名的實例屬性，然后把值賦給實例屬性，而原型屬性的值不受影響。當訪問該屬性時，先在實例屬性中尋找，如果找不到，再在原型屬性中找。

　　如以下代碼：

　　P2.country = “俄羅斯”;

　　執行時，內存會變成如下：

03

　　在p2的實例中增加一個country實例屬性，內容為“俄羅斯”(圖中紅色的框里)。這樣，代碼p1.country依然去找實例屬性的值“中國”。而p2.country先在實例屬性中找country，找到了，就不用去原型屬性中去找了。即，當實例訪問屬性時，會先在實例的內存中去尋找，如果找不到就會到原型的內存中去尋找。

　　ii. 刪除實例(類型的)屬性

　　隨著寶寶年齡的增長，對美女沒有了興趣，而且覺得還是在自己的國家好，又想回來。即p2.country的值為”中國”，這時候是可以利用原型里的屬性值，怎么辦?沒事，使用delete p2.country就會把p2的實例屬性country刪除掉。

　　放心吧，delete是不能刪除掉原型的屬性的。

　　3、 繼承時原型的理解(原型鏈)

　　原型鏈是ECMAScript中實現繼承的一種方式。如果不懂繼承，請先百度，理解繼承的概念。

　　原型繼承的基本思想是讓原型屬性(對象)指向另外一個類型的的實例。

　　如：

　　父對象：人

　　function Person(id,name,age){

　　this.id = id;

　　this.name = name;

　　this.age = age;

　　}

　　Person.prototype.eat = function(str){

　　alert(this.name+"在吃"+str);

　　}

　　子對象：程序員

　　function Programmer(languages){

　　this.languages = languages;

　　}

　　//此句話使用原型實現了繼承，子對象Programmer的原型屬性指向了父對象Person的實例。

　　Programmer.prototype = new Person(“008”, “寶寶”, “20”);

　　Programmer.prototype.writeCode=function(){

　　alert(this.name+"一邊努力地寫著代碼，一邊想著‘多寫代碼，多掙錢’");

　　}

　　從圖中可以看出，子對象Programmer擁有了父對象的屬性(id，name，age)和方法(eat)。自己特有的屬性languages和方法writeCode()。成功完成了繼承。

　　特別要注意，子對象完成了繼承關系后，再給子對象的原型中增加屬性和方法。即，先寫代碼Programmer.prototype = new Person(“008”, “寶寶”, “20”); 再寫代碼：

　　Programmer.prototype.writeCode=function(){

　　alert(this.name+"一邊努力地寫著代碼，一邊想著‘多寫代碼，多掙錢’");

　　}

　　否則，當子對象的prototype(原型)屬性的指向發生變化后，原來在prototype(原型)屬性中所寫屬性和方法就會丟失。

　　原型鏈繼承：當B對象的原型屬性指向了A對象的實例，而C對象的原型屬性指向B對象的實例時，就完成了原型鏈繼承。

到此，關于“怎么理解Javascript中原型屬性”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！