HTML5前端技術教程:Javascript中原型屬性

本文將從以下三個方面講解原型屬性

1、 理解指針

2、 理解原型

3、 用原型的方式完成繼承

  以下為詳細內容:

  1、 理解指針

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

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

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

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

HTML5前端技術教程:Javascript中原型屬性

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

  2、 理解原型

  a) 原型(屬性)的概念

JAVA中的函數也是對象(如果不懂函數也是個對象,請百度JAVA中函數是功能完整的類),每個函數都有一個原型(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屬性值都是中國,因為它們兩個是一個構造函數實例化出來的(一個模子“刻”出來的)。

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

HTML5前端技術教程:Javascript中原型屬性

圖中可以看出:

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屬性的值。不改,又不能滿足需求。看來,JAVA在這方面還是考慮到了。可以改,而且不會影響其它對象的屬性值。

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

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

如以下代碼:

P2.country = “俄羅斯”;

執行時,內存會變成如下:

HTML5前端技術教程:Javascript中原型屬性

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

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

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

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

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

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

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

如:

父對象:人

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+"一邊努力地寫著代碼,一邊想著‘多寫代碼,多掙錢’");

}

HTML5前端技術教程:Javascript中原型屬性

從圖中可以看出,子對象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對象的實例時,就完成了原型鏈繼承。

注:

1、此篇文章可以結合JAVA中創建對象的幾種方式進行學習。如果再能結合上篇文章《對比引用類型與基本類型》就會更好

2、此篇文章只是為了理解prototype屬性,所以,很多的注意點並沒有涉及。作者更希望大家學一點,理解一點,而不是大而全。而且學習是循序漸進的。先把prototype屬性理解了,再去關注注意點。


分享到:


相關文章: