日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 前端技术 > javascript >内容正文

javascript

悟透JavaScript(理解JS面向对象的好文章)

發布時間:2024/1/1 javascript 84 豆豆
生活随笔 收集整理的這篇文章主要介紹了 悟透JavaScript(理解JS面向对象的好文章) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

引子


??? 編程世界里只存在兩種基本元素,一個是數據,一個是代碼。編程世界就是在數據和代碼千絲萬縷的糾纏中呈現出無限的生機和活力。

????數據天生就是文靜的,總想保持自己固有的本色;而代碼卻天生活潑,總想改變這個世界。
?
?? 你看,數據代碼間的關系與物質能量間的關系有著驚人的相似。數據也是有慣性的,如果沒有代碼來施加外力,她總保持自己原來的狀態。而代碼就象能量,他存在 的唯一目的,就是要努力改變數據原來的狀態。在代碼改變數據的同時,也會因為數據的抗拒而反過來影響或改變代碼原有的趨勢。甚至在某些情況下,數據可以轉 變為代碼,而代碼卻又有可能被轉變為數據,或許還存在一個類似E=MC2形式的數碼轉換方程呢。然而,就是在數據和代碼間這種即矛盾又統一的運轉中,總能 體現出計算機世界的規律,這些規律正是我們編寫的程序邏輯。

??? 不過,由于不同程序員有著不同的世界觀,這些數據和代碼看起來也就不盡相同。于是,不同世界觀的程序員們運用各自的方法論,推動著編程世界的進化和發展。
?
??? 眾所周知,當今最流行的編程思想莫過于面向對象編程的思想。為什么面向對象的思想能迅速風靡編程世界呢?因為面向對象的思想首次把數據和代碼結合成統一 體,并以一個簡單的對象概念呈現給編程者。這一下子就將原來那些雜亂的算法與子程序,以及糾纏不清的復雜數據結構,劃分成清晰而有序的對象結構,從而理清 了數據與代碼在我們心中那團亂麻般的結。我們又可以有一個更清晰的思維,在另一個思想高度上去探索更加浩瀚的編程世界了。

??? 在五祖弘忍講授完《對象真經》之后的一天,他對眾弟子們說:“經已講完,想必爾等應該有所感悟,請各自寫個偈子來看”。大弟子神秀是被大家公認為悟性最高 的師兄,他的偈子寫道:“身是對象樹,心如類般明。朝朝勤拂拭,莫讓惹塵埃!”。此偈一出,立即引起師兄弟們的轟動,大家都說寫得太好了。只有火頭僧慧能 看后,輕輕地嘆了口氣,又隨手在墻上寫道:“對象本無根,類型亦無形。本來無一物,何處惹塵埃?”。然后搖了搖頭,揚長而去。大家看了慧能的偈子都說: “寫的什么亂七八糟的啊,看不懂”。師父弘忍看了神秀的詩偈也點頭稱贊,再看慧能的詩偈之后默然搖頭。就在當天夜里,弘忍卻悄悄把慧能叫到自己的禪房,將 珍藏多年的軟件真經傳授于他,然后讓他趁著月色連夜逃走...

??? 后來,慧能果然不負師父厚望,在南方開創了禪宗另一個廣闊的天空。而慧能當年帶走的軟件真經中就有一本是《JavaScript真經》!

回歸簡單

??? 要理解JavaScript,你得首先放下對象和類的概念,回到數據和代碼的本原。前面說過,編程世界只有數據和代碼兩種基本元素,而這兩種元素又有著糾纏不清的關系。JavaScript就是把數據和代碼都簡化到最原始的程度。

??? JavaScript中的數據很簡潔的。簡單數據只有 undefined, null, boolean, number和string這五種,而復雜數據只有一種,即object。這就好比中國古典的樸素唯物思想,把世界最基本的元素歸為金木水火土,其他復雜 的物質都是由這五種基本元素組成。

??? JavaScript中的代碼只體現為一種形式,就是function。

??? 注意:以上單詞都是小寫的,不要和Number, String, Object, Function等JavaScript內置函數混淆了。要知道,JavaScript語言是區分大小寫的呀!

??? 任何一個JavaScript的標識、常量、變量和參數都只是unfined, null, bool, number, string, object 和 function類型中的一種,也就typeof返回值表明的類型。除此之外沒有其他類型了。

??? 先說說簡單數據類型吧。

??? undefined:?? 代表一切未知的事物,啥都沒有,無法想象,代碼也就更無法去處理了。
????????????????????? 注意:typeof(undefined) 返回也是 undefined。
????????????????????????????? 可以將undefined賦值給任何變量或屬性,但并不意味了清除了該變量,反而會因此多了一個屬性。

??? null:??????????? 有那么一個概念,但沒有東西。無中似有,有中還無。雖難以想象,但已經可以用代碼來處理了。
????????????????????? 注意:typeof(null)返回object,但null并非object,具有null值的變量也并非object。

??? boolean:????? 是就是,非就非,沒有疑義。對就對,錯就錯,絕對明確。既能被代碼處理,也可以控制代碼的流程。

??? number:????? 線性的事物,大小和次序分明,多而不亂。便于代碼進行批量處理,也控制代碼的迭代和循環等。
????????????????????? 注意:typeof(NaN)和typeof(Infinity)都返回number 。
????????????????????????????? NaN參與任何數值計算的結構都是NaN,而且 NaN != NaN 。
????????????????????????????? Infinity / Infinity = NaN 。

??? string:???????? 面向人類的理性事物,而不是機器信號。人機信息溝通,代碼據此理解人的意圖等等,都靠它了。

???? 簡單類型都不是對象,JavaScript沒有將對象化的能力賦予這些簡單類型。直接被賦予簡單類型常量值的標識符、變量和參數都不是一個對象。

????所謂“對象化”,就是可以將數據和代碼組織成復雜結構的能力。JavaScript中只有object類型和function類型提供了對象化的能力。

沒有類

??? object就是對象的類型。在JavaScript中不管多么復雜的數據和代碼,都可以組織成object形式的對象。

????但JavaScript卻沒有 “類”的概念!

????對于許多面向對象的程序員來說,這恐怕是JavaScript中最難以理解的地方。是啊,幾乎任何講面向對象的書中,第一個要講的就是“類”的概 念,這可是面向對象的支柱。這突然沒有了“類”,我們就象一下子沒了精神支柱,感到六神無主。看來,要放下對象和類,達到“對象本無根,類型亦無形”的境 界確實是件不容易的事情啊。

??? 這樣,我們先來看一段JavaScript程序:

????var?life?=?{};
????
for(life.age?=?1;?life.age?<=?3;?life.age++)
????{
????????
switch(life.age)
????????{
????????????
case?1:?life.body?=?"卵細胞";
????????????????????life.say?
=?function(){alert(this.age+this.body)};
????????????????????
break;
????????????
case?2:?life.tail?=?"尾巴";
????????????????????life.gill?
=?"";
????????????????????life.body?
=?"蝌蚪";
????????????????????life.say?
=?function(){alert(this.age+this.body+"-"+this.tail+","+this.gill)};
????????????????????
break;
????????????
case?3:?delete?life.tail;
????????????????????
delete?life.gill;
????????????????????life.legs?
=?"四條腿";
????????????????????life.lung?
=?"";
????????????????????life.body?
=?"青蛙";
????????????????????life.say?
=?function(){alert(this.age+this.body+"-"+this.legs+","+this.lung)};
????????????????????
break;
????????};
????????life.say();
????};


??? 這段JavaScript程序一開始產生了一個生命對象life,life誕生時只是一個光溜溜的對象,沒有任何屬性和方法。在第一次生命過程中,它有了 一個身體屬性body,并有了一個say方法,看起來是一個“卵細胞”。在第二次生命過程中,它又長出了“尾巴”和“腮”,有了tail和gill屬性, 顯然它是一個“蝌蚪”。在第三次生命過程中,它的tail和gill屬性消失了,但又長出了“四條腿”和“肺”,有了legs和lung屬性,從而最終變 成了“青蛙”。如果,你的想像力豐富的話,或許還能讓它變成英俊的“王子”,娶個美麗的“公主”什么的。不過,在看完這段程序之后,請你思考一個問題:

??? 我們一定需要類嗎?

??? 還記得兒時那個“小蝌蚪找媽媽”的童話嗎?也許就在昨天晚,你的孩子剛好是在這個美麗的童話中進入夢鄉的吧。可愛的小蝌蚪也就是在其自身類型不斷演化過程 中,逐漸變成了和媽媽一樣的“類”,從而找到了自己的媽媽。這個童話故事中蘊含的編程哲理就是:對象的“類”是從無到有,又不斷演化,最終又消失于無形之 中的...

??? “類”,的確可以幫助我們理解復雜的現實世界,這紛亂的現實世界也的確需要進行分類。但如果我們的思想被“類”束縛住了,“類”也就變成了“累”。想象一 下,如果一個生命對象開始的時就被規定了固定的“類”,那么它還能演化嗎?蝌蚪還能變成青蛙嗎?還可以給孩子們講小蝌蚪找媽媽的故事嗎?

??? 所以,JavaScript中沒有“類”,類已化于無形,與對象融為一體。正是由于放下了“類”這個概念,JavaScript的對象才有了其他編程語言所沒有的活力。

??? 如果,此時你的內心深處開始有所感悟,那么你已經逐漸開始理解JavaScript的禪機了。

函數的魔力

??? 接下來,我們再討論一下JavaScript函數的魔力吧。

??? JavaScript的代碼就只有function一種形式,function就是函數的類型。也許其他編程語言還有procedure或 method等代碼概念,但在JavaScript里只有function一種形式。當我們寫下一個函數的時候,只不過是建立了一個function類型 的實體而已。請看下面的程序:

????function?myfunc()
????{
????????alert(
"hello");
????};
????
????alert(
typeof(myfunc));


??? 這個代碼運行之后可以看到typeof(myfunc)返回的是function。以上的函數寫法我們稱之為“定義式”的,如果我們將其改寫成下面的“變量式”的,就更容易理解了:

????var?myfunc?=?function?()
????????{
????????????alert(
"hello");
????????};
????
????alert(
typeof(myfunc));


??? 這里明確定義了一個變量myfunc,它的初始值被賦予了一個function的實體。因此,typeof(myfunc)返回的也是function。 其實,這兩種函數的寫法是等價的,除了一點細微差別,其內部實現完全相同。也就是說,我們寫的這些JavaScript函數只是一個命了名的變量而已,其 變量類型即為function,變量的值就是我們編寫的函數代碼體。

??? 聰明的你或許立即會進一步的追問:既然函數只是變量,那么變量就可以被隨意賦值并用到任意地方啰?

??? 我們來看看下面的代碼:

????var?myfunc?=?function?()
????????{
????????????alert(
"hello");
????????};
????myfunc();?
//第一次調用myfunc,輸出hello
????
????myfunc?
=?function?()
????????{
????????????alert(
"yeah");
????????};????
????myfunc();?
//第二次調用myfunc,將輸出yeah


??? 這個程序運行的結果告訴我們:答案是肯定的!在第一次調用函數之后,函數變量又被賦予了新的函數代碼體,使得第二次調用該函數時,出現了不同的輸出。

??? 好了,我們又來把上面的代碼改成第一種定義式的函數形式:

????function?myfunc?()
????{
????????alert(
"hello");
????};
????myfunc();?
//這里調用myfunc,輸出yeah而不是hello
????
????
function?myfunc?()
????{
????????alert(
"yeah");
????};????
????myfunc();?
//這里調用myfunc,當然輸出yeah


??? 按理說,兩個簽名完全相同的函數,在其他編程語言中應該是非法的。但在JavaScript中,這沒錯。不過,程序運行之后卻發現一個奇怪的現象:兩次調用都只是最后那個函數里輸出的值!顯然第一個函數沒有起到任何作用。這又是為什么呢?

??? 原來,JavaScript執行引擎并非一行一行地分析和執行程序,而是一段一段地分析執行的。而且,在同一段程序的分析執行中,定義式的函數語句會被提 取出來優先執行。函數定義執行完之后,才會按順序執行其他語句代碼。也就是說,在第一次調用myfunc之前,第一個函數語句定義的代碼邏輯,已被第二個 函數定義語句覆蓋了。所以,兩次都調用都是執行最后一個函數邏輯了。

??? 如果把這個JavaScript代碼分成兩段,例如將它們寫在一個html中,并用<script/>標簽將其分成這樣的兩塊:

<script>
????
function?myfunc?()
????{
????????alert(
"hello");
????};
????myfunc();?
//這里調用myfunc,輸出hello
</script>

<script>
????
function?myfunc?()
????{
????????alert(
"yeah");
????};????
????myfunc();?
//這里調用myfunc,輸出yeah
</script>


??? 這時,輸出才是各自按順序來的,也證明了JavaScript的確是一段段地執行的。

??? 一段代碼中的定義式函數語句會優先執行,這似乎有點象靜態語言的編譯概念。所以,這一特征也被有些人稱為:JavaScript的“預編譯”。

??? 大多數情況下,我們也沒有必要去糾纏這些細節問題。只要你記住一點:JavaScript里的代碼也是一種數據,同樣可以被任意賦值和修改的,而它的值就是代碼的邏輯。只是,與一般數據不同的是,函數是可以被調用執行的。

??? 不過,如果JavaScript函數僅僅只有這點道行的話,這與C++的函數指針,DELPHI的方法指針,C#的委托相比,又有啥稀奇嘛!然 而,JavaScript函數的神奇之處還體現在另外兩個方面:一是函數function類型本身也具有對象化的能力,二是函數function與對象 object超然的結合能力。

奇妙的對象

??? 先來說說函數的對象化能力。

??? 任何一個函數都可以為其動態地添加或去除屬性,這些屬性可以是簡單類型,可以是對象,也可以是其他函數。也就是說,函數具有對象的全部特征,你完全可以把 函數當對象來用。其實,函數就是對象,只不過比一般的對象多了一個括號“()”操作符,這個操作符用來執行函數的邏輯。即,函數本身還可以被調用,一般對 象卻不可以被調用,除此之外完全相同。請看下面的代碼:

????function?Sing()
????{
????????
with(arguments.callee)
??????????alert(author?
+?""?+?poem);
????};
????Sing.author?
=?"李白";
????Sing.poem?
=?"漢家秦地月,流影照明妃。一上玉關道,天涯去不歸";
????Sing();
????Sing.author?
=?"李戰";
????Sing.poem?
=?"日出漢家天,月落陰山前。女兒琵琶怨,已唱三千年";
????Sing();


??? 在這段代碼中,Sing函數被定義后,又給Sing函數動態地增加了author和poem屬性。將author和poem屬性設為不同的作者和詩句,在 調用Sing()時就能顯示出不同的結果。這個示例用一種詩情畫意的方式,讓我們理解了JavaScript函數就是對象的本質,也感受到了 JavaScript語言的優美。

??? 好了,以上的講述,我們應該算理解了function類型的東西都是和object類型一樣的東西,這種東西被我們稱為“對象”。我們的確可以這樣去看待這些“對象”,因為它們既有“屬性”也有“方法”嘛。但下面的代碼又會讓我們產生新的疑惑:

????var?anObject?=?{};??//一個對象
????anObject.aProperty?=?"Property?of?object";??//對象的一個屬性
????anObject.aMethod?=?function(){alert("Method?of?object")};?//對象的一個方法
????//主要看下面:
????alert(anObject["aProperty"]);???//可以將對象當數組以屬性名作為下標來訪問屬性
????anObject["aMethod"]();??????????//可以將對象當數組以方法名作為下標來調用方法
????for(?var?s?in?anObject)???????????//遍歷對象的所有屬性和方法進行迭代化處理
????????alert(s?+?"?is?a?"?+?typeof(anObject[s]));


??? 同樣對于function類型的對象也是一樣:

????var?aFunction?=?function() {};??//一個函數
????aFunction.aProperty?=?"Property?of?function";??//函數的一個屬性
????aFunction.aMethod?=?function(){alert("Method?of?function")};?//函數的一個方法
????//主要看下面:
????alert(aFunction["aProperty"]);???//可以將函數當數組以屬性名作為下標來訪問屬性
????aFunction["aMethod"]();??????????//可以將函數當數組以方法名作為下標來調用方法
????for(?var?s?in?aFunction)???????????//遍歷函數的所有屬性和方法進行迭代化處理
????????alert(s?+?"?is?a?"?+?typeof(aFunction[s]));


??? 是的,對象和函數可以象數組一樣,用屬性名或方法名作為下標來訪問并處理。那么,它到底應該算是數組呢,還是算對象?

??? 我們知道,數組應該算是線性數據結構,線性數據結構一般有一定的規律,適合進行統一的批量迭代操作等,有點像波。而對象是離散數據結構,適合描述分散的和個性化的東西,有點像粒子。因此,我們也可以這樣問:JavaScript里的對象到底是波還是粒子?

??? 如果存在對象量子論,那么答案一定是:波粒二象性!

??? 因此,JavaScript里的函數和對象既有對象的特征也有數組的特征。這里的數組被稱為“字典”,一種可以任意伸縮的名稱值對兒的集合。其實, object和function的內部實現就是一個字典結構,但這種字典結構卻通過嚴謹而精巧的語法表現出了豐富的外觀。正如量子力學在一些地方用粒子來 解釋和處理問題,而在另一些地方卻用波來解釋和處理問題。你也可以在需要的時候,自由選擇用對象還是數組來解釋和處理問題。只要善于把握 JavaScript的這些奇妙特性,就可以編寫出很多簡潔而強大的代碼來。

放下對象

??? 我們再來看看function與object的超然結合吧。

??? 在面向對象的編程世界里,數據與代碼的有機結合就構成了對象的概念。自從有了對象,編程世界就被劃分成兩部分,一個是對象內的世界,一個是對象外的世界。 對象天生具有自私的一面,外面的世界未經允許是不可訪問對象內部的。對象也有大方的一面,它對外提供屬性和方法,也為他人服務。不過,在這里我們要談到一 個有趣的問題,就是“對象的自我意識”。

??? 什么?沒聽錯吧?對象有自我意識?

??? 可能對許多程序員來說,這的確是第一次聽說。不過,請君看看C++、C#和Java的this,DELPHI的self,還有VB的me,或許你會恍然大悟!當然,也可能只是說句“不過如此”而已。

??? 然而,就在對象將世界劃分為內外兩部分的同時,對象的“自我”也就隨之產生。“自我意識”是生命的最基本特征!正是由于對象這種強大的生命力,才使得編程世界充滿無限的生機和活力。

??? 但對象的“自我意識”在帶給我們快樂的同時也帶來了痛苦和煩惱。我們給對象賦予了太多欲望,總希望它們能做更多的事情。然而,對象的自私使得它們互相爭搶 系統資源,對象的自負讓對象變得復雜和臃腫,對象的自欺也往往帶來揮之不去的錯誤和異常。我們為什么會有這么多的痛苦和煩惱呢?
?
??? 為此,有一個人,在對象樹下,整整想了九九八十一天,終于悟出了生命的痛苦來自于欲望,但究其欲望的根源是來自于自我意識。于是他放下了“自我”,在對象 樹下成了佛,從此他開始普度眾生,傳播真經。他的名字就叫釋迦摩尼,而《JavaScript真經》正是他所傳經書中的一本。

??? JavaScript中也有this,但這個this卻與C++、C#或Java等語言的this不同。一般編程語言的this就是對象自己,而 JavaScript的this卻并不一定!this可能是我,也可能是你,可能是他,反正是我中有你,你中有我,這就不能用原來的那個“自我”來理解 JavaScript這個this的含義了。為此,我們必須首先放下原來對象的那個“自我”。

??? 我們來看下面的代碼:

????function?WhoAmI()???????//定義一個函數WhoAmI
????{
????????alert(
"I'm?"?+?this.name?+?"?of?"?+?typeof(this));
????};
????
????WhoAmI();???
//此時是this當前這段代碼的全局對象,在瀏覽器中就是window對象,其name屬性為空字符串。輸出:I'm?of?object

????
var?BillGates?=?{name:?"Bill?Gates"};
????BillGates.WhoAmI?
=?WhoAmI;??//將函數WhoAmI作為BillGates的方法。
????BillGates.WhoAmI();?????????//此時的this是BillGates。輸出:I'm?Bill?Gates?of?object
????
????
var?SteveJobs?=?{name:?"Steve?Jobs"};
????SteveJobs.WhoAmI?
=?WhoAmI;??//將函數WhoAmI作為SteveJobs的方法。
????SteveJobs.WhoAmI();?????????//此時的this是SteveJobs。輸出:I'm?Steve?Jobs?of?object

????WhoAmI.call(BillGates);?????
//直接將BillGates作為this,調用WhoAmI。輸出:I'm?Bill?Gates?of?object
????WhoAmI.call(SteveJobs);?????//直接將SteveJobs作為this,調用WhoAmI。輸出:I'm?Steve?Jobs?of?object
????
????BillGates.WhoAmI.call(SteveJobs);???
//將SteveJobs作為this,卻調用BillGates的WhoAmI方法。輸出:I'm?Steve?Jobs?of?object
????SteveJobs.WhoAmI.call(BillGates);???//將BillGates作為this,卻調用SteveJobs的WhoAmI方法。輸出:I'm?Bill?Gates?of?object

????WhoAmI.WhoAmI?
=?WhoAmI;?????//將WhoAmI函數設置為自身的方法。
????WhoAmI.name?=?"WhoAmI";
????WhoAmI.WhoAmI();????????????
//此時的this是WhoAmI函數自己。輸出:I'm?WhoAmI?of?function
????????
????({name:?
"nobody",?WhoAmI:?WhoAmI}).WhoAmI();????//臨時創建一個匿名對象并設置屬性后調用WhoAmI方法。輸出:I'm?nobody?of?object


??? 從上面的代碼可以看出,同一個函數可以從不同的角度來調用,this并不一定是函數本身所屬的對象。this只是在任意對象和function元素結合時的一個概念,是種結合比起一般對象語言的默認結合更加靈活,顯得更加超然和灑脫。

??? 在JavaScript函數中,你只能把this看成當前要服務的“這個”對象。this是一個特殊的內置參數,根據this參數,您可以訪問到“這個” 對象的屬性和方法,但卻不能給this參數賦值。在一般對象語言中,方法體代碼中的this可以省略的,成員默認都首先是“自己”的。但 JavaScript卻不同,由于不存在“自我”,當訪問“這個”對象時,this不可省略!

??? JavaScript提供了傳遞this參數的多種形式和手段,其中,象BillGates.WhoAmI()和SteveJobs.WhoAmI()這 種形式,是傳遞this參數最正規的形式,此時的this就是函數所屬的對象本身。而大多數情況下,我們也幾乎很少去采用那些借花仙佛的調用形式。但只我 們要明白JavaScript的這個“自我”與其他編程語言的“自我”是不同的,這是一個放下了的“自我”,這就是JavaScript特有的世界觀。

對象素描

??? 已經說了許多了許多話題了,但有一個很基本的問題我們忘了討論,那就是:怎樣建立對象?

??? 在前面的示例中,我們已經涉及到了對象的建立了。我們使用了一種被稱為JavaScript Object Notation(縮寫JSON)的形式,翻譯為中文就是“JavaScript對象表示法”。

??? JSON為創建對象提供了非常簡單的方法。例如,
??? 創建一個沒有任何屬性的對象:

var?o?=?{};


??? 創建一個對象并設置屬性及初始值:

var?person?=?{name:?"Angel",?age:?18,?married:?false};


??? 創建一個對象并設置屬性和方法:

var?speaker?=?{text:?"Hello?World",?say:?function(){alert(this.text)}};


???? 創建一個更復雜的對象,嵌套其他對象和對象數組等:

????var?company?=
????{
????????name:?
"Microsoft",
????????product:?
"softwares",
????????chairman:?{name:?
"Bill?Gates",?age:?53,?Married:?true},
????????employees:?[{name:?
"Angel",?age:?26,?Married:?false},?{name:?"Hanson",?age:?32,?Marred:?true}],
????????readme:?
function()?{document.write(this.name?+?"?product?"?+?this.product);}
????};


??? JSON的形式就是用大括“{}”號包括起來的項目列表,每一個項目間并用逗號“,”分隔,而項目就是用冒號“:”分隔的屬性名和屬性值。這是典型的字典 表示形式,也再次表明了 JavaScript里的對象就是字典結構。不管多么復雜的對象,都可以被一句JSON代碼來創建并賦值。

????其實,JSON就是JavaScript對象最好的序列化形式,它比XML更簡潔也更省空間。對象可以作為一個JSON形式的字符串,在網絡間自 由傳遞和交換信息。而當需要將這個JSON字符串變成一個JavaScript對象時,只需要使用eval函數這個強大的數碼轉換引擎,就立即能得到一個 JavaScript內存對象。正是由于JSON的這種簡單樸素的天生麗質,才使得她在AJAX舞臺上成為璀璨奪目的明星。

????JavaScript就是這樣,把面向對象那些看似復雜的東西,用及其簡潔的形式表達出來。卸下對象浮華的濃妝,還對象一個眉目清晰!

構造對象
?
??? 好了,接下我們來討論一下對象的另一種創建方法。

??? 除JSON外,在JavaScript中我們可以使用new操作符結合一個函數的形式來創建對象。例如:

????function?MyFunc()?{};?????????//定義一個空函數
????var?anObj?=?new?MyFunc();??//使用new操作符,借助MyFun函數,就創建了一個對象


??? JavaScript的這種創建對象的方式可真有意思,如何去理解這種寫法呢?
?
?? 其實,可以把上面的代碼改寫成這種等價形式:

????function?MyFunc(){};
????
var?anObj?=?{};?????//創建一個對象
????MyFunc.call(anObj);?//將anObj對象作為this指針調用MyFunc函數


??? 我們就可以這樣理解,JavaScript先用new操作符創建了一個對象,緊接著就將這個對象作為this參數調用了后面的函數。其 實,JavaScript內部就是這么做的,而且任何函數都可以被這樣調用!但從 “anObj = new MyFunc()” 這種形式,我們又看到一個熟悉的身影,C++和C#不就是這樣創建對象的嗎?原來,條條大路通靈山,殊途同歸啊!

??? 君看到此處也許會想,我們為什么不可以把這個MyFunc當作構造函數呢?恭喜你,答對了!JavaScript也是這么想的!請看下面的代碼:?

?1?????function?Person(name)???//帶參數的構造函數
?2?????{
?3?????????this.name?=?name;???//將參數值賦給給this對象的屬性
?4?????????this.SayHello?=?function()?{alert("Hello,?I'm?"?+?this.name);};???//給this對象定義一個SayHello方法。
?5?????};
?6?
?7?????function?Employee(name,?salary)?????//子構造函數
?8?????{
?9?????????Person.call(this,?name);????????//將this傳給父構造函數
10?????????this.salary?=?salary;???????//設置一個this的salary屬性
11?????????this.ShowMeTheMoney?=?function()?{alert(this.name?+?"?$"?+?this.salary);};??//添加ShowMeTheMoney方法。
12?????};
13?????
14?????var?BillGates?=?new?Person("Bill?Gates");???//用Person構造函數創建BillGates對象
15?????var?SteveJobs?=?new?Employee("Steve?Jobs",?1234);???//用Empolyee構造函數創建SteveJobs對象
16?
17?????BillGates.SayHello();???//顯示:I'm?Bill?Gates
18?????SteveJobs.SayHello();???//顯示:I'm?Steve?Jobs
19?????SteveJobs.ShowMeTheMoney();???//顯示:Steve?Jobs?$1234
20?
21?????alert(BillGates.constructor?==?Person);??//顯示:true
22?????alert(SteveJobs.constructor?==?Employee);??//顯示:true
23?????
24?????alert(BillGates.SayHello?==?SteveJobs.SayHello);?//顯示:false


??? 這段代碼表明,函數不但可以當作構造函數,而且還可以帶參數,還可以為對象添加成員和方法。其中的第9行,Employee構造函數又將自己接收的 this作為參數調用Person構造函數,這就是相當于調用基類的構造函數。第21、22行還表明這樣一個意思:BillGates是由Person構 造的,而SteveJobs是由Employee構造的。對象內置的constructor屬性還指明了構造對象所用的具體函數!

??? 其實,如果你愿意把函數當作“類”的話,她就是“類”,因為她本來就有“類”的那些特征。難道不是嗎?她生出的兒子各個都有相同的特征,而且構造函數也與類同名嘛!

??? 但要注意的是,用構造函數操作this對象創建出來的每一個對象,不但具有各自的成員數據,而且還具有各自的方法數據。換句話說,方法的代碼體(體現函數 邏輯的數據)在每一個對象中都存在一個副本。盡管每一個代碼副本的邏輯是相同的,但對象們確實是各自保存了一份代碼體。上例中的最后一句說明了這一實事, 這也解釋了JavaScript中的函數就是對象的概念。

??? 同一類的對象各自有一份方法代碼顯然是一種浪費。在傳統的對象語言中,方法函數并不象JavaScript那樣是個對象概念。即使也有象函數指針、方法指針或委托那樣的變化形式,但其實質也是對同一份代碼的引用。一般的對象語言很難遇到這種情況。

??? 不過,JavaScript語言有大的靈活性。我們可以先定義一份唯一的方法函數體,并在構造this對象時使用這唯一的函數對象作為其方法,就能共享方法邏輯。例如:

????function?SayHello()?????//先定義一份SayHello函數代碼
????{
????????alert(
"Hello,?I'm?"?+?this.name);
????};
????
????
function?Person(name)???//帶參數的構造函數
????{
????????
this.name?=?name;???//將參數值賦給給this對象的屬性
????????this.SayHello?=?SayHello;???//給this對象SayHello方法賦值為前面那份SayHello代碼。
????};

????
var?BillGates?=?new?Person("Bill?Gates");???//創建BillGates對象
????var?SteveJobs?=?new?Person("Steve?Jobs");???//創建SteveJobs對象
????
????alert(BillGates.SayHello?
==?SteveJobs.SayHello);?//顯示:true


????其中,最后一行的輸出結果表明兩個對象確實共享了一個函數對象。雖然,這段程序達到了共享了一份方法代碼的目的,但卻不怎么優雅。因為,定義 SayHello方法時反映不出其與Person類的關系。“優雅”這個詞用來形容代碼,也不知道是誰先提出來的。不過,這個詞反映了程序員已經從追求代 碼的正確、高效、可靠和易讀等基礎上,向著追求代碼的美觀感覺和藝術境界的層次發展,程序人生又多了些浪漫色彩。

?? 顯然,JavaScript早想到了這一問題,她的設計者們為此提供了一個有趣的prototype概念。

初看原型

??? prototype源自法語,軟件界的標準翻譯為“原型”,代表事物的初始形態,也含有模型和樣板的意義。JavaScript中的prototype概念恰如其分地反映了這個詞的內含,我們不能將其理解為C++的prototype那種預先聲明的概念。

??? JavaScript的所有function類型的對象都有一個prototype屬性。這個prototype屬性本身又是一個object類型的對 象,因此我們也可以給這個prototype對象添加任意的屬性和方法。既然prototype是對象的“原型”,那么由該函數構造出來的對象應該都會具 有這個“原型”的特性。事實上,在構造函數的prototype上定義的所有屬性和方法,都是可以通過其構造的對象直接訪問和調用的。也可以這么 說,prototype提供了一群同類對象共享屬性和方法的機制。

??? 我們先來看看下面的代碼:

????function?Person(name)
????{
????????
this.name?=?name;???//設置對象屬性,每個對象各自一份屬性數據
????};
????
????Person.prototype.SayHello?
=?function()??//給Person函數的prototype添加SayHello方法。
????{
????????alert(
"Hello,?I'm?"?+?this.name);
????}

????
var?BillGates?=?new?Person("Bill?Gates");???//創建BillGates對象
????var?SteveJobs?=?new?Person("Steve?Jobs");???//創建SteveJobs對象

????BillGates.SayHello();???
//通過BillGates對象直接調用到SayHello方法
????SteveJobs.SayHello();???//通過SteveJobs對象直接調用到SayHello方法

????alert(BillGates.SayHello?
==?SteveJobs.SayHello);?//因為兩個對象是共享prototype的SayHello,所以顯示:true


??? 程序運行的結果表明,構造函數的prototype上定義的方法確實可以通過對象直接調用到,而且代碼是共享的。顯然,把方法設置到prototype的 寫法顯得優雅多了,盡管調用形式沒有變,但邏輯上卻體現了方法與類的關系,相對前面的寫法,更容易理解和組織代碼。

??? 那么,對于多層次類型的構造函數情況又如何呢?

??? 我們再來看下面的代碼:

?1?????function?Person(name)???//基類構造函數
?2?????{
?3?????????this.name?=?name;
?4?????};
?5?????
?6?????Person.prototype.SayHello?=?function()??//給基類構造函數的prototype添加方法
?7?????{
?8?????????alert("Hello,?I'm?"?+?this.name);
?9?????};
10?????
11?????function?Employee(name,?salary)?//子類構造函數
12?????{
13?????????Person.call(this,?name);????//調用基類構造函數
14?????????this.salary?=?salary;
15?????};
16?????
17?????Employee.prototype?=?new?Person();??//建一個基類的對象作為子類原型的原型,這里很有意思
18?????
19?????Employee.prototype.ShowMeTheMoney?=?function()??//給子類添構造函數的prototype添加方法
20?????{
21?????????alert(this.name?+?"?$"?+?this.salary);
22?????};
23?
24?????var?BillGates?=?new?Person("Bill?Gates");???//創建基類Person的BillGates對象
25?????var?SteveJobs?=?new?Employee("Steve?Jobs",?1234);???//創建子類Employee的SteveJobs對象
26?
27?????BillGates.SayHello();???????//通過對象直接調用到prototype的方法
28?????SteveJobs.SayHello();???????//通過子類對象直接調用基類prototype的方法,關注!
29?????SteveJobs.ShowMeTheMoney();?//通過子類對象直接調用子類prototype的方法
30?
31?????alert(BillGates.SayHello?==?SteveJobs.SayHello);?//顯示:true,表明prototype的方法是共享的


??? 這段代碼的第17行,構造了一個基類的對象,并將其設為子類構造函數的prototype,這是很有意思的。這樣做的目的就是為了第28行,通過子類對象也可以直接調用基類prototype的方法。為什么可以這樣呢?

??? 原來,在JavaScript中,prototype不但能讓對象共享自己財富,而且prototype還有尋根問祖的天性,從而使得先輩們的遺產可以代 代相傳。當從一個對象那里讀取屬性或調用方法時,如果該對象自身不存在這樣的屬性或方法,就會去自己關聯的prototype對象那里尋找;如果 prototype沒有,又會去prototype自己關聯的前輩prototype那里尋找,直到找到或追溯過程結束為止。

??? 在JavaScript內部,對象的屬性和方法追溯機制是通過所謂的prototype鏈來實現的。當用new操作符構造對象時,也會同時將構造函數的 prototype對象指派給新創建的對象,成為該對象內置的原型對象。對象內置的原型對象應該是對外不可見的,盡管有些瀏覽器(如Firefox)可以 讓我們訪問這個內置原型對象,但并不建議這樣做。內置的原型對象本身也是對象,也有自己關聯的原型對象,這樣就形成了所謂的原型鏈。

??? 在原型鏈的最末端,就是Object構造函數prototype屬性指向的那一個原型對象。這個原型對象是所有對象的最老祖先,這個老祖宗實現了諸如 toString等所有對象天生就該具有的方法。其他內置構造函數,如Function, Boolean, String, Date和RegExp等的prototype都是從這個老祖宗傳承下來的,但他們各自又定義了自身的屬性和方法,從而他們的子孫就表現出各自宗族的那些 特征。

??? 這不就是“繼承”嗎?是的,這就是“繼承”,是JavaScript特有的“原型繼承”。

??? “原型繼承”是慈祥而又嚴厲的。原形對象將自己的屬性和方法無私地貢獻給孩子們使用,也并不強迫孩子們必須遵從,允許一些頑皮孩子按自己的興趣和愛好獨立 行事。從這點上看,原型對象是一位慈祥的母親。然而,任何一個孩子雖然可以我行我素,但卻不能動原型對象既有的財產,因為那可能會影響到其他孩子的利益。 從這一點上看,原型對象又象一位嚴厲的父親。我們來看看下面的代碼就可以理解這個意思了:

????function?Person(name)
????{
????????
this.name?=?name;
????};
????
????Person.prototype.company?
=?"Microsoft";?//原型的屬性
????
????Person.prototype.SayHello?
=?function()??//原型的方法
????{
????????alert(
"Hello,?I'm?"?+?this.name?+?"?of?"?+?this.company);
????};
????
????
var?BillGates?=?new?Person("Bill?Gates");
????BillGates.SayHello();???
//由于繼承了原型的東西,規規矩矩輸出:Hello,?I'm?Bill?Gates
????
????
var?SteveJobs?=?new?Person("Steve?Jobs");
????SteveJobs.company?
=?"Apple";????//設置自己的company屬性,掩蓋了原型的company屬性
????SteveJobs.SayHello?=?function()?//實現了自己的SayHello方法,掩蓋了原型的SayHello方法
????{
????????alert(
"Hi,?"?+?this.name?+?"?like?"?+?this.company?+?",?ha?ha?ha?");
????};

????SteveJobs.SayHello();???
//都是自己覆蓋的屬性和方法,輸出:Hi,?Steve?Jobs?like?Apple,?ha?ha?ha?
????
????BillGates.SayHello();???
//SteveJobs的覆蓋沒有影響原型對象,BillGates還是按老樣子輸出


??? 對象可以掩蓋原型對象的那些屬性和方法,一個構造函數原型對象也可以掩蓋上層構造函數原型對象既有的屬性和方法。這種掩蓋其實只是在對象自己身上創建了新 的屬性和方法,只不過這些屬性和方法與原型對象的那些同名而已。JavaScript就是用這簡單的掩蓋機制實現了對象的“多態”性,與靜態對象語言的虛 函數和重載(override)概念不謀而合。

????然而,比靜態對象語言更神奇的是,我們可以隨時給原型對象動態添加新的屬性和方法,從而動態地擴展基類的功能特性。這在靜態對象語言中是很難想象的。我們來看下面的代碼:

????function?Person(name)
????{
????????
this.name?=?name;
????};
????
????Person.prototype.SayHello?
=?function()??//建立對象前定義的方法
????{
????????alert(
"Hello,?I'm?"?+?this.name);
????};
????
????
var?BillGates?=?new?Person("Bill?Gates");???//建立對象
????
????BillGates.SayHello();
????
????Person.prototype.Retire?
=?function()????//建立對象后再動態擴展原型的方法
????{
????????alert(
"Poor?"?+?this.name?+?",?bye?bye!");
????};
????
????BillGates.Retire();?
//動態擴展的方法即可被先前建立的對象立即調用


????阿彌佗佛,原型繼承竟然可以玩出有這樣的法術!

原型擴展

????想必君的悟性極高,可能你會這樣想:如果在JavaScript內置的那些如Object和Function等函數的prototype上添加些新的方法和屬性,是不是就能擴展JavaScript的功能呢?

????那么,恭喜你,你得到了!

????在AJAX技術迅猛發展的今天,許多成功的AJAX項目的JavaScript運行庫都大量擴展了內置函數的prototype功能。比如微軟的 ASP.NET AJAX,就給這些內置函數及其prototype添加了大量的新特性,從而增強了JavaScript的功能。

????我們來看一段摘自MicrosoftAjax.debug.js中的代碼:

String.prototype.trim?=?function?String$trim()?{
????
if?(arguments.length?!==?0)?throw?Error.parameterCount();
????
return?this.replace(/^\s+|\s+$/g,?'');
}


????這段代碼就是給內置String函數的prototype擴展了一個trim方法,于是所有的String類對象都有了trim方法了。有了這個 擴展,今后要去除字符串兩段的空白,就不用再分別處理了,因為任何字符串都有了這個擴展功能,只要調用即可,真的很方便。

????當然,幾乎很少有人去給Object的prototype添加方法,因為那會影響到所有的對象,除非在你的架構中這種方法的確是所有對象都需要的。

????前兩年,微軟在設計AJAX類庫的初期,用了一種被稱為“閉包”(closure)的技術來模擬“類”。其大致模型如下:

????function?Person(firstName,?lastName,?age)
????{
????????
//私有變量:
????????var?_firstName?=?firstName;
????????
var?_lastName?=?lastName;

????????
//公共變量:
????????this.age?=?age;

????????
//方法:
????????this.getName?=?function()
????????{
????????????
return(firstName?+?"?"?+?lastName);
????????};
????????
this.SayHello?=?function()
????????{
????????????alert(
"Hello,?I'm?"?+?firstName?+?"?"?+?lastName);
????????};
????};
????
????
var?BillGates?=?new?Person("Bill",?"Gates",?53);
????
var?SteveJobs?=?new?Person("Steve",?"Jobs",?53);
????
????BillGates.SayHello();
????SteveJobs.SayHello();
????alert(BillGates.getName()?
+?"?"?+?BillGates.age);
????alert(BillGates.firstName);?????
//這里不能訪問到私有變量


????很顯然,這種模型的類描述特別象C#語言的描述形式,在一個構造函數里依次定義了私有成員、公共屬性和可用的方法,顯得非常優雅嘛。特別是“閉包”機制可以模擬對私有成員的保護機制,做得非常漂亮。

????所謂的“閉包”,就是在構造函數體內定義另外的函數作為目標對象的方法函數,而這個對象的方法函數反過來引用外層外層函數體中的臨時變量。這使得 只要目標對象在生存期內始終能保持其方法,就能間接保持原構造函數體當時用到的臨時變量值。盡管最開始的構造函數調用已經結束,臨時變量的名稱也都消失 了,但在目標對象的方法內卻始終能引用到該變量的值,而且該值只能通這種方法來訪問。即使再次調用相同的構造函數,但只會生成新對象和方法,新的臨時變量 只是對應新的值,和上次那次調用的是各自獨立的。的確很巧妙!

????但是前面我們說過,給每一個對象設置一份方法是一種很大的浪費。還有,“閉包”這種間接保持變量值的機制,往往會給JavaSript的垃圾回收 器制造難題。特別是遇到對象間復雜的循環引用時,垃圾回收的判斷邏輯非常復雜。無獨有偶,IE瀏覽器早期版本確實存在JavaSript垃圾回收方面的內 存泄漏問題。再加上“閉包”模型在性能測試方面的表現不佳,微軟最終放棄了“閉包”模型,而改用“原型”模型。正所謂“有得必有失”嘛。

????原型模型需要一個構造函數來定義對象的成員,而方法卻依附在該構造函數的原型上。大致寫法如下:

????//定義構造函數
????function?Person(name)
????{
????????
this.name?=?name;???//在構造函數中定義成員
????};
????
????
//方法定義到構造函數的prototype上
????Person.prototype.SayHello?=?function()
????{
????????alert(
"Hello,?I'm?"?+?this.name);
????};????
????
????
//子類構造函數
????function?Employee(name,?salary)
????{
????????Person.call(
this,?name);????//調用上層構造函數
????????this.salary?=?salary;???????//擴展的成員
????};
????
????
//子類構造函數首先需要用上層構造函數來建立prototype對象,實現繼承的概念
????Employee.prototype?=?new?Person()???//只需要其prototype的方法,此對象的成員沒有任何意義!
????
????
//子類方法也定義到構造函數之上
????Employee.prototype.ShowMeTheMoney?=?function()
????{
????????alert(
this.name?+?"?$"?+?this.salary);
????};
????
????
var?BillGates?=?new?Person("Bill?Gates");
????BillGates.SayHello();????
????
????
var?SteveJobs?=?new?Employee("Steve?Jobs",?1234);
????SteveJobs.SayHello();
????SteveJobs.ShowMeTheMoney();

????原型類模型雖然不能模擬真正的私有變量,而且也要分兩部分來定義類,顯得不怎么“優雅”。不過,對象間的方法是共享的,不會遇到垃圾回收問題,而且性能優于“閉包”模型。正所謂“有失必有得”嘛。

????在原型模型中,為了實現類繼承,必須首先將子類構造函數的prototype設置為一個父類的對象實例。創建這個父類對象實例的目的就是為 了構成原型鏈,以起到共享上層原型方法作用。但創建這個實例對象時,上層構造函數也會給它設置對象成員,這些對象成員對于繼承來說是沒有意義的。雖然,我 們也沒有給構造函數傳遞參數,但確實創建了若干沒有用的成員,盡管其值是undefined,這也是一種浪費啊。

????唉!世界上沒有完美的事情啊!

原型真諦

????正當我們感概萬分時,天空中一道紅光閃過,祥云中出現了觀音菩薩。只見她手持玉凈瓶,輕拂翠柳枝,灑下幾滴甘露,頓時讓JavaScript又添新的靈氣。

????觀音灑下的甘露在JavaScript的世界里凝結成塊,成為了一種稱為“語法甘露”的東西。這種語法甘露可以讓我們編寫的代碼看起來更象對象語言。

????要想知道這“語法甘露”為何物,就請君側耳細聽。

????在理解這些語法甘露之前,我們需要重新再回顧一下JavaScript構造對象的過程。

????我們已經知道,用 var anObject = new aFunction() 形式創建對象的過程實際上可以分為三步:第一步是建立一個新對象;第二步將該對象內置的原型對象設置為構造函數prototype引用的那個原型對象;第 三步就是將該對象作為this參數調用構造函數,完成成員設置等初始化工作。對象建立之后,對象上的任何訪問和操作都只與對象自身及其原型鏈上的那串對象 有關,與構造函數再扯不上關系了。換句話說,構造函數只是在創建對象時起到介紹原型對象和初始化對象兩個作用。

????那么,我們能否自己定義一個對象來當作原型,并在這個原型上描述類,然后將這個原型設置給新創建的對象,將其當作對象的類呢?我們又能否將這個原型中的一個方法當作構造函數,去初始化新建的對象呢?例如,我們定義這樣一個原型對象:

????var?Person?=??//定義一個對象來作為原型類
????{
????????Create:?
function(name,?age)??//這個當構造函數
????????{
????????????
this.name?=?name;
????????????
this.age?=?age;
????????},
????????SayHello:?
function()??//定義方法
????????{
????????????alert(
"Hello,?I'm?"?+?this.name);
????????},
????????HowOld:?
function()??//定義方法
????????{
????????????alert(
this.name?+?"?is?"?+?this.age?+?"?years?old.");
????????}
????};

????這個JSON形式的寫法多么象一個C#的類啊!既有構造函數,又有各種方法。如果可以用某種形式來創建對象,并將對象的內置的原型設置為上面這個“類”對象,不就相當于創建該類的對象了嗎?

????但遺憾的是,我們幾乎不能訪問到對象內置的原型屬性!盡管有些瀏覽器可以訪問到對象的內置原型,但這樣做的話就只能限定了用戶必須使用那種瀏覽器。這也幾乎不可行。

????那么,我們可不可以通過一個函數對象來做媒介,利用該函數對象的prototype屬性來中轉這個原型,并用new操作符傳遞給新建的對象呢?

????其實,象這樣的代碼就可以實現這一目標:

????function?anyfunc(){};???????????//定義一個函數軀殼
????anyfunc.prototype?=?Person;?????//將原型對象放到中轉站prototype
????var?BillGates?=?new?anyfunc();??//新建對象的內置原型將是我們期望的原型對象

????不過,這個anyfunc函數只是一個軀殼,在使用過這個軀殼之后它就成了多余的東西了,而且這和直接使用構造函數來創建對象也沒啥不同,有點不爽。

????可是,如果我們將這些代碼寫成一個通用函數,而那個函數軀殼也就成了函數內的函數,這個內部函數不就可以在外層函數退出作用域后自動消亡嗎?而且,我們可以將原型對象作為通用函數的參數,讓通用函數返回創建的對象。我們需要的就是下面這個形式:

????function?New(aClass,?aParams)????//通用創建函數
????{
????????
function?new_()?????//定義臨時的中轉函數殼
????????{
????????????aClass.Create.apply(
this,?aParams);???//調用原型中定義的的構造函數,中轉構造邏輯及構造參數
????????};
????????new_.prototype?
=?aClass;????//準備中轉原型對象
????????return?new?new_();??????????//返回建立最終建立的對象
????};
????
????
var?Person?=????????//定義的類
????{
????????Create:?
function(name,?age)
????????{
????????????
this.name?=?name;
????????????
this.age?=?age;
????????},
????????SayHello:?
function()
????????{
????????????alert(
"Hello,?I'm?"?+?this.name);
????????},
????????HowOld:?
function()
????????{
????????????alert(
this.name?+?"?is?"?+?this.age?+?"?years?old.");
????????}
????};
????
????
var?BillGates?=?New(Person,?["Bill?Gates",?53]);??//調用通用函數創建對象,并以數組形式傳遞構造參數
????BillGates.SayHello();
????BillGates.HowOld();

????alert(BillGates.constructor?
==?Object);?????//輸出:true

????這里的通用函數New()就是一個“語法甘露”!這個語法甘露不但中轉了原型對象,還中轉了構造函數邏輯及構造參數。

????有趣的是,每次創建完對象退出New函數作用域時,臨時的new_函數對象會被自動釋放。由于new_的prototype屬性被設置為新的原型 對象,其原來的原型對象和new_之間就已解開了引用鏈,臨時函數及其原來的原型對象都會被正確回收了。上面代碼的最后一句證明,新創建的對象的 constructor屬性返回的是Object函數。其實新建的對象自己及其原型里沒有constructor屬性,那返回的只是最頂層原型對象的構造 函數,即Object。

????有了New這個語法甘露,類的定義就很像C#那些靜態對象語言的形式了,這樣的代碼顯得多么文靜而優雅啊!

????當然,這個代碼僅僅展示了“語法甘露”的概念。我們還需要多一些的語法甘露,才能實現用簡潔而優雅的代碼書寫類層次及其繼承關系。好了,我們再來看一個更豐富的示例吧:

????//語法甘露:
????var?object?=????//定義小寫的object基本類,用于實現最基礎的方法等
????{
????????isA:?
function(aType)???//一個判斷類與類之間以及對象與類之間關系的基礎方法
????????{
????????????
var?self?=?this;
????????????
while(self)
????????????{
????????????????
if?(self?==?aType)
??????????????????
return?true;
????????????????self?
=?self.Type;
????????????};
????????????
return?false;
????????}
????};
????
????
function?Class(aBaseClass,?aClassDefine)????//創建類的函數,用于聲明類及繼承關系
????{
????????
function?class_()???//創建類的臨時函數殼
????????{
????????????
this.Type?=?aBaseClass;????//我們給每一個類約定一個Type屬性,引用其繼承的類
????????????for(var?member?in?aClassDefine)
????????????????
this[member]?=?aClassDefine[member];????//復制類的全部定義到當前創建的類
????????};
????????class_.prototype?
=?aBaseClass;
????????
return?new?class_();
????};
????
????
function?New(aClass,?aParams)???//創建對象的函數,用于任意類的對象創建
????{
????????
function?new_()?????//創建對象的臨時函數殼
????????{
????????????
this.Type?=?aClass;????//我們也給每一個對象約定一個Type屬性,據此可以訪問到對象所屬的類
????????????if?(aClass.Create)
??????????????aClass.Create.apply(
this,?aParams);???//我們約定所有類的構造函數都叫Create,這和DELPHI比較相似
????????};
????????new_.prototype?
=?aClass;
????????
return?new?new_();
????};

????
//語法甘露的應用效果:????
????var?Person?=?Class(object,??????//派生至object基本類
????{
????????Create:?
function(name,?age)
????????{
????????????
this.name?=?name;
????????????
this.age?=?age;
????????},
????????SayHello:?
function()
????????{
????????????alert(
"Hello,?I'm?"?+?this.name?+?",?"?+?this.age?+?"?years?old.");
????????}
????});
????
????
var?Employee?=?Class(Person,????//派生至Person類,是不是和一般對象語言很相似?
????{
????????Create:?
function(name,?age,?salary)
????????{
????????????Person.Create.call(
this,?name,?age);??//調用基類的構造函數
????????????this.salary?=?salary;
????????},
????????ShowMeTheMoney:?
function()
????????{
????????????alert(
this.name?+?"?$"?+?this.salary);
????????}
????});

????
var?BillGates?=?New(Person,?["Bill?Gates",?53]);
????
var?SteveJobs?=?New(Employee,?["Steve?Jobs",?53,?1234]);
????BillGates.SayHello();
????SteveJobs.SayHello();
????SteveJobs.ShowMeTheMoney();
????
????
var?LittleBill?=?New(BillGates.Type,?["Little?Bill",?6]);???//根據BillGate的類型創建LittleBill
????LittleBill.SayHello();
????
????alert(BillGates.isA(Person));???????
//true
????alert(BillGates.isA(Employee));?????//false
????alert(SteveJobs.isA(Person));???????//true
????alert(Person.isA(Employee));????????//false
????alert(Employee.isA(Person));????????//true

????“語法甘露”不用太多,只要那么一點點,就能改觀整個代碼的易讀性和流暢性,從而讓代碼顯得更優雅。有了這些語法甘露,JavaScript就很像一般對象語言了,寫起代碼了感覺也就爽多了!

????令人高興的是,受這些甘露滋養的JavaScript程序效率會更高。因為其原型對象里既沒有了毫無用處的那些對象級的成員,而且還不存在 constructor屬性體,少了與構造函數間的牽連,但依舊保持了方法的共享性。這讓JavaScript在追溯原型鏈和搜索屬性及方法時,少費許多 工夫啊。

????我們就把這種形式稱為“甘露模型”吧!其實,這種“甘露模型”的原型用法才是符合prototype概念的本意,才是的JavaScript原型的真諦!

????想必微軟那些設計AJAX架構的工程師看到這個甘露模型時,肯定后悔沒有早點把AJAX部門從美國搬到咱中國的觀音廟來,錯過了觀音菩薩的點化。 當然,我們也只能是在代碼的示例中,把Bill Gates當作對象玩玩,真要讓他放棄上帝轉而皈依我佛肯定是不容易的,機緣未到啊!如果哪天你在微軟新出的AJAX類庫中看到這種甘露模型,那才是真正 的緣分!

編程的快樂

????在軟件工業迅猛發展的今天,各式各樣的編程語言層出不窮,新語言的誕生,舊語言的演化,似乎已經讓我們眼花繚亂。為了適應面向對象編程的潮 流,JavaScript語言也在向完全面向對象的方向發展,新的JavaScript標準已經從語義上擴展了許多面向對象的新元素。與此相反的是,許多 靜態的對象語言也在向JavaScript的那種簡潔而幽雅的方向發展。例如,新版本的C#語言就吸收了JSON那樣的簡潔表示法,以及一些其他形式的 JavaScript特性。

????我們應該看到,隨著RIA(強互聯應用)的發展和普及,AJAX技術也將逐漸淡出江湖,JavaScript也將最終消失或演化成其他形式的語 言。但不管編程語言如何發展和演化,編程世界永遠都會在“數據”與“代碼”這千絲萬縷的糾纏中保持著無限的生機。只要我們能看透這一點,我們就能很容易地 學習和理解軟件世界的各種新事物。不管是已熟悉的過程式編程,還是正在發展的函數式編程,以及未來量子糾纏態的大規模并行式編程,我們都有足夠的法力來化 解一切復雜的難題。

????佛最后淡淡地說:只要我們放下那些表面的“類”,放下那些對象的“自我”,就能達到一種“對象本無根,類型亦無形”的境界,從而將自我融入到整個 宇宙的生命輪循環中。我們將沒有自我,也沒有自私的欲望,你就是我,我就是你,你中有我,我中有你。這時,我們再看這生機勃勃的編程世界時,我們的內心將 自然生起無限的慈愛之心,這種慈愛之心不是虛偽而是真誠的。關愛他人就是關愛自己,就是關愛這世界中的一切。那么,我們的心是永遠快樂的,我們的程序是永 遠快樂的,我們的類是永遠快樂的,我們的對象也是永遠快樂的。這就是編程的極樂!

????說到這里,在座的比丘都猶如醍醐灌頂,心中豁然開朗。看看左邊這位早已喜不自禁,再看看右邊那位也是心花怒放。

????驀然回首時,唯見君拈花微笑...

原著:李戰(leadzen).深圳 2008-2-23

總結

以上是生活随笔為你收集整理的悟透JavaScript(理解JS面向对象的好文章)的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。

欧美一级视频免费看 | 免费看国产黄色 | 国产欧美综合在线观看 | 国产最顶级的黄色片在线免费观看 | 久久精品这里精品 | 五月在线视频 | 99色资源 | 日本激情视频中文字幕 | 亚洲在线精品 | 国产99久久九九精品免费 | 久久精品视频在线免费观看 | 久草视频一区 | 亚洲精品看片 | 五月婷婷视频在线 | 日韩黄色一区 | 国产精品久久久区三区天天噜 | 国产美女视频免费 | 色综合久久88 | 天天操人| 中文字幕一区二区三区久久蜜桃 | 午夜精品视频一区二区三区在线看 | 婷婷久久综合九色综合 | www毛片com| 日韩欧美精品一区二区 | 黄色中文字幕 | 国产精品igao视频网入口 | 欧美做受高潮 | 97国产大学生情侣白嫩酒店 | 日韩1页| 国产日韩精品在线 | 国产精品一区二区三区电影 | 999电影免费在线观看 | 免费在线观看的av网站 | 国产丝袜在线 | 欧美精品一区二区在线播放 | 91精品国自产在线 | 日韩电影久久 | 福利久久 | 国产午夜麻豆影院在线观看 | 91精品一| a黄色大片 | 中文字幕乱码电影 | 国产精品igao视频网入口 | 中文字幕视频 | 久久久影视| 欧美日韩国产精品一区二区亚洲 | 亚洲国产中文字幕在线视频综合 | 欧美日韩视频在线一区 | 在线免费观看视频一区二区三区 | 亚洲精品影视 | 日本中文字幕高清 | 久久九九影视 | 久久精品99国产精品 | 麻豆一区二区 | 免费h漫在线观看 | av一区在线播放 | 久久天天躁狠狠躁亚洲综合公司 | 亚洲网站在线看 | 97超碰网| 婷婷射五月 | 91福利视频一区 | 粉嫩av一区二区三区四区在线观看 | 精品一区二区av | 操一草| 中文字幕在线观看完整版电影 | 亚洲国产美女精品久久久久∴ | 黄a在线看 | 人人爽人人爽人人 | 久久婷五月| 国产原创在线 | 亚洲 在线 | 成在人线av | 四虎成人免费观看 | 成人欧美一区二区三区在线观看 | 青青草华人在线视频 | 亚洲国产欧洲综合997久久, | 一区二区三区中文字幕在线 | 中文字幕视频免费观看 | 精品亚洲网 | 亚洲综合成人专区片 | 欧美在线视频一区二区三区 | 天堂网一区| 欧美激情视频免费看 | 久草在线费播放视频 | av成人免费在线观看 | 视频成人永久免费视频 | 精品亚洲一区二区三区 | 久久久视频在线 | 久草在线久草在线2 | 欧美日韩在线观看不卡 | 日本在线观看一区 | 国产a网站 | 91视频在线观看大全 | 日韩av偷拍 | 国产精品一区二区久久精品爱微奶 | 网址你懂的在线观看 | 91成人亚洲| 99精品视频免费全部在线 | 99久热在线精品视频成人一区 | 99久久这里只有精品 | 成人免费视频网站 | 精品国产乱码久久久久 | 国产精品美女久久久网av | 国产精品成人自产拍在线观看 | 国产精品久久久久亚洲影视 | av中文天堂在线 | 精品国产免费人成在线观看 | 国产精品乱码久久久久久1区2区 | 玖操| 999色视频 | 国产精品理论在线观看 | 成人一区二区三区中文字幕 | 久久6精品 | 免费特级黄毛片 | 久久avav| 亚洲精品成人在线 | 久久人人爽av | 精品网站999www| 在线精品一区二区 | 久久久不卡影院 | 欧美日比视频 | 色综合人人 | 在线电影日韩 | 亚洲精品国产精品国 | 在线观看中文字幕视频 | 国语久久| 91精品国产综合久久久久久久 | 9免费视频 | 日韩精品视频免费在线观看 | 91麻豆精品国产91久久久久 | 精品亚洲va在线va天堂资源站 | 天天干天天干天天 | 亚洲少妇天堂 | 91中文字幕永久在线 | 香蕉视频在线看 | 人人爱人人爽 | 国产特级毛片aaaaaa毛片 | 久久久 精品 | 久久综合网色—综合色88 | 精品一区 在线 | 久久伊人综合 | 日韩久久精品一区二区 | 亚洲一区二区精品在线 | .精品久久久麻豆国产精品 亚洲va欧美 | 日日添夜夜添 | 成人免费视频视频在线观看 免费 | 最新色站 | 色诱亚洲精品久久久久久 | 黄色福利视频网站 | 在线免费观看视频a | 国产精品久久久久久久久久久久午夜片 | 亚洲精品乱码久久久久久高潮 | 91精品视频免费观看 | 国产精品一区专区欧美日韩 | 欧美色久 | 蜜臀av麻豆 | 国产精品成久久久久三级 | 国产99久久久国产精品 | 91精品在线视频观看 | 免费h漫在线观看 | 波多野结衣在线视频免费观看 | 日韩成人邪恶影片 | 人人爽人人澡 | 天堂va在线观看 | www色| 精品伦理一区二区三区 | 精品在线小视频 | 色综合色综合久久综合频道88 | 久久综合九色 | 国产aaa大片| 91精品国产自产在线观看永久 | 国产在线传媒 | av电影免费看 | 91女人18片女毛片60分钟 | 99免费看片| 久久精品视频在线播放 | 欧美精选一区二区三区 | 五月天免费网站 | 在线国产精品视频 | 色妞久久福利网 | 亚洲一级电影在线观看 | 成人av免费播放 | 久久精品专区 | 国产精品美女久久久久久久 | 最近中文字幕国语免费av | 中文字幕二区三区 | 国产成人精品久 | 4438全国亚洲精品在线观看视频 | 一区二区精品 | 懂色av一区二区在线播放 | 中文字幕av免费观看 | 色综合久久久久网 | 亚洲成av人片一区二区梦乃 | 公开超碰在线 | 日韩成人中文字幕 | 久草网视频在线观看 | 色妞久久福利网 | 成人免费观看大片 | 亚洲欧美在线综合 | 精品日韩在线一区 | 国产久视频 | 欧美超碰在线 | www久久久久 | 97小视频 | 超碰在线网 | 国产精品美女久久久久久网站 | 色com| 欧美日韩国产二区 | 精品国产乱码久久 | 在线国产一区 | 亚洲天堂激情 | 狠狠色伊人亚洲综合网站野外 | 91精品一区二区三区久久久久久 | 婷婷午夜天 | a级黄色片视频 | 久久精品电影院 | 免费一级日韩欧美性大片 | 97国产精品一区二区 | 国产999精品久久久影片官网 | 国产伦精品一区二区三区… | 亚洲欧美日韩国产一区二区 | 精品国产乱码久久久久久三级人 | 西西人体4444www高清视频 | 国产资源中文字幕 | 国产原创av片 | 国产精品久久久久久久久久久免费看 | 日韩欧美高清在线 | 国产一区在线视频播放 | 色中文字幕在线观看 | 国产精品一区二区免费在线观看 | av中文在线播放 | 亚洲激情在线视频 | www免费网站在线观看 | 国产五月 | 欧美一区二区日韩一区二区 | 美女视频黄的免费的 | www.久久色 | 免费看黄电影 | 日韩精品免费一线在线观看 | 狠狠色丁香婷婷综合久小说久 | 欧美在线aaa | 在线a视频 | 91黄色在线看| 国产精品久久久久aaaa九色 | 久久久久久久久久国产精品 | 麻豆久久久久 | 91精品在线免费 | 日韩高清在线一区二区三区 | 1024手机基地在线观看 | 欧美精选一区二区三区 | 欧美极品xxxxx | 人人插人人草 | 麻豆91精品视频 | 国产高清av在线播放 | 久久久精品欧美一区二区免费 | 欧美综合色在线图区 | 不卡的av中文字幕 | 中文字幕在线观看资源 | 久久66热这里只有精品 | 色婷婷狠狠五月综合天色拍 | 亚洲一区欧美精品 | 亚洲婷婷在线视频 | 国产成人a亚洲精品v | 色视频成人在线观看免 | 少妇18xxxx性xxxx片 | 久久久免费电影 | 欧美日韩在线第一页 | 亚洲午夜在线视频 | av中文字幕第一页 | 国内精品中文字幕 | 成人午夜免费剧场 | 99精品视频在线播放观看 | 日韩欧美第二页 | 国产精品九九视频 | 国产一区在线免费观看视频 | 国产97在线观看 | 九九视频免费观看视频精品 | 69精品 | 在线观看亚洲国产精品 | 日日干夜夜草 | 日韩一区二区三区高清免费看看 | 射综合网| 91一区啪爱嗯打偷拍欧美 | 中文字幕中文中文字幕 | 超碰在线公开 | 婷婷在线综合 | 国产中文字幕视频在线观看 | 午夜婷婷在线播放 | 国产片免费在线观看视频 | 日韩激情视频在线观看 | 亚洲午夜精品在线观看 | 美女国内精品自产拍在线播放 | 欧美精品久久久久久久久久 | 97人人模人人爽人人少妇 | 国产一区免费在线 | 激情文学综合丁香 | 五月婷婷综合激情 | 国产精品成人免费精品自在线观看 | 天堂av官网 | 国产美女在线精品免费观看 | 婷婷综合在线 | 911国产精品 | 高清日韩一区二区 | 久久精品国产一区二区三 | 成人h动漫精品一区二 | 综合久久2023| 97在线观看免费高清完整版在线观看 | 婷婷国产视频 | 精品国产精品久久 | 欧美精品乱码久久久久 | 国产在线精品观看 | 国产精品一区二区久久久 | 91av手机在线观看 | 久久久久女人精品毛片九一 | 欧美福利视频一区 | 国产精品久久久久久麻豆一区 | 亚洲三级网| 亚洲日本在线视频观看 | 99中文在线 | 黄色av在 | av在线免费网 | 国产黄免费看 | 婷婷激情站 | 欧美三级免费 | 亚洲精品福利在线 | 日日干日日 | 久久久久久久久久久综合 | 天天躁日日 | 国产精品爽爽久久久久久蜜臀 | 国产精品一区二区三区四 | 久久伊人免费视频 | 日韩欧美视频二区 | 天天射天天干 | 婷婷丁香在线视频 | 香蕉视频免费在线播放 | 69人人| 992tv人人网tv亚洲精品 | 亚洲国产影院av久久久久 | 超碰97中文 | 97香蕉久久国产在线观看 | 日韩在线播放av | 国产精品久久久一区二区 | 免费观看一区二区 | 色偷偷网站视频 | 天天操人人要 | 久久久久久久av | 国产99久久九九精品 | 精品在线视频一区 | 亚洲精品一区二区三区四区高清 | 色国产精品 | 亚洲在线网址 | 日韩在线网址 | 91精品国产自产在线观看永久 | 国产精品视频地址 | 在线观看视频 | 亚洲欧美激情插 | 色在线观看网站 | 91人人澡人人爽 | 国产亚洲精品久久网站 | 亚洲精品在线电影 | 国产精品人成电影在线观看 | 看全黄大色黄大片 | 最新中文字幕 | 人人爽久久涩噜噜噜网站 | 亚洲精品福利视频 | 99视频在线观看视频 | 精品av在线播放 | 四虎在线观看视频 | 96精品高清视频在线观看软件特色 | 少妇做爰k8经典 | 国产一区精品在线观看 | 久久中文字幕在线视频 | 麻豆传媒一区二区 | 亚洲精品高清视频 | 免费看av片网站 | 在线免费色 | 亚洲高清视频一区二区三区 | 美女视频黄是免费的 | 国产精品美女免费看 | 中中文字幕av在线 | 香蕉精品视频在线观看 | 欧美成人91 | 成人97视频一区二区 | 久久视频精品在线观看 | 国产一级片网站 | 在线91视频 | 国产亚洲婷婷 | 中文字幕欧美日韩va免费视频 | 日韩精品一区二区免费 | 日韩免费一二三区 | 国产不卡视频在线播放 | 欧美 亚洲 另类 激情 另类 | 日韩极品在线 | 色欲综合视频天天天 | 91视频一8mav | 西西www444 | 在线v片免费观看视频 | 国产在线不卡精品 | 香蕉影视 | 久草在在线视频 | 亚洲午夜激情网 | 婷婷网在线 | 91精品久久久久久综合乱菊 | 国产成人综合图片 | 久久精品久久99精品久久 | 久久久久综合 | 91自拍视频在线观看 | 麻花豆传媒mv在线观看 | 色伊人网 | 国产精品video | 成人在线观看你懂的 | 制服丝袜一区二区 | 97碰在线视频| 亚洲日本va午夜在线电影 | 中文字幕永久免费 | 日韩av电影手机在线观看 | 波多野结衣理论片 | 天天干天天射天天爽 | 国产69精品久久99不卡的观看体验 | 人人讲 | 欧美影片| 午夜精选视频 | 欧美精品中文在线免费观看 | 狠狠88综合久久久久综合网 | 深夜福利视频一区二区 | 亚洲春色综合另类校园电影 | 久久公开视频 | 亚洲精品国产麻豆 | www.久草.com | 国产高清视频免费最新在线 | 精品免费视频123区 午夜久久成人 | 婷婷久月| 亚洲涩涩涩 | 久久免费视屏 | 97视频免费观看 | 久久久午夜精品理论片中文字幕 | 日本护士三级少妇三级999 | 国产美女在线观看 | av观看久久久 | 中文字幕制服丝袜av久久 | 欧美一区三区四区 | 九九视频免费观看视频精品 | 夜夜躁狠狠躁日日躁 | 天天做日日爱夜夜爽 | 四虎影视精品永久在线观看 | 日韩中文字幕免费在线观看 | 欧美日韩国产区 | 96香蕉视频| 国产成人免费av电影 | 91色蜜桃 | 狠狠色香婷婷久久亚洲精品 | 能在线看的av | 国产成人亚洲精品自产在线 | 国产色女 | 国产高清区 | 91精品国产三级a在线观看 | 国产96精品 | 伊人久久影视 | 亚洲涩涩色 | 黄色大片国产 | 日韩电影在线观看中文字幕 | www.91国产 | 日本久久99| 久久综合干 | 国产在线精品播放 | 国产美女精品 | 日韩精品视频久久 | 99爱爱| 在线观看一区二区精品 | 又黄又爽的视频在线观看网站 | 成人午夜在线观看 | 人人爱人人添 | 日韩视频中文字幕在线观看 | 日本黄色特级片 | 一区二区三区在线观看中文字幕 | 国产激情免费 | 亚洲一区精品人人爽人人躁 | 国产不卡免费视频 | 精品视频区 | 国产成人免费av电影 | 在线99热| 久久草视频 | 精品高清美女精品国产区 | 97超碰人人模人人人爽人人爱 | 九九久久影院 | 男女激情免费网站 | 午夜久久视频 | 国产色女人 | 天天操·夜夜操 | 一本大道久久精品懂色aⅴ 五月婷社区 | 91精品视屏 | 中文字幕区 | 特级毛片在线 | 超碰在线人人艹 | 国产精品1区2区3区 久久免费视频7 | 在线观看成人av | 中文字幕 国产专区 | 国产一区成人在线 | 99视频偷窥在线精品国自产拍 | 国产精品一区二区三区99 | 国内精品视频在线 | 六月丁香激情综合色啪小说 | 激情导航 | 国产黄| 一区二区三区动漫 | 欧美亚洲国产一卡 | 久久综合五月婷婷 | 日韩欧美一级二级 | 欧美无极色| 日韩av电影中文字幕 | 国产在线观看二区 | 91视视频在线直接观看在线看网页在线看 | 91成人蝌蚪| 麻豆国产露脸在线观看 | 午夜精品久久久久 | 久久久久影视 | 国产精品精品国产婷婷这里av | 国产成人一区二区精品非洲 | 99精品国产aⅴ | 中文久草 | 天天爽夜夜爽精品视频婷婷 | www.少妇 | 99免费在线播放99久久免费 | 亚洲婷婷丁香 | 毛片在线网 | 91豆麻精品91久久久久久 | 日韩精品一卡 | 亚洲成人频道 | 国产亚洲无| 免费又黄又爽 | 国产免费久久久久 | 精产嫩模国品一二三区 | 亚洲视频在线观看 | 久久午夜色播影院免费高清 | 在线99热 | 国产精品久久久777 成人手机在线视频 | 玖操 | 日本特黄一级片 | 9999免费视频 | 亚洲视频999 | 国产精品一区二区在线观看免费 | 日韩午夜电影 | av成人在线观看 | 欧美在线视频一区二区三区 | 国产精品一区二区三区四 | 涩涩色亚洲一区 | 最近免费观看的电影完整版 | 欧美日韩国产一区二区三区在线观看 | 91人人人| 亚洲网站在线看 | 欧美日韩高清在线一区 | 人人澡人人爱 | 人人爱在线视频 | 久久伊人精品天天 | 欧美精品一区二区免费 | 中国一级片免费看 | 亚洲五月花 | 日韩美女久久 | 九九九九精品 | 麻豆视屏| 国产在线欧美日韩 | 久久精品资源 | 99久久99久久精品国产片果冰 | 综合五月婷婷 | 精品国产一区二区三区av性色 | 精品久久久久久亚洲综合网站 | 欧美日韩后 | 日日夜夜精品免费观看 | 亚洲一区二区高潮无套美女 | 成年人在线电影 | 国产中文字幕在线视频 | 久久精品女人毛片国产 | 国产精品久久综合 | 中文字幕一区二区三区乱码在线 | 少妇精69xxtheporn | 久久久免费 | 久久久久久久久电影 | 成人免费视频在线观看 | 成人四虎 | 成人av一二三区 | 久久久久国产成人精品亚洲午夜 | 一区 在线观看 | 91黄视频在线 | 手机看片久久 | 黄视频色网站 | 高清一区二区三区 | 日韩精品2区 | 草久在线观看视频 | 国产精品亚洲视频 | 婷婷在线网站 | 欧美一区二区免费在线观看 | 久草免费手机视频 | 在线观看视频一区二区三区 | 亚洲最新在线视频 | 国产亚洲精品久久久久动 | 成人av一区二区兰花在线播放 | 欧美人体xx| 亚洲九九爱| 日韩免费高清 | 最新中文字幕在线资源 | 精品美女在线观看 | 国产精品观看在线亚洲人成网 | av免费观看在线 | 欧美二区在线播放 | 激情视频国产 | 伊人午夜| 亚洲专区中文字幕 | 亚洲 欧美变态 另类 综合 | 婷婷视频在线播放 | 97夜夜澡人人双人人人喊 | 亚洲国产中文字幕在线观看 | 国产亚洲精品美女久久 | 欧美一二三四在线 | 日韩在线理论 | 视频一区在线播放 | 在线观看v片 | 日韩在线观看视频免费 | 日日操日日插 | 国产欧美综合在线观看 | av福利超碰网站 | 久久久在线 | 97久久久免费福利网址 | 操高跟美女 | 黄色av网站在线免费观看 | 日韩在线免费观看视频 | 日韩中文字幕国产 | 亚洲天堂色婷婷 | 丁香激情综合久久伊人久久 | 国产 欧美 日韩 | 国产精品久久久毛片 | 免费国产一区二区视频 | 天天射天天爱天天干 | 亚洲精品系列 | 91精品国产高清 | 国产黄在线观看 | 国产亚州av | 深夜福利视频一区二区 | 免费在线观看一区二区三区 | av网站免费在线 | 国产精美视频 | 中文字幕一区三区 | 亚洲男人天堂2018 | 一级片视频免费观看 | 精品美女视频 | 久久综合精品一区 | 国产专区精品视频 | 天天激情 | 亚洲区精品视频 | 高潮毛片无遮挡高清免费 | 韩国av永久免费 | 曰本三级在线 | 97成人免费 | 国内丰满少妇猛烈精品播 | 波多野结衣在线视频免费观看 | 91精选在线| 中文在线字幕免费观看 | 免费看的视频 | 亚洲视频axxx | 欧美色精品天天在线观看视频 | 天天综合亚洲 | 中文av不卡 | 亚洲综合欧美激情 | 国产午夜在线观看视频 | 亚洲香蕉视频 | 国产vs久久 | 亚洲高清色综合 | 国产中文字幕久久 | 国产中文字幕视频在线观看 | 久久夜色精品国产欧美乱极品 | 欧美一级在线观看视频 | 九九热免费视频在线观看 | 成人av片在线观看 | 在线激情电影 | 亚洲精品中文在线 | 午夜av免费观看 | 国产精品成人一区二区 | 国产一级片直播 | 最近乱久中文字幕 | 亚洲精品xx | www91在线观看 | 中文字幕一区2区3区 | 狠狠色狠狠色合久久伊人 | 98超碰在线 | 日韩中文字幕在线观看 | 91麻豆精品国产自产 | 五月婷婷在线综合 | 精品女同一区二区三区在线观看 | 欧美一区二区在线刺激视频 | 国产免费资源 | 麻豆国产在线播放 | 香蕉在线观看视频 | 狠狠色丁香婷婷综合久小说久 | 中文字幕在线影院 | 夜夜骑日日操 | 亚洲成人免费 | 久久在线视频在线 | 国产一级淫片在线观看 | 欧美亚洲成人xxx | 久久精品99国产精品 | 色婷婷成人 | 欧美视频在线二区 | 日韩在线不卡视频 | 精品福利片| 久久6精品| 久草视频在线播放 | 日韩成人在线免费观看 | 91在线视频在线观看 | 91正在播放 | 国产精品免费久久久久久久久久中文 | 激情五月婷婷丁香 | 精品久久片| 国产精品丝袜久久久久久久不卡 | 久久精品国产亚洲 | 亚洲精品九九 | 国产精品第一 | avwww在线观看 | 日韩成年视频 | 久草精品视频 | 91精品久久久久久综合乱菊 | 天天射,天天干 | 在线天堂亚洲 | 午夜av一区二区三区 | 久久国产热视频 | 日韩在线电影一区 | 99在线精品免费视频九九视 | 久久爱影视i | 女人18片 | 久久黄色免费观看 | 天天色天天综合网 | 久久精品专区 | 狠狠操天天射 | 久久精品国产亚洲aⅴ | 四虎影视成人精品国库在线观看 | 日本69hd| 日韩高清无线码2023 | 日韩精品一区二区三区在线播放 | 97电影院网| 日韩丝袜视频 | 国产亚洲午夜高清国产拍精品 | 亚洲欧洲xxxx | 蜜臀aⅴ精品一区二区三区 久久视屏网 | 亚洲免费视频观看 | 国产精品va在线观看入 | 伊人超碰在线 | av观看网站 | 欧美一级片免费 | 国产黄色视 | 超碰在线网 | 最新真实国产在线视频 | 91精品欧美一区二区三区 | 激情久久一区二区三区 | 亚洲成人黄色av | 亚洲一区二区精品视频 | 91av欧美 | 永久免费视频国产 | 免费裸体视频网 | 激情欧美一区二区免费视频 | 欧美激情视频一二三区 | 日本激情动作片免费看 | 亚洲综合在线五月天 | 久久中文欧美 | 日韩免费中文 | 91av在线精品 | 亚洲精品白浆高清久久久久久 | 国产精品成人一区 | 国产九九热 | 91精品视频在线观看免费 | 在线亚洲高清视频 | 2022国产精品视频 | 欧美一级日韩免费不卡 | 国产丝袜制服在线 | 96视频免费在线观看 | 欧美专区亚洲专区 | 日韩欧美在线国产 | 久久电影中文字幕视频 | 国产又粗又长又硬免费视频 | 97免费在线观看 | 深爱激情五月婷婷 | 天天射网站 | 狠狠色综合欧美激情 | 99999精品| 精品国偷自产在线 | 亚洲成人动漫在线观看 | 91一区二区在线 | 日韩欧美国产激情在线播放 | 欧美日韩高清在线一区 | 欧美人人| 国产欧美在线一区二区三区 | 992tv人人网tv亚洲精品 | 国内精品福利视频 | 亚洲人在线7777777精品 | 亚洲最大av在线播放 | 国产黄色资源 | 天天操天天射天天爽 | 亚洲视频,欧洲视频 | 天天干.com | 中文字幕中文字幕中文字幕 | 国产主播大尺度精品福利免费 | 精品国产自在精品国产精野外直播 | 国产香蕉视频在线观看 | 欧美不卡视频在线 | 国产精品黑丝在线观看 | 四虎在线免费视频 | 中文字幕一区av | 久久精品国产美女 | 日韩高清不卡一区二区三区 | 国产毛片久久久 | 香蕉影院在线播放 | 亚洲国产精品电影在线观看 | 丁香六月综合网 | 国产一区免费视频 | 国产vs久久 | 亚洲欧美乱综合图片区小说区 | 波多野结衣在线播放一区 | a视频在线观看免费 | av大片网站 | 久久夜色网 | 日韩特级毛片 | 日韩精品免费一线在线观看 | 69精品久久久 | 国产午夜三级一区二区三 | 最近中文字幕免费av | 日韩欧美一区二区在线播放 | 香蕉视频18 | 偷拍精品一区二区三区 | 久草在线这里只有精品 | 综合中文字幕 | 日韩一级电影网站 | 久久久久国产一区二区 | 成人激情开心网 | 99热手机在线 | 亚洲免费观看视频 | 四虎影视8848aamm | 伊人中文网 | 91成版人在线观看入口 | av成人动漫 | 国产视频精品久久 | av在线永久免费观看 | 国产精品久久片 | 欧美精品一区二区在线观看 | 美女黄视频免费 | 日韩欧美在线一区二区 | 99久久久久国产精品免费 | 免费观看v片在线观看 | 开心激情五月婷婷 | 亚洲美女免费视频 | 国产午夜精品一区二区三区嫩草 | 一区二区三区在线视频观看58 | 在线中文字幕视频 | 色婷婷综合五月 | 日韩免费专区 | 草久热| 国产精品免费视频久久久 | 欧美色888| 久草五月| 不卡精品 | 91在线观看欧美日韩 | 亚洲精品久久久久中文字幕m男 | 中文字幕乱码亚洲精品一区 | 激情中文字幕 | 久久你懂得 | 中文av资源站 | 国产黄大片在线观看 | 狠狠亚洲 | 国产精品久久久久久久久免费 | 精品国产一区二区三区久久影院 | 日本久久久久久科技有限公司 | 日韩美一区二区三区 | 色婷婷久久一区二区 | 欧美激情精品久久久久久变态 | 亚洲性xxxx| 久草香蕉在线 | 久草精品视频 | 成人国产精品入口 | 久久婷婷丁香 | 日韩精品中文字幕av | 国产护士在线 | 久久综合久久综合九色 | 在线观看国产麻豆 | 天天躁天天躁天天躁婷 | 亚洲成av人影片在线观看 | 天天草天天| 日韩有码专区 | 日韩精品视频免费在线观看 | 国产在线视频资源 | 国偷自产中文字幕亚洲手机在线 | 91视频免费国产 | 久草视频在线资源站 | 中文字幕乱在线伦视频中文字幕乱码在线 | 亚洲区另类春色综合小说校园片 | 精品国产一区二区三区四 | 国产高清在线观看 | 91禁看片| 欧美日韩高清一区二区三区 | 日韩在线观看av | 久久精选 | 精品视频国产一区 | 美女网站黄在线观看 | 国产中年夫妇高潮精品视频 | 黄色小说在线免费观看 | 欧美日韩中文字幕视频 | 色久网 | 日韩动漫免费观看高清完整版在线观看 | 在线观看成人网 | 国产精品综合av一区二区国产馆 | 欧美日韩精品国产 | 久久久久国产免费免费 | 欧美性久久久久久 | 国产一区二区三区免费在线 | 西西444www高清大胆 | 91av综合| 欧美成人黄色片 | 欧美一级特黄aaaaaa大片在线观看 | 亚洲视频1 | 美女精品国产 | 婷婷在线观看视频 | 黄色亚洲大片免费在线观看 | 久久视频一区二区 | 福利电影久久 | 亚洲乱码国产乱码精品天美传媒 | 日日躁夜夜躁aaaaxxxx | 天天色视频 | 免费精品视频在线 | 日韩精品一区二区免费 | 丝袜美女在线观看 | 亚洲网久久 | 日韩精品在线播放 | 国产精品18久久久久白浆 | 狠狠色丁香久久婷婷综合丁香 | 亚洲精品乱码久久久久久高潮 | 久久久久久久免费 | 亚洲资源在线 | 久久视频在线观看免费 | 一区二区三区在线观看 | 日韩精品一卡 | 亚洲精品三级 | 黄色一级在线免费观看 | 日韩在线视频二区 | 国产二区精品 | 日本动漫做毛片一区二区 | 亚洲精品乱码久久久久久写真 | 99精品偷拍视频一区二区三区 | 久插视频| 综合久久2023 | 午夜av激情| 99色| 欧美精品久久久久久久亚洲调教 | 国产中文字幕免费 | 久久一精品| 四虎国产精品永久在线国在线 | 国产免费嫩草影院 | 一级黄色片在线播放 | av中文字幕在线电影 | 国产精品一区二区 91 | 91成人在线视频观看 | 就要干b | 一级免费黄色 | 特级毛片网站 | 五月激情五月激情 | 久久久影院官网 | 免费一级日韩欧美性大片 | 国产无套视频 | 国产精品一区久久久久 | 在线成人中文字幕 | 在线观看色视频 | 亚洲免费av电影 | 久久伊人国产精品 | 超碰人人在线 | 成人小电影在线看 | 成人免费xyz网站 | 久久精品成人 | 色狠狠操 | 男女拍拍免费视频 | 日韩免费一二三区 | 不卡av免费在线观看 | 欧美国产亚洲精品久久久8v | 免费亚洲黄色 | 在线国产视频一区 | 亚洲精品在线播放视频 | 人人cao| 99久久精品国产一区二区三区 | 91视频 - v11av| 91在线视频导航 | 五月婷婷中文网 | 91av视频| 久久精品伊人 | 一本—道久久a久久精品蜜桃 | 中文字幕在线观看完整 | 国产在线中文 | 久久久精华网 | 超碰伊人网| av在线免费观看黄 | 日韩经典一区二区三区 | 日韩欧美视频二区 | www.888.av| 九色琪琪久久综合网天天 | 激情欧美在线观看 | 五月婷婷网站 |