亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JS 面向?qū)ο笾衿娴膒rototype

 更新時間:2011年02月26日 00:19:21   作者:  
對于初學 JavaScript 的人來說 prototype 是一種很神奇的特性,而事實上,prototype 對于 JavaScript 的意義重大,prototype 不僅僅是一種管理對象繼承的機制,更是一種出色的設計思想。

JavaScript中對象的prototype屬性,可以返回對象類型原型的引用。這是一個相當拗口的解釋,要理解它,先要正確理解對象類型(Type)以及原型(prototype)的概念。
1 什么是prototype
JavaScript中對象的prototype屬性,可以返回對象類型原型的引用。這是一個相當拗口的解釋,要理解它,先要正確理解對象類型(Type)以及原型(prototype)的概念。
前面我們說,對象的類(Class)和對象實例(Instance)之間是一種“創(chuàng)建”關系,因此我們把“類”看作是對象特征的模型化,而對象看作是類特征的具體化,或者說,類(Class)是對象的一個類型(Type)。例如,在前面的例子中,p1和p2的類型都是Point,在JavaScript中,通過instanceof運算符可以驗證這一點:
p1 instanceof Point
p2 instanceof Point
但是,Point不是p1和p2的唯一類型,因為p1和p2都是對象,所以Obejct也是它們的類型,因為Object是比Point更加泛化的類,所以我們說,Obejct和Point之間有一種衍生關系,在后面我們會知道,這種關系被叫做“繼承”,它也是對象之間泛化關系的一個特例,是面向?qū)ο笾胁豢扇鄙俚囊环N基本關系。
在面向?qū)ο箢I域里,實例與類型不是唯一的一對可描述的抽象關系,在JavaScript中,另外一種重要的抽象關系是類型(Type)與原型(prototype)。這種關系是一種更高層次的抽象關系,它恰好和類型與實例的抽象關系構成了一個三層的鏈。
在現(xiàn)實生活中,我們常常說,某個東西是以另一個東西為原型創(chuàng)作的。這兩個東西可以是同一個類型,也可以是不同類型。習語“依葫蘆畫瓢”,這里的葫蘆就是原型,而瓢就是類型,用JavaScript的prototype來表示就是“瓢.prototype =某個葫蘆”或者“瓢.prototype= new 葫蘆()”。
要深入理解原型,可以研究關于它的一種設計模式——prototype pattern,這種模式的核心是用原型實例指定創(chuàng)建對象的種類,并且通過拷貝這些原型創(chuàng)建新的對象。JavaScript的prototype就類似于這種方式。
關于prototype pattern的詳細內(nèi)容可以參考《設計模式》(《Design Patterns》)它不是本文討論的范圍。
注意,同類型與實例的關系不同的是,原型與類型的關系要求一個類型在一個時刻只能有一個原型(而一個實例在一個時刻顯然可以有多個類型)。對于JavaScript來說,這個限制有兩層含義,第一是每個具體的JavaScript類型有且僅有一個原型(prototype),在默認的情況下,這個原型是一個Object對象(注意不是Object類型!)。第二是,這個對象所屬的類型,必須是滿足原型關系的類型鏈。例如p1所屬的類型是Point和Object,而一個Object對象是Point的原型。假如有一個對象,它所屬的類型分別為ClassA、ClassB、ClassC和Object,那么必須滿足這四個類構成某種完整的原型鏈。
有意思的是,JavaScript并沒有規(guī)定一個類型的原型的類型(這又是一段非常拗口的話),因此它可以是任何類型,通常是某種對象,這樣,對象-類型-原形(對象)就可能構成一個環(huán)狀結構,或者其它有意思的拓撲結構,這些結構為JavaScript帶來了五花八門的用法,其中的一些用法不但巧妙而且充滿美感。下面的一節(jié)主要介紹prototype的用法。

2 prototype使用技巧
在了解prototype的使用技巧之前,首要先弄明白prototype的特性。首先,JavaScript為每一個類型(Type)都提供了一個prototype屬性,將這個屬性指向一個對象,這個對象就成為了這個類型的“原型”,這意味著由這個類型所創(chuàng)建的所有對象都具有這個原型的特性。另外,JavaScript的對象是動態(tài)的,原型也不例外,給prototype增加或者減少屬性,將改變這個類型的原型,這種改變將直接作用到由這個原型創(chuàng)建的所有對象上,例如:

復制代碼 代碼如下:

<script>
function Point(x,y)
{
this.x = x;
this.y = y;
}
var p1 = new Point(1,2);
var p2 = new Point(3,4);
Point.prototype.z = 0; //動態(tài)為Point的原型添加了屬性
alert(p1.z);
alert(p2.z); //同時作用于Point類型創(chuàng)建的所有對象
</script>

如果給某個對象的類型的原型添加了某個名為a的屬性,而這個對象本身又有一個名為a的同名屬性,則在訪問這個對象的屬性a時,對象本身的屬性“覆蓋”了原型屬性,但是原型屬性并沒有消失,當你用delete運算符將對象本身的屬性a刪除時,對象的原型屬性就恢復了可見性。利用這個特性,可以為對象的屬性設定默認值,例如:
復制代碼 代碼如下:

<script>
function Point(x, y)
{
if(x) this.x = x;
if(y) this.y = y;
}
Point.prototype.x = 0;
Point.prototype.y = 0;
var p1 = new Point;
var p2 = new Point(1,2);
</script>

上面的例子通過prototype為Point對象設定了默認值(0,0),因此p1的值為(0,0),p2的值為(1,2),通過delete p2.x, delete p2.y; 可以將p2的值恢復為(0,0)。下面是一個更有意思的例子:
復制代碼 代碼如下:

<script>
function classA()
{
this.a = 100;
this.b = 200;
this.c = 300;

this.reset = function()
{
for(var each in this)
{
delete this[each];
}
}
}
classA.prototype = new classA();

var a = new classA();
alert(a.a);
a.a *= 2;
a.b *= 2;
a.c *= 2;
alert(a.a);
alert(a.b);
alert(a.c);
a.reset(); //調(diào)用reset方法將a的值恢復為默認值
alert(a.a);
alert(a.b);
alert(a.c);
</script>

利用prototype還可以為對象的屬性設置一個只讀的getter,從而避免它被改寫。下面是一個例子:
復制代碼 代碼如下:

<script>
function Point(x, y)
{
if(x) this.x = x;
if(y) this.y = y;
}
Point.prototype.x = 0;
Point.prototype.y = 0;

function LineSegment(p1, p2)
{
//私有成員
var m_firstPoint = p1;
var m_lastPoint = p2;
var m_width = {
valueOf : function(){return Math.abs(p1.x - p2.x)},
toString : function(){return Math.abs(p1.x - p2.x)}
}
var m_height = {
valueOf : function(){return Math.abs(p1.y - p2.y)},
toString : function(){return Math.abs(p1.y - p2.y)}
}
//getter
this.getFirstPoint = function()
{
return m_firstPoint;
}
this.getLastPoint = function()
{
return m_lastPoint;
}

this.length = {
valueOf : function(){return Math.sqrt(m_width*m_width + m_height*m_height)},
toString : function(){return Math.sqrt(m_width*m_width + m_height*m_height)}
}
}
var p1 = new Point;
var p2 = new Point(2,3);
var line1 = new LineSegment(p1, p2);
var lp = line1.getFirstPoint();
lp.x = 100; //不小心改寫了lp的值,破壞了lp的原始值而且不可恢復
alert(line1.getFirstPoint().x);
alert(line1.length); //就連line1.lenght都發(fā)生了改變
</script>

將this.getFirstPoint()改寫為下面這個樣子:
復制代碼 代碼如下:

this.getFirstPoint = function()
{
function GETTER(){};
GETTER.prototype = m_firstPoint;
return new GETTER();
}

則可以避免這個問題,保證了m_firstPoint屬性的只讀性。
復制代碼 代碼如下:

<script>
function Point(x, y)
{
if(x) this.x = x;
if(y) this.y = y;
}
Point.prototype.x = 0;
Point.prototype.y = 0;

function LineSegment(p1, p2)
{
//私有成員
var m_firstPoint = p1;
var m_lastPoint = p2;
var m_width = {
valueOf : function(){return Math.abs(p1.x - p2.x)},
toString : function(){return Math.abs(p1.x - p2.x)}
}
var m_height = {
valueOf : function(){return Math.abs(p1.y - p2.y)},
toString : function(){return Math.abs(p1.y - p2.y)}
}
//getter
this.getFirstPoint = function()
{
function GETTER(){};
GETTER.prototype = m_firstPoint;
return new GETTER();
}
this.getLastPoint = function()
{
function GETTER(){};
GETTER.prototype = m_lastPoint;
return new GETTER();
}

this.length = {
valueOf : function(){return Math.sqrt(m_width*m_width + m_height*m_height)},
toString : function(){return Math.sqrt(m_width*m_width + m_height*m_height)}
}
}
var p1 = new Point;
var p2 = new Point(2,3);
var line1 = new LineSegment(p1, p2);
var lp = line1.getFirstPoint();
lp.x = 100; //不小心改寫了lp的值,但是沒有破壞原始的值
alert(line1.getFirstPoint().x);
alert(line1.length); //line1.lenght不發(fā)生改變
</script>

實際上,將一個對象設置為一個類型的原型,相當于通過實例化這個類型,為對象建立只讀副本,在任何時候?qū)Ω北具M行改變,都不會影響到原始對象,而對原始對象進行改變,則會影響到副本,除非被改變的屬性已經(jīng)被副本自己的同名屬性覆蓋。用delete操作將對象自己的同名屬性刪除,則可以恢復原型屬性的可見性。下面再舉一個例子:
復制代碼 代碼如下:

<script>
function Polygon()
{
var m_points = [];

m_points = Array.apply(m_points, arguments);

function GETTER(){};
GETTER.prototype = m_points[0];
this.firstPoint = new GETTER();

this.length = {
valueOf : function(){return m_points.length},
toString : function(){return m_points.length}
}

this.add = function(){
m_points.push.apply(m_points, arguments);
}

this.getPoint = function(idx)
{
return m_points[idx];
}

this.setPoint = function(idx, point)
{
if(m_points[idx] == null)
{
m_points[idx] = point;
}
else
{
m_points[idx].x = point.x;
m_points[idx].y = point.y;
}
}
}
var p = new Polygon({x:1, y:2},{x:2, y:4},{x:2, y:6});
alert(p.length);
alert(p.firstPoint.x);
alert(p.firstPoint.y);
p.firstPoint.x = 100; //不小心寫了它的值
alert(p.getPoint(0).x); //不會影響到實際的私有成員
delete p.firstPoint.x; //恢復
alert(p.firstPoint.x);

p.setPoint(0, {x:3,y:4}); //通過setter改寫了實際的私有成員
alert(p.firstPoint.x); //getter的值發(fā)生了改變
alert(p.getPoint(0).x);
</script>

注意,以上的例子說明了用prototype可以快速創(chuàng)建對象的多個副本,一般情況下,利用prototype來大量的創(chuàng)建復雜對象,要比用其他任何方法來copy對象快得多。注意到,用一個對象為原型,來創(chuàng)建大量的新對象,這正是prototype pattern的本質(zhì)。
下面是一個例子:
復制代碼 代碼如下:

<script>
var p1 = new Point(1,2);
var points = [];
var PointPrototype = function(){};
PointPrototype.prototype = p1;
for(var i = 0; i < 10000; i++)
{
points[i] = new PointPrototype();
//由于PointPrototype的構造函數(shù)是空函數(shù),因此它的構造要比直接構造//p1副本快得多。
}
</script>

除了上面所說的這些使用技巧之外,prototype因為它獨特的特性,還有其它一些用途,被用作最廣泛和最廣為人知的可能是用它來模擬繼承,關于這一點,留待下一節(jié)中去討論。
3 prototype的實質(zhì)
上面已經(jīng)說了prototype的作用,現(xiàn)在我們來透過規(guī)律揭示prototype的實質(zhì)。
我們說,prototype的行為類似于C++中的靜態(tài)域,將一個屬性添加為prototype的屬性,這個屬性將被該類型創(chuàng)建的所有實例所共享,但是這種共享是只讀的。在任何一個實例中只能夠用自己的同名屬性覆蓋這個屬性,而不能夠改變它。換句話說,對象在讀取某個屬性時,總是先檢查自身域的屬性表,如果有這個屬性,則會返回這個屬性,否則就去讀取prototype域,返回protoype域上的屬性。另外,JavaScript允許protoype域引用任何類型的對象,因此,如果對protoype域的讀取依然沒有找到這個屬性,則JavaScript將遞歸地查找prototype域所指向?qū)ο蟮膒rototype域,直到這個對象的prototype域為它本身或者出現(xiàn)循環(huán)為止,我們可以用下面的圖來描述prototype與對象實例之間的關系:
//TODO:
4 prototype的價值與局限性
從上面的分析我們理解了prototype,通過它能夠以一個對象為原型,安全地創(chuàng)建大量的實例,這就是prototype的真正含義,也是它的價值所在。后面我們會看到,利用prototype的這個特性,可以用來模擬對象的繼承,但是要知道,prototype用來模擬繼承盡管也是它的一個重要價值,但是絕對不是它的核心,換句話說,JavaScript之所以支持prototype,絕對不是僅僅用來實現(xiàn)它的對象繼承,即使沒有了prototype繼承,JavaScript的prototype機制依然是非常有用的。
由于prototype僅僅是以對象為原型給類型構建副本,因此它也具有很大的局限性。首先,它在類型的prototype域上并不是表現(xiàn)為一種值拷貝,而是一種引用拷貝,這帶來了“副作用”。改變某個原型上引用類型的屬性的屬性值(又是一個相當拗口的解釋:P),將會徹底影響到這個類型創(chuàng)建的每一個實例。有的時候這正是我們需要的(比如某一類所有對象的改變默認值),但有的時候這也是我們所不希望的(比如在類繼承的時候),下面給出了一個例子:
復制代碼 代碼如下:

<script>
function ClassA()
{
this.a=[];
}
function ClassB()
{
this.b=function(){};
}
ClassB.prototype=new ClassA();
var objB1=new ClassB();
var objB2=new ClassB();
objB1.a.push(1,2,3);
alert(objB2.a);
//所有b的實例中的a成員全都變了??!這并不是這個例子所希望看到的。
</script>

JavaScript實現(xiàn):
在Java語言中對象都繼承自java.lang.Object,而java.lang.Object就提供了Clone的方法,只要實現(xiàn)接口Cloneable,即表示支持Clone,否則拋出異常。在這點JavaScript是非常接近的,所有的對象都是從Object繼承,不過Object并不支持Clone的方法,但是我們可以通過自己對于JavaScript通過expanddo的形式實現(xiàn)Clone方法,這樣日后所有的對象創(chuàng)建都實現(xiàn)了Clone方法。
因為JavaScript本身沒有提供Clone的方法,同時對于對象的賦值如var a=new Object();var b=a,這樣的代碼a,b是指向同一對象的,要創(chuàng)建一個對象必須通過new這個關鍵字來實現(xiàn),因此在Clone的實現(xiàn)過程,我內(nèi)部定義了一個構造子(constructor)CloneModel,同時指定其父對象為要進行Clone活動本身的對象,因此使用了this關鍵字,在我們定義的構造子CloneModel的基礎上我們創(chuàng)建一個一個對象,因為構造子內(nèi)部沒有任何代碼,新創(chuàng)建的對象實際上說所有的實現(xiàn)都在父對象中,也就是我們需要進行Clone的對象。到目前為止,我們已經(jīng)創(chuàng)建了一個需要復制的對象,但是所有的值都是指向父對象的。
在 JavaScript的面向?qū)ο蠓绞街?,我們曾經(jīng)討論過,如果沒有覆蓋父對象的值,那么這個時候是直接指向父對象的,在Prototype Pattern是要求Clone之后的對象的內(nèi)部值是不應該相關的,而只要賦值一次,objClone的值都會在自己的內(nèi)存空間里頭,而不是還指向父對象。基于如此的考慮,objClone[v]=objClone[v];語句就是實現(xiàn)將父對象的值通過覆蓋的方式拷貝到自己的內(nèi)存來。

21.2.1 什么是 prototype
JavaScript 中對象的 prototype 屬性,可以返回對象類型原型的引用。這是一個相當拗口的解釋,要理解它,先要正確理解對象類型(Type)以及原型(prototype)的概念。 前面我們說,對象的類(Class)和對象實例(Instance)之間是一種“創(chuàng)建”關系,因此我們把“類”看作是對象特征的模型化,而對象看作是類特征的具體化,或者說,類(Class)是對象的一個類型(Type)。例如,在前面的例子中,p1 和p2 的類型都是 Point,在 JavaScript 中,通過instanceof運算符可以驗證這一點: p1 instanceof Point p2 instanceof Point 但是,Point 不是 p1 和 p2 的唯一類型,因為 p1 和 p2 都是對象,所以 Obejct 也是它們的類型,因為Object 是比 Point 更加泛化的類,所以我們說,Obejct和 Point之間有一種衍生關系,在后面我們會知道,這種關系被叫做“繼承”,它也是對象之間泛化關系的一個特例,是面向?qū)ο笾胁豢扇鄙俚囊环N基本關系。 在面向?qū)ο箢I域里,實例與類型不是唯一的一對可描述的抽象關系,在 JavaScript 中,另外一種重要的抽象關系是類型(Type)與原型(prototype)。這種關系是一種更高層次的抽象關系,它恰好和類型與實例的抽象關系構成了一個三層的鏈,

圖 21.2 描述了這種關系:
                        圖 21.2 對象、類型與原型的關系
在現(xiàn)實生活中,我們常常說,某個東西是以另一個東西為原型創(chuàng)作的。這兩個東西可以是同一個類型,也可以是不同類型。習語“照貓畫虎”,這里的貓就是原型,而虎就是類型,用 JavaScript的 prototype 來表示就是“虎.prototype =某只貓”或者“虎.prototype= new 貓()”。 “原型”是描述自然界事物之間“歸類”關系的一種,另外幾種關系包括“繼承”和“接口”。一般來說,“繼承”描述的是事物之間固有的衍生關系,能被“繼承”所描述的事物之間具有很強的關聯(lián)性(血緣)?!敖涌凇泵枋龅氖鞘挛锕τ梅矫娴墓餐卣?。而“原型”則傾向于描述事物之間的“相似性”。從這一點來看,“原型”在描述事物關聯(lián)性的方面,比繼承和接口更加廣義。 如果你是 Java 程序員,上面的例子從繼承的角度來考慮,當然不可能用“貓”去繼承“虎”,也不可能用“虎”去繼承“貓”,要描述它們的關系,需要建立一個涵蓋了它們共性的“抽象類”,或者你會叫它“貓科動物”??墒牵绻业南到y(tǒng)中只需要用到“貓”和“老虎”,那么這個多余的“貓科動物”對于我來說沒有任何意義,我只需要表達的是,“老虎”有點像“貓”,僅此而已。在這里,用原型幫我們成功地節(jié)省了一個沒有必要建立的類型“貓科動物”。 要深入理解原型,可以研究關于它的一種設計模式——prototype pattern,這種模式的核心是用原型實例指定創(chuàng)建對象的種類,并且通過拷貝這些原型創(chuàng)建新的對象。JavaScript 的 prototype 就類似于這種方式。 關于 prototype pattern的詳細內(nèi)容可以參考《設計模式》(《Design Patterns》)它不是本書討論的范圍。 注意,原型模式要求一個類型在一個時刻只能有一個原型(而一個實例在一個時刻顯然可以有多個類型)。對于 JavaScript 來說,這個限制有兩層含義,第一是每個具體的 JavaScript 類型有且僅有一個原型(prototype),在默認的情況下,該原型是一個 Object 對象(注意不是 Object 類型?。?。第二是,這個類型的實例的所有類型,必須是滿足原型關系的類型鏈。例如 p1 所屬的類型是 Point 和 Object,而一個 Object對象是 Point 的原型。假如有一個對象,它所屬的類型分別為 ClassA、ClassB、ClassC 和 Object,那么必須滿足這四個類構成某種完整的原型鏈,例如:
例 21.4 原型關系的類型鏈
function ClassA()
{
……
}
ClassA.prototype = new Object(); //這個可以省略
function ClassB()
{
……
}
ClassB.prototype = new ClassA(); //ClassB以 ClassA的對象為原型
function ClassC()
{
   ……
}
ClassC.prototype = new ClassB(); //ClassC以 ClassB的對象為原型
var obj = new ClassC();
alert(obj instanceof ClassC); //true
alert(obj instanceof ClassB); //true
alert(obj instanceof ClassA); //true
alert(obj instanceof Object); //true

圖 21.3 簡單描述了它們之間的關系:
圖 21.3 原型關系的類型鏈
有意思的是,JavaScript并沒有規(guī)定一個類型的原型的類型(這又是一段非常拗口的話),因此它可以是任何類型,通常是某種對象,這樣,對象-類型-原形(對象)就可能構成一個環(huán)狀結構,或者其它有意思的拓撲結構,這些結構為 JavaScript 帶來了五花八門的用法,其中的一些用法不但巧妙而且充滿美感。下面的一節(jié)主要介紹 prototype 的用法。 <

相關文章

最新評論