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

歡迎訪問 生活随笔!

生活随笔

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

javascript

悟透JavaScript _转载

發(fā)布時間:2024/1/1 javascript 49 豆豆
生活随笔 收集整理的這篇文章主要介紹了 悟透JavaScript _转载 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

引子


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

??? 數(shù)據(jù)天生就是文靜的,總想保持自己固有的本色;而代碼卻天生活潑,總想改變這個世界。

??
你看,數(shù)據(jù)代碼間的關(guān)系與物質(zhì)能量間的關(guān)系有著驚人的相似。數(shù)據(jù)也是有慣性的,如果沒有代碼來施加外力,她總保持自己原來的狀態(tài)。而代碼就象能量,他存在的唯一目的,就是要努力改變數(shù)據(jù)原來的狀態(tài)。在代碼改變數(shù)據(jù)的同時,也會因為數(shù)據(jù)的抗拒而反過來影響或改變代碼原有的趨勢。甚至在某些情況下,數(shù)據(jù)可以轉(zhuǎn)變?yōu)榇a,而代碼卻又有可能被轉(zhuǎn)變?yōu)閿?shù)據(jù),或許還存在一個類似E=MC2形式的數(shù)碼轉(zhuǎn)換方程呢。然而,就是在數(shù)據(jù)和代碼間這種即矛盾又統(tǒng)一的運轉(zhuǎn)中,總能體現(xiàn)出計算機世界的規(guī)律,這些規(guī)律正是我們編寫的程序邏輯。

???
不過,由于不同程序員有著不同的世界觀,這些數(shù)據(jù)和代碼看起來也就不盡相同。于是,不同世界觀的程序員們運用各自的方法論,推動著編程世界的進化和發(fā)展。

???
眾所周知,當今最流行的編程思想莫過于面向?qū)ο缶幊痰乃枷搿槭裁疵嫦驅(qū)ο蟮乃枷肽苎杆亠L靡編程世界呢?因為面向?qū)ο蟮乃枷胧状伟褦?shù)據(jù)和代碼結(jié)合成統(tǒng)一體,并以一個簡單的對象概念呈現(xiàn)給編程者。這一下子就將原來那些雜亂的算法與子程序,以及糾纏不清的復(fù)雜數(shù)據(jù)結(jié)構(gòu),劃分成清晰而有序的對象結(jié)構(gòu),從而理清了數(shù)據(jù)與代碼在我們心中那團亂麻般的結(jié)。我們又可以有一個更清晰的思維,在另一個思想高度上去探索更加浩瀚的編程世界了。

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

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

回歸簡單

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

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

???
JavaScript中的代碼只體現(xiàn)為一種形式,就是function。

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

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

??? 先說說簡單數(shù)據(jù)類型吧。

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

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

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

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

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

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

??? 所謂“對象化”,就是可以將數(shù)據(jù)和代碼組織成復(fù)雜結(jié)構(gòu)的能力。JavaScript中只有object類型和function類型提供了對象化的能力。

沒有類

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

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

??? 對于許多面向?qū)ο蟮某绦騿T來說,這恐怕是JavaScript中最難以理解的地方。是啊,幾乎任何講面向?qū)ο蟮臅?#xff0c;第一個要講的就是“類”的概念,這可是面向?qū)ο蟮闹е_@突然沒有了“類”,我們就象一下子沒了精神支柱,感到六神無主??磥?#xff0c;要放下對象和類,達到“對象本無根,類型亦無形”的境界確實是件不容易的事情啊。

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

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

???
還記得兒時那個“小蝌蚪找媽媽”的童話嗎?也許就在昨天晚,你的孩子剛好是在這個美麗的童話中進入夢鄉(xiāng)的吧??蓯鄣男◎蝌揭簿褪窃谄渥陨眍愋筒粩嘌莼^程中,逐漸變成了和媽媽一樣的“類”,從而找到了自己的媽媽。這個童話故事中蘊含的編程哲理就是:對象的“類”是從無到有,又不斷演化,最終又消失于無形之中的...

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

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

???
如果,此時你的內(nèi)心深處開始有所感悟,那么你已經(jīng)逐漸開始理解JavaScript的禪機了。

函數(shù)的魔力

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

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

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

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

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

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

??? var myfunc = function ()
??????? {
??????????? alert(
"hello");
??????? };
??? myfunc();
//第一次調(diào)用myfunc,輸出hello
???
??? myfunc
= function ()
??????? {
??????????? alert(
"yeah");
??????? };???
??? myfunc();
//第二次調(diào)用myfunc,將輸出yeah
???
這個程序運行的結(jié)果告訴我們:答案是肯定的!在第一次調(diào)用函數(shù)之后,函數(shù)變量又被賦予了新的函數(shù)代碼體,使得第二次調(diào)用該函數(shù)時,出現(xiàn)了不同的輸出。

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

??? function myfunc ()
??? {
??????? alert(
"hello");
??? };
??? myfunc();
//這里調(diào)用myfunc,輸出yeah而不是hello
???
???
function myfunc ()
??? {
??????? alert(
"yeah");
??? };???
??? myfunc();
//這里調(diào)用myfunc,當然輸出yeah
???
按理說,兩個簽名完全相同的函數(shù),在其他編程語言中應(yīng)該是非法的。但在JavaScript中,這沒錯。不過,程序運行之后卻發(fā)現(xiàn)一個奇怪的現(xiàn)象:兩次調(diào)用都只是最后那個函數(shù)里輸出的值!顯然第一個函數(shù)沒有起到任何作用。這又是為什么呢?

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

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

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

<script>
???
function myfunc ()
??? {
??????? alert(
"yeah");
??? };???
??? myfunc();
//這里調(diào)用myfunc,輸出yeah
</script>
???
這時,輸出才是各自按順序來的,也證明了JavaScript的確是一段段地執(zhí)行的。

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

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

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

奇妙的對象

??? 先來說說函數(shù)的對象化能力。

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

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

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

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

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

??? var aFunction = function()
{};?
//一個函數(shù)
??? aFunction.aProperty = "Property of function";? //函數(shù)的一個屬性
??? aFunction.aMethod = function(){alert("Method of function")}; //函數(shù)的一個方法
??? //主要看下面:
??? alert(aFunction["aProperty"]);?? //可以將函數(shù)當數(shù)組以屬性名作為下標來訪問屬性
??? aFunction["aMethod"]();????????? //可以將函數(shù)當數(shù)組以方法名作為下標來調(diào)用方法
??? for( var s in aFunction)?????????? //遍歷函數(shù)的所有屬性和方法進行迭代化處理
??????? alert(s + " is a " + typeof(aFunction[s]));
???
是的,對象和函數(shù)可以象數(shù)組一樣,用屬性名或方法名作為下標來訪問并處理。那么,它到底應(yīng)該算是數(shù)組呢,還是算對象?

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

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

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

放下對象

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

???
在面向?qū)ο蟮木幊淌澜缋?#xff0c;數(shù)據(jù)與代碼的有機結(jié)合就構(gòu)成了對象的概念。自從有了對象,編程世界就被劃分成兩部分,一個是對象內(nèi)的世界,一個是對象外的世界。對象天生具有自私的一面,外面的世界未經(jīng)允許是不可訪問對象內(nèi)部的。對象也有大方的一面,它對外提供屬性和方法,也為他人服務(wù)。不過,在這里我們要談到一個有趣的問題,就是“對象的自我意識”。

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

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

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

???
但對象的“自我意識”在帶給我們快樂的同時也帶來了痛苦和煩惱。我們給對象賦予了太多欲望,總希望它們能做更多的事情。然而,對象的自私使得它們互相爭搶系統(tǒng)資源,對象的自負讓對象變得復(fù)雜和臃腫,對象的自欺也往往帶來揮之不去的錯誤和異常。我們?yōu)槭裁磿羞@么多的痛苦和煩惱呢?

???
為此,有一個人,在對象樹下,整整想了九九八十一天,終于悟出了生命的痛苦來自于欲望,但究其欲望的根源是來自于自我意識。于是他放下了“自我”,在對象樹下成了佛,從此他開始普度眾生,傳播真經(jīng)。他的名字就叫釋迦摩尼,而《JavaScript真經(jīng)》正是他所傳經(jīng)書中的一本。

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

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

??? function WhoAmI()?????? //定義一個函數(shù)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;? //將函數(shù)WhoAmI作為BillGates的方法。
??? BillGates.WhoAmI();???????? //此時的this是BillGates。輸出:I'm Bill Gates of object
???
???
var SteveJobs = {name: "Steve Jobs"};
??? SteveJobs.WhoAmI
= WhoAmI;? //將函數(shù)WhoAmI作為SteveJobs的方法。
??? SteveJobs.WhoAmI();???????? //此時的this是SteveJobs。輸出:I'm Steve Jobs of object

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

??? WhoAmI.WhoAmI
= WhoAmI;???? //將WhoAmI函數(shù)設(shè)置為自身的方法。
??? WhoAmI.name = "WhoAmI";
??? WhoAmI.WhoAmI();???????????
//此時的this是WhoAmI函數(shù)自己。輸出:I'm WhoAmI of function
???????
??? ({name:
"nobody", WhoAmI: WhoAmI}).WhoAmI();??? //臨時創(chuàng)建一個匿名對象并設(shè)置屬性后調(diào)用WhoAmI方法。輸出:I'm nobody of object
???
從上面的代碼可以看出,同一個函數(shù)可以從不同的角度來調(diào)用,this并不一定是函數(shù)本身所屬的對象。this只是在任意對象和function元素結(jié)合時的一個概念,是種結(jié)合比起一般對象語言的默認結(jié)合更加靈活,顯得更加超然和灑脫。

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

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

對象素描

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

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

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

var o = {};
??? 創(chuàng)建一個對象并設(shè)置屬性及初始值:

var person = {name: "Angel", age: 18, married: false};
??? 創(chuàng)建一個對象并設(shè)置屬性和方法:

var speaker = {text: "Hello World", say: function(){alert(this.text)}};
????
創(chuàng)建一個更復(fù)雜的對象,嵌套其他對象和對象數(shù)組等:

??? 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里的對象就是字典結(jié)構(gòu)。不管多么復(fù)雜的對象,都可以被一句JSON代碼來創(chuàng)建并賦值。

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

??? JavaScript就是這樣,把面向?qū)ο竽切┛此茝?fù)雜的東西,用及其簡潔的形式表達出來。卸下對象浮華的濃妝,還對象一個眉目清晰!

構(gòu)造對象

???
好了,接下我們來討論一下對象的另一種創(chuàng)建方法。

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

??? function MyFunc() {};???????? //定義一個空函數(shù)
??? var anObj = new MyFunc();? //使用new操作符,借助MyFun函數(shù),就創(chuàng)建了一個對象
???
JavaScript的這種創(chuàng)建對象的方式可真有意思,如何去理解這種寫法呢?

?? 其實,可以把上面的代碼改寫成這種等價形式:

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

???
君看到此處也許會想,我們?yōu)槭裁床豢梢园堰@個MyFunc當作構(gòu)造函數(shù)呢?恭喜你,答對了!JavaScript也是這么想的!請看下面的代碼:

1 ??? function Person(name)?? //帶參數(shù)的構(gòu)造函數(shù)
2 ??? {
3 ??????? this.name = name;?? //將參數(shù)值賦給給this對象的屬性
4 ??????? this.SayHello = function() {alert("Hello, I'm " + this.name);};?? //給this對象定義一個SayHello方法。
5 ??? };
6
7 ??? function Employee(name, salary)???? //子構(gòu)造函數(shù)
8 ??? {
9 ??????? Person.call(this, name);??????? //將this傳給父構(gòu)造函數(shù)
10 ??????? this.salary = salary;?????? //設(shè)置一個this的salary屬性
11 ??????? this.ShowMeTheMoney = function() {alert(this.name + " $" + this.salary);};? //添加ShowMeTheMoney方法。
12 ??? };
13 ???
14 ??? var BillGates = new Person("Bill Gates");?? //用Person構(gòu)造函數(shù)創(chuàng)建BillGates對象
15 ??? var SteveJobs = new Employee("Steve Jobs", 1234);?? //用Empolyee構(gòu)造函數(shù)創(chuàng)建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
???
這段代碼表明,函數(shù)不但可以當作構(gòu)造函數(shù),而且還可以帶參數(shù),還可以為對象添加成員和方法。其中的第9行,Employee構(gòu)造函數(shù)又將自己接收的this作為參數(shù)調(diào)用Person構(gòu)造函數(shù),這就是相當于調(diào)用基類的構(gòu)造函數(shù)。第21、22行還表明這樣一個意思:BillGates是由Person構(gòu)造的,而SteveJobs是由Employee構(gòu)造的。對象內(nèi)置的constructor屬性還指明了構(gòu)造對象所用的具體函數(shù)!

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

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

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

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

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

???
var BillGates = new Person("Bill Gates");?? //創(chuàng)建BillGates對象
??? var SteveJobs = new Person("Steve Jobs");?? //創(chuàng)建SteveJobs對象
???
??? alert(BillGates.SayHello
== SteveJobs.SayHello); //顯示:true
??? 其中,最后一行的輸出結(jié)果表明兩個對象確實共享了一個函數(shù)對象。雖然,這段程序達到了共享了一份方法代碼的目的,但卻不怎么優(yōu)雅。因為,定義SayHello方法時反映不出其與Person類的關(guān)系?!皟?yōu)雅”這個詞用來形容代碼,也不知道是誰先提出來的。不過,這個詞反映了程序員已經(jīng)從追求代碼的正確、高效、可靠和易讀等基礎(chǔ)上,向著追求代碼的美觀感覺和藝術(shù)境界的層次發(fā)展,程序人生又多了些浪漫色彩。

??
顯然,JavaScript早想到了這一問題,她的設(shè)計者們?yōu)榇颂峁┝艘粋€有趣的prototype概念。

初看原型

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

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

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

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

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

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

??? alert(BillGates.SayHello
== SteveJobs.SayHello); //因為兩個對象是共享prototype的SayHello,所以顯示:true
???
程序運行的結(jié)果表明,構(gòu)造函數(shù)的prototype上定義的方法確實可以通過對象直接調(diào)用到,而且代碼是共享的。顯然,把方法設(shè)置到prototype的寫法顯得優(yōu)雅多了,盡管調(diào)用形式?jīng)]有變,但邏輯上卻體現(xiàn)了方法與類的關(guān)系,相對前面的寫法,更容易理解和組織代碼。

???
那么,對于多層次類型的構(gòu)造函數(shù)情況又如何呢?

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

1 ??? function Person(name)?? //基類構(gòu)造函數(shù)
2 ??? {
3 ??????? this.name = name;
4 ??? };
5 ???
6 ??? Person.prototype.SayHello = function()? //給基類構(gòu)造函數(shù)的prototype添加方法
7 ??? {
8 ??????? alert("Hello, I'm " + this.name);
9 ??? };
10 ???
11 ??? function Employee(name, salary) //子類構(gòu)造函數(shù)
12 ??? {
13 ??????? Person.call(this, name);??? //調(diào)用基類構(gòu)造函數(shù)
14 ??????? this.salary = salary;
15 ??? };
16 ???
17 ??? Employee.prototype = new Person();? //建一個基類的對象作為子類原型的原型,這里很有意思
18 ???
19 ??? Employee.prototype.ShowMeTheMoney = function()? //給子類添構(gòu)造函數(shù)的prototype添加方法
20 ??? {
21 ??????? alert(this.name + " $" + this.salary);
22 ??? };
23
24 ??? var BillGates = new Person("Bill Gates");?? //創(chuàng)建基類Person的BillGates對象
25 ??? var SteveJobs = new Employee("Steve Jobs", 1234);?? //創(chuàng)建子類Employee的SteveJobs對象
26
27 ??? BillGates.SayHello();?????? //通過對象直接調(diào)用到prototype的方法
28 ??? SteveJobs.SayHello();?????? //通過子類對象直接調(diào)用基類prototype的方法,關(guān)注!
29 ??? SteveJobs.ShowMeTheMoney(); //通過子類對象直接調(diào)用子類prototype的方法
30
31 ??? alert(BillGates.SayHello == SteveJobs.SayHello); //顯示:true,表明prototype的方法是共享的
???
這段代碼的第17行,構(gòu)造了一個基類的對象,并將其設(shè)為子類構(gòu)造函數(shù)的prototype,這是很有意思的。這樣做的目的就是為了第28行,通過子類對象也可以直接調(diào)用基類prototype的方法。為什么可以這樣呢?

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

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

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

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

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

??? 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();??
//由于繼承了原型的東西,規(guī)規(guī)矩矩輸出:Hello, I'm Bill Gates
???
???
var SteveJobs = new Person("Steve Jobs");
??? SteveJobs.company
= "Apple";??? //設(shè)置自己的company屬性,掩蓋了原型的company屬性
??? SteveJobs.SayHello = function() //實現(xiàn)了自己的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還是按老樣子輸出
???
對象可以掩蓋原型對象的那些屬性和方法,一個構(gòu)造函數(shù)原型對象也可以掩蓋上層構(gòu)造函數(shù)原型對象既有的屬性和方法。這種掩蓋其實只是在對象自己身上創(chuàng)建了新的屬性和方法,只不過這些屬性和方法與原型對象的那些同名而已。JavaScript就是用這簡單的掩蓋機制實現(xiàn)了對象的“多態(tài)”性,與靜態(tài)對象語言的虛函數(shù)和重載(override)概念不謀而合。

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

??? 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()??? //建立對象后再動態(tài)擴展原型的方法
??? {
??????? alert(
"Poor " + this.name + ", bye bye!");
??? };
???
??? BillGates.Retire();
//動態(tài)擴展的方法即可被先前建立的對象立即調(diào)用
??? 阿彌佗佛,原型繼承竟然可以玩出有這樣的法術(shù)!

原型擴展

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

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

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

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


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

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

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

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

??? 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#語言的描述形式,在一個構(gòu)造函數(shù)里依次定義了私有成員、公共屬性和可用的方法,顯得非常優(yōu)雅嘛。特別是“閉包”機制可以模擬對私有成員的保護機制,做得非常漂亮。

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

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

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

??? //定義構(gòu)造函數(shù)
??? function Person(name)
??? {
???????
this.name = name;?? //在構(gòu)造函數(shù)中定義成員
??? };
???
???
//方法定義到構(gòu)造函數(shù)的prototype上
??? Person.prototype.SayHello = function()
??? {
??????? alert(
"Hello, I'm " + this.name);
??? };???
???
???
//子類構(gòu)造函數(shù)
??? function Employee(name, salary)
??? {
??????? Person.call(
this, name);??? //調(diào)用上層構(gòu)造函數(shù)
??????? this.salary = salary;?????? //擴展的成員
??? };
???
???
//子類構(gòu)造函數(shù)首先需要用上層構(gòu)造函數(shù)來建立prototype對象,實現(xiàn)繼承的概念
??? Employee.prototype = new Person()?? //只需要其prototype的方法,此對象的成員沒有任何意義!
???
???
//子類方法也定義到構(gòu)造函數(shù)之上
??? 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();

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


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

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

原型真諦

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

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

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

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

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

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


??? var Person =? //定義一個對象來作為原型類
??? {
??????? Create:
function(name, age)? //這個當構(gòu)造函數(shù)
??????? {
???????????
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#的類啊!既有構(gòu)造函數(shù),又有各種方法。如果可以用某種形式來創(chuàng)建對象,并將對象的內(nèi)置的原型設(shè)置為上面這個“類”對象,不就相當于創(chuàng)建該類的對象了嗎?

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

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

??? 其實,象這樣的代碼就可以實現(xiàn)這一目標:


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

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

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


??? function New(aClass, aParams)??? //通用創(chuàng)建函數(shù)
??? {
???????
function new_()???? //定義臨時的中轉(zhuǎn)函數(shù)殼
??????? {
??????????? aClass.Create.apply(
this, aParams);?? //調(diào)用原型中定義的的構(gòu)造函數(shù),中轉(zhuǎn)構(gòu)造邏輯及構(gòu)造參數(shù)
??????? };
??????? new_.prototype
= aClass;??? //準備中轉(zhuǎn)原型對象
??????? 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]);? //調(diào)用通用函數(shù)創(chuàng)建對象,并以數(shù)組形式傳遞構(gòu)造參數(shù)
??? BillGates.SayHello();
??? BillGates.HowOld();

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

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

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

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

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


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

???
//語法甘露的應(yīng)用效果:???
??? 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);? //調(diào)用基類的構(gòu)造函數(shù)
??????????? 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]);?? //根據(jù)BillGate的類型創(chuàng)建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

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

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

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

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

編程的快樂

??? 在軟件工業(yè)迅猛發(fā)展的今天,各式各樣的編程語言層出不窮,新語言的誕生,舊語言的演化,似乎已經(jīng)讓我們眼花繚亂。為了適應(yīng)面向?qū)ο缶幊痰某绷?#xff0c;JavaScript語言也在向完全面向?qū)ο蟮姆较虬l(fā)展,新的JavaScript標準已經(jīng)從語義上擴展了許多面向?qū)ο蟮男略亍Ec此相反的是,許多靜態(tài)的對象語言也在向JavaScript的那種簡潔而幽雅的方向發(fā)展。例如,新版本的C#語言就吸收了JSON那樣的簡潔表示法,以及一些其他形式的JavaScript特性。

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

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

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

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

原著:李戰(zhàn)(leadzen).深圳
2008-2-23
【轉(zhuǎn)載請注明作者及出處】


http://www.cnblogs.com/leadzen/archive/2008/02/25/1073404.html

CNDEV提供PDF? 下載



轉(zhuǎn)載于:https://www.cnblogs.com/ZhangHuaning/archive/2011/08/31/2160811.html

總結(jié)

以上是生活随笔為你收集整理的悟透JavaScript _转载的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯,歡迎將生活随笔推薦給好友。

人人舔人人干 | 国产精品久久久久久久婷婷 | 91成人午夜 | 欧洲性视频 | 精品久久久久久综合日本 | 久久精品99北条麻妃 | 日本久久综合网 | 激情综合网五月激情 | 干狠狠 | 99精品国自产在线 | 国产成人精品一区二区三区网站观看 | 成人亚洲欧美 | 中文字幕在线有码 | 国产精品毛片久久久久久久 | 久产久精国产品 | 国产亚洲精品久久久久动 | 美女国产精品 | 欧美亚洲成人xxx | 在线观看精品一区 | 天堂在线成人 | 99热国产在线观看 | 黄色影院在线免费观看 | 91av资源网| 亚洲三级黄色 | 久久国产一区二区 | 成人午夜毛片 | 日p视频在线观看 | 中中文字幕av在线 | 国产亚洲综合精品 | 日韩va在线观看 | 九九电影在线 | 黄色av网站在线免费观看 | 天天天天天天天操 | 99视频+国产日韩欧美 | 亚洲精品欧美专区 | 成人看片 | 91香蕉视频好色先生 | 亚洲精品福利在线观看 | 麻豆va一区二区三区久久浪 | 久久精品这里热有精品 | 午夜精品久久久久久中宇69 | 91香蕉视频 mp4| 夜夜天天干| 黄色三几片 | 亚州黄色一级 | 999视频在线播放 | av在线免费在线观看 | 亚洲天天做| 91精品国产一区二区三区 | www.天天干.com | 日本成人中文字幕在线观看 | 丁香激情五月 | 亚洲精品自拍视频在线观看 | 成人蜜桃 | 91精彩视频在线观看 | 国产成人精品一区在线 | 成人午夜电影网站 | 国产精品免费视频一区二区 | 热久在线 | 国产91探花| 成人午夜电影网站 | 精品在线观看一区二区 | 精品国产乱码久久久久久1区二区 | 麻豆精品传媒视频 | 成人国产精品久久久久久亚洲 | 免费aa大片 | 日日夜夜网 | 精品一区三区 | 国产96精品 | 久久综合爱 | 国产一区二区电影在线观看 | 国产成人在线一区 | 国产精品 日韩精品 | 在线免费观看视频你懂的 | 国产成人精品久久二区二区 | 日韩久久久久久久久久 | 久久久黄视频 | 欧美在线观看视频一区二区 | 国内精品久久久久影院优 | 91久久久久久国产精品 | 夜夜高潮夜夜爽国产伦精品 | 在线观看的av | 久久97超碰 | 在线国产视频观看 | 在线观看免费成人 | 中文字幕一区二区三区乱码在线 | 国产在线观看中文字幕 | 成人网页在线免费观看 | 欧美性大战 | 在线观看av免费 | 九九久久精品 | 天天色天天射综合网 | 亚洲区色 | 99精品在这里 | 97在线观看免费观看高清 | 高潮毛片无遮挡高清免费 | 中文字幕中文 | 久久久久亚洲精品 | 永久免费视频国产 | 免费在线激情视频 | 亚洲电影免费 | 久久久久免费观看 | 97色在线观看免费视频 | 奇米导航| 国产美女视频黄a视频免费 久久综合九色欧美综合狠狠 | 日韩一级黄色片 | 国产在线第三页 | 久草资源免费 | 日韩有码第一页 | 视频 国产区 | 免费中午字幕无吗 | 日韩欧美高清视频在线观看 | 六月色婷 | 亚洲精品在线免费 | 91视视频在线直接观看在线看网页在线看 | 天天射天天射天天 | 欧美午夜性生活 | 97av视频在线观看 | 69久久夜色精品国产69 | 在线精品视频免费播放 | 色视频网站免费观看 | 奇米先锋| 99久久精品费精品 | 国产涩涩在线观看 | 国产高清视频在线 | 涩涩网站在线看 | 欧美激情第一页xxx 午夜性福利 | 伊人导航 | 男女日麻批 | 狠狠色丁香九九婷婷综合五月 | 国产精品久久久久国产精品日日 | 丁香六月色 | 欧美一区三区四区 | 91精品免费看 | 天天拍天天爽 | 国产专区在线播放 | 亚洲国产欧美在线看片xxoo | 伊人激情网 | 欧美成年人在线视频 | 五月婷网站 | 黄色a一级片 | 人人看人人做人人澡 | 91av在线免费播放 | 国内精品视频一区二区三区八戒 | 99久久er热在这里只有精品66 | 最近2019中文免费高清视频观看www99 | 狠狠狠狠狠狠狠狠干 | 国产成人精品免费在线观看 | 2019中文字幕网站 | 国产精品一区二区果冻传媒 | 一区二区视频播放 | 国产一区影院 | 久久久久这里只有精品 | 欧美一级免费在线 | 国内精品中文字幕 | 精品亚洲欧美一区 | 黄色毛片视频免费观看中文 | 国产精品国产三级国产 | 国产不卡片 | 欧美国产大片 | 日韩两性视频 | www178ccom视频在线 | 成人在线视频免费 | 丁香九月激情 | 亚洲日本中文字幕在线观看 | 国产精品大片在线观看 | av三级av | 色悠悠久久综合 | 欧美精品v国产精品 | 黄色免费网 | 国产视频1| 亚洲一级理论片 | 国产视频精品在线 | 91在线看片| 国产精品观看视频 | 粉嫩av一区二区三区免费 | 欧美日韩国产区 | 久久99精品国产91久久来源 | 欧美日韩精品在线观看 | 日韩欧美精品一区二区三区经典 | 日韩视频一区二区三区 | 97夜夜澡人人双人人人喊 | 丁香婷婷深情五月亚洲 | 97精品国产97久久久久久春色 | 在线91观看| 欧美日韩一区二区三区不卡 | 在线播放 一区 | av福利电影 | 中文字幕一区二区三 | 免费人成网| 日韩国产高清在线 | 综合天天 | 午夜三级理论 | 国产精品理论视频 | 99久久er热在这里只有精品15 | 欧美日韩一区二区久久 | 亚洲精品黄色在线观看 | 亚洲黄色片在线 | 亚洲精品男人天堂 | 亚洲视频1区2区 | www91在线观看 | 亚洲精品毛片一级91精品 | 久久视频| 国产高清视频网 | 四虎影院在线观看av | 麻豆久久久久 | 亚洲一区二区三区精品在线观看 | 不卡国产在线 | 中文字幕一区二区三区在线视频 | 国产一级免费观看 | 久久伦理视频 | 美女视频黄色免费 | 中国一级片免费看 | 99久热在线精品视频成人一区 | 久久精品黄| 精品美女在线观看 | 久久伦理网 | 久久精品看片 | 婷婷干五月 | 国产福利一区在线观看 | 日韩午夜视频在线观看 | 久久精品视频在线 | 久久av一区二区三区亚洲 | 深夜免费福利在线 | 欧美色图88 | 成人黄色在线播放 | 成人av免费网站 | 麻豆视频免费播放 | 天天操福利视频 | 黄色的网站免费看 | 天天射天天干天天操 | av在线激情 | 超碰个人在线 | 亚洲精品色婷婷 | 国产精品视频内 | 91成版人在线观看入口 | 天天干天天操天天爱 | 欧美在线观看视频免费 | 日韩精品免费一区二区 | 日韩精品免费在线观看 | 五月婷婷电影网 | 午夜美女福利直播 | 国产一区成人在线 | 就要色综合 | 久久久视频在线 | 97av在线视频免费播放 | 国产精品专区在线 | 亚洲国产精品99久久久久久久久 | 日韩精品在线免费观看 | a在线免费 | 日韩欧美xxxx | 91桃花视频| 黄污网 | 精品在线视频观看 | 在线观看国产亚洲 | 精品免费久久久久久 | 国产在线a| 最近中文字幕高清字幕免费mv | 丁香5月婷婷久久 | 永久免费的av电影 | 一二区av | 黄色免费看片网站 | 免费高清看电视网站 | 福利视频一区二区 | 久久国产经典 | 国产精品久久久久国产a级 激情综合中文娱乐网 | 91传媒在线播放 | 国产精品久久久久久一区二区 | 99视频精品免费观看, | 日本中文字幕系列 | av中文字幕亚洲 | 午夜av片 | 黄色精品国产 | 国产成人一区二区三区免费看 | 国产精品aⅴ | av一级在线 | 色综合夜色一区 | 久久国产精品小视频 | 欧美精品黑人性xxxx | 午夜久久福利视频 | 天天爱天天干天天爽 | 欧美久草视频 | 久草精品国产 | 日韩一区二区三区高清在线观看 | 97超碰中文字幕 | 手机成人在线电影 | 日韩在线视频免费播放 | 国产成人一区二 | 欧美日韩国产免费视频 | 成年免费在线视频 | 日韩精品一区电影 | 天天天天干 | 国产黄网站在线观看 | 亚洲丁香日韩 | 摸bbb搡bbb搡bbbb| 天天射天天干天天 | 一级黄色视屏 | 国产在线久久久 | 天堂资源在线观看视频 | 玖玖精品在线 | 日韩理论片在线观看 | 91视频高清 | 黄色大片国产 | 亚洲欧洲一级 | 96av在线视频| 日韩av免费大片 | 久久毛片网 | 中文字幕在线视频国产 | 国产女人40精品一区毛片视频 | 亚洲免费在线 | 亚洲一区 影院 | 日韩免费大片 | 国产一区免费观看 | 免费的国产精品 | 九九欧美视频 | 久久综合在线 | 国产成人福利在线 | 美女在线国产 | 亚洲欧美在线观看视频 | 在线观看黄色小视频 | 四虎影视成人永久免费观看亚洲欧美 | 久久免费视频这里只有精品 | 在线观看你懂的网站 | av电影在线免费 | 99视频在线精品国自产拍免费观看 | 91最新视频在线观看 | 青青河边草免费直播 | 久久亚洲热 | aaa免费毛片| 国产成人精品女人久久久 | 亚洲精品乱码久久久久久写真 | 四虎影视精品永久在线观看 | 日本动漫做毛片一区二区 | 久久97精品 | 精品人妖videos欧美人妖 | 国产精品入口传媒 | 欧洲高潮三级做爰 | 黄色美女免费网站 | 国产免费美女 | 日本中文字幕在线免费观看 | 欧美日韩三级在线观看 | 亚洲成a人片在线观看中文 中文字幕在线视频第一页 狠狠色丁香婷婷综合 | 香蕉视频18 | 激情综合网色播五月 | 永久免费精品视频 | 日本三级在线观看中文字 | 91精品国产三级a在线观看 | 欧美色精品天天在线观看视频 | 激情文学综合丁香 | 欧美美女视频在线观看 | 91人人澡人人爽人人精品 | 免费高清在线观看成人 | a级黄色片视频 | 国产精品一区二区久久 | 欧美精品国产综合久久 | 久久精品a| 人人爱人人舔 | 99精品国产福利在线观看免费 | 在线免费观看视频你懂的 | 日韩av二区| 亚洲黄色免费网站 | 色亚洲激情 | 91精品国产综合久久久久久久 | 美女免费视频一区 | 午夜在线日韩 | 国产精品一区二区你懂的 | 91在线播| 久草在线久草在线2 | 久久成人国产精品 | 国产精品一区二区久久 | 中文字幕第一页在线播放 | 深爱婷婷久久综合 | 九九免费在线看完整版 | 九九九九免费视频 | 成年人黄色免费视频 | 色吧久久| www.av在线播放 | www,黄视频| 亚洲 欧美日韩 国产 中文 | 涩涩爱夜夜爱 | 久久精品高清 | 久久这里只精品 | 色偷偷88888欧美精品久久 | 91精品久久香蕉国产线看观看 | 国产亚洲综合在线 | 国产欧美日韩一区 | 在线观看视频国产 | 97人人澡人人爽人人模亚洲 | 天天天天天天天操 | 亚洲精品久久久久www | 天天干天天拍天天操天天拍 | 亚洲一级影院 | 免费看一级特黄a大片 | 亚洲成人国产精品 | 国产欧美综合在线观看 | 又黄又刺激又爽的视频 | 99在线免费视频 | 成片免费观看视频 | 天天综合入口 | 国产免费高清视频 | 成人午夜剧场在线观看 | 亚洲天天摸日日摸天天欢 | 99视频精品全国免费 | 国产日韩精品一区二区在线观看播放 | 日本最新高清不卡中文字幕 | av动态图片 | av大片网址 | 国产专区欧美专区 | 日韩精品免费在线观看视频 | 久草色在线观看 | 国产91影院 | 97超碰人人澡 | 黄色在线免费观看网站 | 激情视频一区二区三区 | 337p日本大胆噜噜噜噜 | 日本性视频 | 国产精品麻豆三级一区视频 | 男女男视频 | 综合久色 | 美女又爽又黄 | 国产黄在线看 | 国产视频1 | 国产亚洲精品久久久久久 | 免费av片在线 | 日韩久久精品一区二区三区下载 | 黄色一级在线免费观看 | 国产精品原创 | 久久视频在线看 | 98精品国产自产在线观看 | 在线观看国产区 | 天天干天天操人体 | 精品国产三级a∨在线欧美 免费一级片在线观看 | 特级毛片网站 | 精品国产aⅴ一区二区三区 在线直播av | 激情综合网婷婷 | 国产色中涩| 国产成人一区二区在线观看 | 91成人精品一区在线播放 | 久久伊99综合婷婷久久伊 | 日韩电影一区二区三区 | 精品成人在线 | 91麻豆精品国产91久久久使用方法 | 亚洲国产精品成人女人久久 | 日韩精品免费一区二区 | 国产一区网 | 国产精品午夜久久久久久99热 | 免费在线观看视频一区 | 91丨九色丨高潮 | 在线免费视频你懂的 | 久久久久久久久久亚洲精品 | 亚洲精品视频在线免费播放 | 亚洲黄色免费网站 | 成人影片在线播放 | 美女精品久久久 | 正在播放国产一区 | 伊人久操 | 国产 欧美 日本 | av中文在线影视 | 中文字幕免费观看全部电影 | 亚洲美女视频网 | 精品一二区| 久久综合免费 | 国产精品成人久久久 | 在线免费观看欧美日韩 | 在线观看岛国 | 国产99久久久久 | 婷婷av网 | 国产视频在线一区二区 | 久久精品中文 | 国产综合片 | 在线观看视频中文字幕 | 97国产在线视频 | 永久免费av在线播放 | 亚洲人人av | 成人久久18免费网站 | 国产精品美女999 | 久久五月网| 一区二精品| 国产一线二线三线在线观看 | 中文字幕av在线不卡 | 成人影片在线免费观看 | 精品国产色| 看毛片网站 | 五月婷婷中文网 | 一区二区视频在线播放 | 成人免费网站视频 | 久久免费视频这里只有精品 | 高清日韩一区二区 | 一区二区三区在线播放 | 欧美日韩精品在线 | 日韩成人精品在线观看 | 亚洲黄色精品 | 黄色片网站av | 91精品久久久久久久久 | 成人h视频 | 久久xx视频| 免费在线成人 | 少妇性bbb搡bbb爽爽爽欧美 | 久草视频中文在线 | 亚洲日本欧美在线 | 操老逼免费视频 | 2019精品手机国产品在线 | 日韩剧情 | 激情久久久久久久久久久久久久久久 | 日韩免费在线播放 | 中文字幕成人 | 国产精品欧美在线 | 免费看成人av | 人人藻人人澡人人爽 | 色天天天| 亚洲欧美日韩一区二区三区在线观看 | 麻豆国产露脸在线观看 | 极品嫩模被强到高潮呻吟91 | 久久视频在线免费观看 | 五月天婷亚洲天综合网精品偷 | 免费网站色 | 最新日韩视频在线观看 | 亚洲国内在线 | 久久不卡日韩美女 | 久久久精品欧美一区二区免费 | 一区二区三区精品在线视频 | 97视频在线免费观看 | 久久国产精品色av免费看 | 在线直播av | 人人狠狠综合久久亚洲 | 91探花在线视频 | a在线观看免费视频 | 涩涩色亚洲一区 | 日韩xxxxxxxxx | 在线中文字幕网站 | 国产在线观看二区 | 日本黄色片一区二区 | 中日韩欧美精彩视频 | 久久婷婷一区二区三区 | 久久久久免费视频 | www.狠狠插.com | 婷婷午夜天| 天堂va欧美va亚洲va老司机 | 色99色| 久久再线视频 | 国产在线免费观看 | 成人av资源| 国产淫a| www.久草视频 | av五月婷婷 | 在线观看免费成人av | 黄色成人av| 久久免费视频1 | 国产高清第一页 | 在线高清一区 | www日韩视频 | 久久午夜免费视频 | 免费看av在线 | 免费观看第二部31集 | 97人人爽人人 | 久久成人国产精品 | 99精品国产高清在线观看 | 亚洲国产资源 | 国产美腿白丝袜足在线av | 国产午夜精品一区二区三区四区 | 天天干天天插伊人网 | 成人av在线电影 | 欧美专区国产专区 | 国产精品第52页 | 欧美一二三区在线观看 | av蜜桃在线| 99精品视频网 | 久久久伊人网 | 国产精品一区二区三区在线播放 | 国产91精品一区二区麻豆网站 | 91av在线免费观看 | 国产成人精品午夜在线播放 | 公与妇乱理三级xxx 在线观看视频在线观看 | 国产美女网 | 久久草草影视免费网 | 亚洲精品影视 | 日韩成年视频 | 国产视频在线播放 | 日本精品视频一区二区 | 99热99re6国产在线播放 | 亚洲伦理电影在线 | 国产在线观看黄 | 国产精品9999久久久久仙踪林 | 狠狠的操| 成人av在线电影 | 亚洲在线视频网站 | 亚洲国产人午在线一二区 | 欧美日韩精品免费观看视频 | 国产亚洲成人精品 | 欧美激情精品久久久 | 久久久久久影视 | 日韩欧美一区视频 | 亚洲涩涩色 | 国产精品综合av一区二区国产馆 | 国产精品第十页 | 国产小视频你懂的在线 | www99久久| 黄色av电影| 人人爱人人舔 | 国产精品1024 | 国内视频在线 | 青青河边草免费直播 | 亚洲精品美女久久 | 免费在线国产视频 | 黄在线| 国产精品 日韩 | 97视频网站 | 婷婷在线观看视频 | 久草电影网 | 久久婷婷国产 | 国产精品久久久久久久久久99 | 中文av网| 国产免费久久精品 | 成人中心免费视频 | 国产视频1 | 久久黄色片 | av一级在线 | 日日操操操 | 人人插人人搞 | 不卡中文字幕在线 | 黄色国产成人 | 精品国产乱码久久久久久久 | 蜜臀久久99静品久久久久久 | 久久免费激情视频 | 久在线观看 | 国产综合福利在线 | 亚洲国内精品 | 欧美性生活一级片 | 97色噜噜 | 久久99久国产精品黄毛片入口 | 久久久国产精华液 | 日韩av综合网站 | 一区二区三区观看 | 久久日韩精品 | 国产日韩精品一区二区在线观看播放 | 欧美一区二区精美视频 | 国产精品久久久久久久久久久久午夜 | 黄色小说在线免费观看 | 少妇搡bbbb搡bbb搡69 | 色婷婷综合久久久久中文字幕1 | 精品在线你懂的 | 一区在线观看 | 1000部18岁以下禁看视频 | 高清视频一区 | 日本黄色大片免费 | 玖玖国产精品视频 | 国产一区免费在线观看 | 精品免费国产一区二区三区四区 | 九九色视频| 欧美性网站| 九九涩涩av台湾日本热热 | 色综合天天色综合 | 欧美另类69| 国内久久久久久 | 欧美一区二区三区免费观看 | 日韩成人欧美 | 久艹视频在线观看 | 2022中文字幕在线观看 | av在线进入 | 久久免视频 | www五月天婷婷 | 视频在线日韩 | 免费成人在线观看视频 | 亚洲va欧美va人人爽春色影视 | 高清视频一区二区三区 | 久久蜜桃av | 女人18毛片a级毛片一区二区 | 日日麻批40分钟视频免费观看 | 激情网站免费观看 | 人九九精品 | 国产日韩欧美在线免费观看 | 久久综合狠狠综合 | 欧美另类美少妇69xxxx | 美女网站黄在线观看 | 国产玖玖在线 | 成人在线视频网 | 日韩av视屏在线观看 | 天天干天天操天天 | 亚洲精品国产区 | 亚洲午夜电影网 | 天天干,天天射,天天操,天天摸 | 亚洲精品国产品国语在线 | 成人av亚洲 | 91在线免费观看国产 | 欧美日韩高清免费 | 欧美精品久久久久久久 | 中文在线字幕免费观 | 极品久久久久 | 9在线观看免费高清完整版在线观看明 | 欧美日韩精品网站 | 超碰在线人人 | 最近中文字幕mv免费高清在线 | 一区二区三区 亚洲 | 日韩在线免费电影 | 欧美色图东方 | 丁香六月婷 | 久色小说 | 日本精品视频在线 | 久久这里只有精品1 | a黄色片在线观看 | 免费a网 | 久久99视频 | 伊人久操 | 六月婷操 | 波多野结衣在线播放一区 | 国产精品美女久久久久久免费 | 婷婷色九月| 久草精品在线观看 | 国产成人精品女人久久久 | 九九热在线精品视频 | 狠狠狠色丁香综合久久天下网 | 一本—道久久a久久精品蜜桃 | 69xxxx欧美| 久久综合五月婷婷 | 国产精品高清av | 天天爽夜夜爽人人爽一区二区 | 亚洲精品福利视频 | 全黄色一级片 | 国产一级片在线播放 | 四虎影视成人永久免费观看亚洲欧美 | 综合久久婷婷 | 免费精品国产va自在自线 | 激情av网址 | 精品国产一区二区久久 | 日本激情视频中文字幕 | 日韩视频三区 | 亚洲综合成人婷婷小说 | 日韩免费电影一区二区 | 欧美综合国产 | 色在线最新 | 久久人人看 | 欧美性黑人 | 国产又粗又猛又爽又黄的视频免费 | 日韩欧美一区二区在线观看 | 午夜色性片 | 日韩精品中文字幕一区二区 | 婷婷视频在线 | 成人网页在线免费观看 | 九九精品视频在线看 | 女人18毛片90分钟 | 亚洲一级片在线观看 | 最新动作电影 | 国产成人精品久久久久 | 国产精品伦一区二区三区视频 | 久久精品美女 | 亚洲免费公开视频 | 国产69精品久久久久久 | 天天操月月操 | 男女全黄一级一级高潮免费看 | 天天五月天色 | 成人免费观看网址 | 99精品国产福利在线观看免费 | 黄色小说在线免费观看 | 免费又黄又爽视频 | 久久免费在线视频 | 九九九国产 | 激情综合色综合久久 | 视频在线一区二区三区 | 色先锋资源网 | 久久69av| 91看片在线 | 性日韩欧美在线视频 | 网址你懂的在线观看 | 国产在线999 | 精品99免费视频 | 天天激情天天干 | 在线观看久草 | 97色免费视频 | 国产尤物视频在线 | www夜夜 | 天天弄天天操 | 在线观看一二三区 | 人人爽人人爽人人爽学生一级 | 国产精品久久久久婷婷二区次 | 国产精品 999 | 久久久免费精品国产一区二区 | 免费在线观看成人 | 少妇搡bbb | 免费男女网站 | 国产一级免费视频 | 久久久久久国产精品久久 | 日韩欧美一区二区在线 | 黄色影院在线免费观看 | 久久久精品一区二区三区 | 美女网站视频免费黄 | 日韩中文字幕一区 | 国产日韩欧美在线一区 | 日韩欧美高清免费 | 久久久久国产精品厨房 | 久久夜色精品国产欧美乱极品 | 国产一区欧美二区 | 国内丰满少妇猛烈精品播放 | 日本在线视频网址 | 久久久免费精品国产一区二区 | 成人欧美在线 | 国产中文在线视频 | 天天操网| 日韩欧美电影在线 | 午夜在线观看影院 | 国产网站av | 国产精品亚洲a | 久久少妇免费视频 | 99人久久精品视频最新地址 | 片黄色毛片黄色毛片 | 91福利社区在线观看 | 大荫蒂欧美视频另类xxxx | 国产91成人在在线播放 | 国产精选在线 | 色婷婷免费视频 | 人人看看人人 | 天天拍夜夜拍 | 国产剧情亚洲 | 国产精品精品久久久久久 | 国产精品美女久久久免费 | 日韩精品久久久免费观看夜色 | 免费视频资源 | 久久久久久国产精品亚洲78 | 婷婷丁香色| 中文字幕在线观看网 | 国产一区二区在线免费观看 | 欧美久久99| 夜夜躁日日躁狠狠久久av | 国产精品亚洲综合久久 | 黄网站色视频 | 婷婷久久国产 | 中文区中文字幕免费看 | 69国产盗摄一区二区三区五区 | 国产香蕉97碰碰碰视频在线观看 | 精品视频国产 | 在线观看亚洲精品 | 久久久久久久久爱 | 国产一二区免费视频 | 天天激情天天干 | 欧美一级片免费 | 久久99精品热在线观看 | 天天射一射 | 久草在线91 | 精品亚洲va在线va天堂资源站 | 日本不卡一区二区三区在线观看 | 天天夜夜操 | 激情久久久久久久久久久久久久久久 | 欧美性爽爽 | 国产一区二区综合 | 久久久久国产成人精品亚洲午夜 | 日韩在线第一区 | 欧美日韩高清一区二区 国产亚洲免费看 | 欧美精品一二 | 久久人人爽人人人人片 | 婷婷色社区 | 97视频精品 | 中文国产字幕在线观看 | 久久成人国产精品一区二区 | 免费黄a大片 | 久久婷婷网 | 91精品入口| 日韩精品黄 | 久久久久久久久久久久国产精品 | 视频在线精品 | 久久久久久亚洲精品 | 国产五十路毛片 | 日韩网站在线 | 伊人永久 | 国产精品99久久久久久久久久久久 | 日日日日干 | 成人免费大片黄在线播放 | 久久人人爽人人爽人人片 | 激情久久伊人 | 国产精品嫩草在线 | 成人性生交大片免费观看网站 | 中文字幕婷婷 | 97福利| 黄色影院在线免费观看 | 99精品国产在热久久下载 | 91在线免费视频观看 | 一级淫片在线观看 | 久久r精品 | 日韩精品高清不卡 | 国产日韩高清在线 | 精品999| 国产精品3 | 久久韩国免费视频 | 香蕉视频在线免费 | 2020天天干天天操 | 国产精品va在线观看入 | 不卡电影一区二区三区 | 欧美日韩aaaa | 婷婷在线播放 | 超碰免费公开 | 91精品久久久久久综合乱菊 | 丁香网五月天 | 亚洲一片黄 | 黄网站a| 国产精品乱码久久久久 | 欧美一区二区精品在线 | 久久艹艹 | 色www.| 日韩有码中文字幕在线 | 欧美视频www| 亚洲一区免费在线 | 啪啪免费试看 | 91av资源在线 | 国产玖玖在线 | 在线观看日韩免费视频 | 最近中文字幕视频完整版 | 99久久久久免费精品国产 | 国产在线色| 激情偷乱人伦小说视频在线观看 | 日韩在线观看一区二区 | 视频在线99 | 在线看国产精品 | 色在线网 | 99国产在线观看 | 日韩视频一区二区 | 国产区久久 | 香蕉视频在线看 | 91精品国产99久久久久久红楼 | 中文字幕免费在线看 | 天天干com | 日韩欧美中文 | 精品在线观看一区二区 | 国产精品一区免费看8c0m | 天天操天天射天天爽 | 欧美夫妻性生活电影 | 欧美 激情 国产 91 在线 | 91精品国产91久久久久福利 | 精品国产一区二区三区久久久久久 | 成人午夜在线电影 | 五月天色中色 | 欧美日韩一区二区三区在线观看视频 | 免费又黄又爽视频 | 国产黄色精品在线观看 | 国产精品一区二区你懂的 | 高清视频一区 | 一区二区不卡 | 久久精品第一页 | 国产一区二区在线免费观看 | 久久呀| 香蕉久久久久久久 | 色香蕉网 | 在线免费高清一区二区三区 | 久久激情视频 久久 | 午夜在线观看影院 | 国产福利91精品 | 日韩av成人在线观看 | 久久久久国产精品免费免费搜索 | 国产黄色a| 黄色特一级片 | 日韩激情av在线 | 成人黄色免费在线观看 | 亚洲区精品视频 | 亚洲综合在线五月天 | 97精品免费视频 | 久久综合色天天久久综合图片 | 国产精品国产自产拍高清av | 日韩欧美在线高清 | 超碰在线97国产 | 国产精品久久久久久久久久久久午夜 | 国产精品久久久777 成人手机在线视频 | 免费在线色电影 | 欧美日韩中文国产 | 狠狠干激情| 涩涩在线 | 国产精品mv | 日韩欧美高清不卡 | 色婷婷播放 | 伊人午夜视频 | 爱干视频 | 久久久久久久免费看 | 伊人超碰在线 | 中文字幕美女免费在线 | 人人玩人人添人人澡超碰 | 国产精品成人在线观看 | 国产精品久久久久av免费 | 一级电影免费在线观看 | 天堂在线v | 欧美激情精品久久久久久免费印度 | 97国产精品亚洲精品 | 国产成人精品一区二区三区福利 | 精品国产三级a∨在线欧美 免费一级片在线观看 | 亚洲免费av网站 | 狠狠色综合欧美激情 | 欧美日韩大片在线观看 | 婷婷 中文字幕 | 久操视频在线免费看 | 最近日本mv字幕免费观看 | 在线观看日韩免费视频 | 中文字幕不卡在线88 | 视频一区二区精品 | 国产精品va在线观看入 | 国产精品专区在线观看 | 成人精品视频久久久久 | 亚洲成人黄色在线 | 一区二区丝袜 | 久久久久伦理电影 | 五月天国产精品 | 欧美亚洲国产一卡 | 中文字幕在线看视频 | 狠狠狠狠狠操 |