欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

全面理解面向?qū)ο蟮?JavaScript(來自ibm)

 更新時間:2013年11月10日 10:22:31   投稿:zxhpj  
要掌握好?JavaScript,首先一點(diǎn)是必須摒棄一些其他高級語言如?Java、C#?等類式面向?qū)ο笏季S的干擾,全面地從函數(shù)式語言的角度理解?JavaScript?原型式面向?qū)ο蟮奶攸c(diǎn)

當(dāng)今 JavaScript 大行其道,各種應(yīng)用對其依賴日深。web 程序員已逐漸習(xí)慣使用各種優(yōu)秀的 JavaScript 框架快速開發(fā) Web 應(yīng)用,從而忽略了對原生 JavaScript 的學(xué)習(xí)和深入理解。所以,經(jīng)常出現(xiàn)的情況是,很多做了多年 JS 開發(fā)的程序員對閉包、函數(shù)式編程、原型總是說不清道不明,即使使用了框架,其代碼組織也非常糟糕。這都是對原生 JavaScript 語言特性理解不夠的表現(xiàn)。要掌握好 JavaScript,首先一點(diǎn)是必須摒棄一些其他高級語言如 Java、C# 等類式面向?qū)ο笏季S的干擾,全面地從函數(shù)式語言的角度理解 JavaScript 原型式面向?qū)ο蟮奶攸c(diǎn)。把握好這一點(diǎn)之后,才有可能進(jìn)一步使用好這門語言。本文適合群體:使用過 JS 框架但對 JS 語言本質(zhì)缺乏理解的程序員,具有 Java、C++ 等語言開發(fā)經(jīng)驗(yàn),準(zhǔn)備學(xué)習(xí)并使用 JavaScript 的程序員,以及一直對 JavaScript 是否面向?qū)ο竽@鈨煽?,但希望知道JS愛好者。
 
重新認(rèn)識面向?qū)ο?/strong>

為了說明 JavaScript 是一門徹底的面向?qū)ο蟮恼Z言,首先有必要從面向?qū)ο蟮母拍钪?, 探討一下面向?qū)ο笾械膸讉€概念:

一切事物皆對象

對象具有封裝和繼承特性
對象與對象之間使用消息通信,各自存在信息隱藏
以這三點(diǎn)做為依據(jù),C++ 是半面向?qū)ο蟀朊嫦蜻^程語言,因?yàn)?,雖然他實(shí)現(xiàn)了類的封裝、繼承和多態(tài),但存在非對象性質(zhì)的全局函數(shù)和變量。Java、C# 是完全的面向?qū)ο笳Z言,它們通過類的形式組織函數(shù)和變量,使之不能脫離對象存在。但這里函數(shù)本身是一個過程,只是依附在某個類上。

然而,面向?qū)ο髢H僅是一個概念或者編程思想而已,它不應(yīng)該依賴于某個語言存在。比如 Java 采用面向?qū)ο笏枷霕?gòu)造其語言,它實(shí)現(xiàn)了類、繼承、派生、多態(tài)、接口等機(jī)制。但是這些機(jī)制,只是實(shí)現(xiàn)面向?qū)ο缶幊痰囊环N手段,而非必須。換言之,一門語言可以根據(jù)其自身特性選擇合適的方式來實(shí)現(xiàn)面向?qū)ο?。所以,由于大多?shù)程序員首先學(xué)習(xí)或者使用的是類似 Java、C++ 等高級編譯型語言(Java 雖然是半編譯半解釋,但一般做為編譯型來講解),因而先入為主地接受了“類”這個面向?qū)ο髮?shí)現(xiàn)方式,從而在學(xué)習(xí)腳本語言的時候,習(xí)慣性地用類式面向?qū)ο笳Z言中的概念來判斷該語言是否是面向?qū)ο笳Z言,或者是否具備面向?qū)ο筇匦?。這也是阻礙程序員深入學(xué)習(xí)并掌握 JavaScript 的重要原因之一。

實(shí)際上,JavaScript 語言是通過一種叫做 原型(prototype)的方式來實(shí)現(xiàn)面向?qū)ο缶幊痰摹O旅婢蛠碛懻?基于類的(class-based)面向?qū)ο蠛?基于原型的 (prototype-based) 面向?qū)ο筮@兩種方式在構(gòu)造客觀世界的方式上的差別。

基于類的面向?qū)ο蠛突谠偷拿嫦驅(qū)ο蠓绞奖容^

事實(shí)上關(guān)于這兩種方式誰更為徹底地表達(dá)了面向?qū)ο蟮乃枷?,目前尚有爭論。但筆者認(rèn)為原型式面向?qū)ο笫且环N更為徹底的面向?qū)ο蠓绞?,理由如下?/p>

首先,客觀世界中的對象的產(chǎn)生都是其它實(shí)物對象構(gòu)造的結(jié)果,而抽象的“圖紙”是不能產(chǎn)生“汽車”的,也就是說,類是一個抽象概念而并非實(shí)體,而對象的產(chǎn)生是一個實(shí)體的產(chǎn)生;

其次,按照一切事物皆對象這個最基本的面向?qū)ο蟮姆▌t來看,類 (class) 本身并不是一個對象,然而原型方式中的構(gòu)造器 (constructor) 和原型 (prototype) 本身也是其他對象通過原型方式構(gòu)造出來的對象。

再次,在類式面向?qū)ο笳Z言中,對象的狀態(tài) (state) 由對象實(shí)例 (instance) 所持有,對象的行為方法 (method) 則由聲明該對象的類所持有,并且只有對象的結(jié)構(gòu)和方法能夠被繼承;而在原型式面向?qū)ο笳Z言中,對象的行為、狀態(tài)都屬于對象本身,并且能夠一起被繼承,這也更貼近客觀實(shí)際。

最后,類式面向?qū)ο笳Z言比如 Java,為了彌補(bǔ)無法使用面向過程語言中全局函數(shù)和變量的不便,允許在類中聲明靜態(tài) (static) 屬性和靜態(tài)方法。而實(shí)際上,客觀世界不存在所謂靜態(tài)概念,因?yàn)橐磺惺挛锝詫ο?!而在原型式面向?qū)ο笳Z言中,除內(nèi)建對象 (build-in object) 外,不允許全局對象、方法或者屬性的存在,也沒有靜態(tài)概念。所有語言元素 (primitive) 必須依賴對象存在。但由于函數(shù)式語言的特點(diǎn),語言元素所依賴的對象是隨著運(yùn)行時 (runtime) 上下文 (context) 變化而變化的,具體體現(xiàn)在 this 指針的變化。正是這種特點(diǎn)更貼近 “萬物皆有所屬,宇宙乃萬物生存之根本”的自然觀點(diǎn)。在window便類似與宇宙的概念。

清單 1. 對象的上下文依賴

 obj.fun = fun;

 console.log( this === window );     // 打印 true
 console.log( window.str === str );  // 打印 true
 console.log( window.obj === obj );  // 打印 true
 console.log( window.fun === fun );  // 打印 true
 fun();                              // 打印 我是一個 Function 對象!誰調(diào)用我,我屬于誰:window
 obj.fun();                          // 打印 我是一個 Function 對象!誰調(diào)用我,我屬于誰:obj
 fun.apply(str);                   // 打印 我是一個 Function 對象!誰調(diào)用我,我屬于誰:str
 </script>
[/code]

在接受了面向?qū)ο蟠嬖谝环N叫做基于原型實(shí)現(xiàn)的方式的事實(shí)之后,下面我們就可以來深入探討 ECMAScript 是如何依據(jù)這一方式構(gòu)造自己的語言的。

最基本的面向?qū)ο?/strong>

ECMAScript 是一門徹底的面向?qū)ο蟮木幊陶Z言(參考資源),JavaScript 是其中的一個變種 (variant)。它提供了 6 種基本數(shù)據(jù)類型,即 Boolean、Number、String、Null、Undefined、Object。為了實(shí)現(xiàn)面向?qū)ο?,ECMAScript設(shè)計(jì)出了一種非常成功的數(shù)據(jù)結(jié)構(gòu) - JSON(JavaScript Object Notation), 這一經(jīng)典結(jié)構(gòu)已經(jīng)可以脫離語言而成為一種廣泛應(yīng)用的數(shù)據(jù)交互格式 (參考資源)。

應(yīng)該說,具有基本數(shù)據(jù)類型和 JSON 構(gòu)造語法的 ECMAScript 已經(jīng)基本可以實(shí)現(xiàn)面向?qū)ο蟮木幊塘?。開發(fā)者可以隨意地用 字面式聲明(literal notation方式來構(gòu)造一個對象,并對其不存在的屬性直接賦值,或者用 delete 將屬性刪除 ( 注:JS 中的 delete 關(guān)鍵字用于刪除對象屬性,經(jīng)常被誤作為 C++ 中的 delete,而后者是用于釋放不再使用的對象 ),如 程序清單 2。

清單 2. 字面式 (literal notation) 對象聲明

復(fù)制代碼 代碼如下:

var person = {
    name: “張三”,
    age: 26,
    gender: “男”,
    eat: function( stuff ) {
        alert( “我在吃” + stuff );
    }
 };
 person.height = 176;
 delete person[ “age” ];

在實(shí)際開發(fā)過程中,大部分初學(xué)者或者對 JS 應(yīng)用沒有太高要求的開發(fā)者也基本上只用到 ECMAScript 定義的這一部分內(nèi)容,就能滿足基本的開發(fā)需求。然而,這樣的代碼復(fù)用性非常弱,與其他實(shí)現(xiàn)了繼承、派生、多態(tài)等等的類式面向?qū)ο蟮膹?qiáng)類型語言比較起來顯得有些干癟,不能滿足復(fù)雜的 JS 應(yīng)用開發(fā)。所以 ECMAScript 引入原型來解決對象繼承問題。

使用函數(shù)構(gòu)造器構(gòu)造對象

除了 字面式聲明(literal notation方式之外,ECMAScript 允許通過 構(gòu)造器(constructor)創(chuàng)建對象。每個構(gòu)造器實(shí)際上是一個 函數(shù)(function) 對象, 該函數(shù)對象含有一個“prototype”屬性用于實(shí)現(xiàn) 基于原型的繼承prototype-based inheritance和 共享屬性(shared properties。對象可以由“new 關(guān)鍵字 + 構(gòu)造器調(diào)用”的方式來創(chuàng)建,如 程序清單 3

清單 3. 使用構(gòu)造器 (constructor) 創(chuàng)建對象

復(fù)制代碼 代碼如下:

// 構(gòu)造器 Person 本身是一個函數(shù)對象
 function Person() {
  // 此處可做一些初始化工作
 }
 // 它有一個名叫 prototype 的屬性
 Person.prototype = {
    name: “張三”,
    age: 26,
    gender: “男”,
    eat: function( stuff ) {
        alert( “我在吃” + stuff );
    }
 }
 // 使用 new 關(guān)鍵字構(gòu)造對象
 var p = new Person();

由于早期 JavaScript 的發(fā)明者為了使這門語言與大名鼎鼎的 Java 拉上關(guān)系 ( 雖然現(xiàn)在大家知道二者是雷鋒和雷鋒塔的關(guān)系 ),使用了new 關(guān)鍵字來限定構(gòu)造器調(diào)用并創(chuàng)建對象,以使其在語法上跟 Java 創(chuàng)建對象的方式看上去類似。但需要指出的是,這兩門語言的new含義毫無關(guān)系,因?yàn)槠鋵ο髽?gòu)造的機(jī)理完全不同。也正是因?yàn)檫@里語法上的類似,眾多習(xí)慣了類式面向?qū)ο笳Z言中對象創(chuàng)建方式的程序員,難以透徹理解 JS 對象原型構(gòu)造的方式,因?yàn)樗麄兛偸遣幻靼自?JS 語言中,為什么“函數(shù)名可以作為類名”的現(xiàn)象。而實(shí)質(zhì)上,JS 這里僅僅是借用了關(guān)鍵字 new,僅此而已;換句話說,ECMAScript 完全可以用其它 非 new 表達(dá)式來用調(diào)用構(gòu)造器創(chuàng)建對象。

徹底理解原型鏈 (prototype chain)

在 ECMAScript 中,每個由構(gòu)造器創(chuàng)建的對象擁有一個指向構(gòu)造器 prototype 屬性值的 隱式引用(implicit reference,這個引用稱之為 原型(prototype。進(jìn)一步,每個原型可以擁有指向自己原型的 隱式引用(即該原型的原型),如此下去,這就是所謂的原型鏈(prototype chain (參考資源)。在具體的語言實(shí)現(xiàn)中,每個對象都有一個 __proto__ 屬性來實(shí)現(xiàn)對原型的 隱式引用。程序清單 4說明了這一點(diǎn)。

清單 4. 對象的 __proto__ 屬性和隱式引用

復(fù)制代碼 代碼如下:

 function Person( name ) {
    this.name = name;
 }
 var p = new Person();
 // 對象的隱式引用指向了構(gòu)造器的 prototype 屬性,所以此處打印 true
 console.log( p.__proto__ === Person.prototype );

 // 原型本身是一個 Object 對象,所以他的隱式引用指向了
 // Object 構(gòu)造器的 prototype 屬性 , 故而打印 true
 console.log( Person.prototype.__proto__ === Object.prototype );

 // 構(gòu)造器 Person 本身是一個函數(shù)對象,所以此處打印 true
 console.log( Person.__proto__ === Function.prototype );

有了 原型鏈,便可以定義一種所謂的 屬性隱藏機(jī)制,并通過這種機(jī)制實(shí)現(xiàn)繼承。ECMAScript 規(guī)定,當(dāng)要給某個對象的屬性賦值時,解釋器會查找該對象原型鏈中第一個含有該屬性的對象(注:原型本身就是一個對象,那么原型鏈即為一組對象的鏈。對象的原型鏈中的第一個對象是該對象本身)進(jìn)行賦值。反之,如果要獲取某個對象屬性的值,解釋器自然是返回該對象原型鏈中首先具有該屬性的對象屬性值。圖 1說名了這中隱藏機(jī)制:


圖 1. 原型鏈中的屬性隱藏機(jī)制
圖 1. 原型鏈中的屬性隱藏機(jī)制

在圖 1 中,object1->prototype1->prototype2 構(gòu)成了 對象 object1 的原型鏈,根據(jù)上述屬性隱藏機(jī)制,可以清楚地看到 prototype1 對象中的 property4 屬性和 prototype2 對象中的 property3 屬性皆被隱藏。理解了原型鏈,那么將非常容易理解 JS 中基于原型的繼承實(shí)現(xiàn)原理,程序清單 5 是利用原型鏈實(shí)現(xiàn)繼承的簡單例子。

清單 5. 利用原型鏈 Horse->Mammal->Animal 實(shí)現(xiàn)繼承

復(fù)制代碼 代碼如下:

// 聲明 Animal 對象構(gòu)造器
 function Animal() {
 }
 // 將 Animal 的 prototype 屬性指向一個對象,
 // 亦可直接理解為指定 Animal 對象的原型
 Animal.prototype = {
    name: animal",
    weight: 0,
    eat: function() {
        alert( "Animal is eating!" );
    }
 }
 // 聲明 Mammal 對象構(gòu)造器
 function Mammal() {
    this.name = "mammal";
 }
 // 指定 Mammal 對象的原型為一個 Animal 對象。
 // 實(shí)際上此處便是在創(chuàng)建 Mammal 對象和 Animal 對象之間的原型鏈
 Mammal.prototype = new Animal();

 // 聲明 Horse 對象構(gòu)造器
 function Horse( height, weight ) {
    this.name = "horse";
    this.height = height;
    this.weight = weight;
 }
 // 將 Horse 對象的原型指定為一個 Mamal 對象,繼續(xù)構(gòu)建 Horse 與 Mammal 之間的原型鏈
 Horse.prototype = new Mammal();

 // 重新指定 eat 方法 , 此方法將覆蓋從 Animal 原型繼承過來的 eat 方法
 Horse.prototype.eat = function() {
    alert( "Horse is eating grass!" );
 }
 // 驗(yàn)證并理解原型鏈
 var horse = new Horse( 100, 300 );
 console.log( horse.__proto__ === Horse.prototype );
 console.log( Horse.prototype.__proto__ === Mammal.prototype );
 console.log( Mammal.prototype.__proto__ === Animal.prototype );

理解清單 5 中對象原型繼承邏輯實(shí)現(xiàn)的關(guān)鍵在于 Horse.prototype = new Mammal() 和 Mammal.prototype = new Animal() 這兩句代碼。首先,等式右邊的結(jié)果是構(gòu)造出一個臨時對象,然后將這個對象賦值給等式左邊對象的 prototype 屬性。也就是說將右邊新建的對象作為左邊對象的原型。讀者可以將這兩個等式替換到相應(yīng)的程序清單 5 代碼最后兩行的等式中自行領(lǐng)悟。

JavaScript 類式繼承的實(shí)現(xiàn)方法

從代碼清單 5 可以看出,基于原型的繼承方式,雖然實(shí)現(xiàn)了代碼復(fù)用,但其行文松散且不夠流暢,可閱讀性差,不利于實(shí)現(xiàn)擴(kuò)展和對源代碼進(jìn)行有效地組織管理。不得不承認(rèn),類式繼承方式在語言實(shí)現(xiàn)上更具健壯性,且在構(gòu)建可復(fù)用代碼和組織架構(gòu)程序方面具有明顯的優(yōu)勢。這使得程序員們希望尋找到一種能夠在 JavaScript 中以類式繼承風(fēng)格進(jìn)行編碼的方法途徑。從抽象的角度來講,既然類式繼承和原型繼承都是為實(shí)現(xiàn)面向?qū)ο蠖O(shè)計(jì)的,并且他們各自實(shí)現(xiàn)的載體語言在計(jì)算能力上是等價的 ( 因?yàn)閳D靈機(jī)的計(jì)算能力與 Lambda 演算的計(jì)算能力是等價的 ),那么能不能找到一種變換,使得原型式繼承語言通過該變換實(shí)現(xiàn)具有類式繼承編碼的風(fēng)格呢?

目前一些主流的 JS 框架都提供了這種轉(zhuǎn)換機(jī)制,也即類式聲明方法,比如 Dojo.declare()、Ext.entend() 等等。用戶使用這些框架,可以輕易而友好地組織自己的 JS 代碼。其實(shí),在眾多框架出現(xiàn)之前,JavaScript 大師 Douglas Crockford 最早利用三個函數(shù)對 Function 對象進(jìn)行擴(kuò)展,實(shí)現(xiàn)了這種變換,關(guān)于它的實(shí)現(xiàn)細(xì)節(jié)可以(參考資源)。此外還有由 Dean Edwards實(shí)現(xiàn)的著名的 Base.js(參考資源)。值得一提的是,jQuery 之父 John Resig 在搏眾家之長之后,用不到 30 行代碼便實(shí)現(xiàn)了自己的 Simple Inheritance。使用其提供的 extend 方法聲明類非常簡單。程序清單 6是使用了 Simple Inheritance庫實(shí)現(xiàn)類的聲明的例子。其中最后一句打印輸出語句是對 Simple Inheritance實(shí)現(xiàn)類式繼承的最好說明。

清單 6. 使用 Simple Inheritance 實(shí)現(xiàn)類式繼承

復(fù)制代碼 代碼如下:

// 聲明 Person 類
 var Person = Class.extend( {
    _issleeping: true,
    init: function( name ) {
        this._name = name;
    },
    isSleeping: function() {
        return this._issleeping;
    }
 } );
 // 聲明 Programmer 類,并繼承 Person
 var Programmer = Person.extend( {
    init: function( name, issleeping ) {
        // 調(diào)用父類構(gòu)造函數(shù)
        this._super( name );
        // 設(shè)置自己的狀態(tài)
        this._issleeping = issleeping;
    }
 } );
 var person = new Person( "張三" );
 var diors = new Programmer( "張江男", false );
 // 打印 true
 console.log( person.isSleeping() );
 // 打印 false
 console.log( diors.isSleeping() );
 // 此處全為 true,故打印 true
 console.log( person instanceof Person && person instanceof Class
    && diors instanceof Programmer &&
    diors instanceof Person && diors instanceof Class );

如果您已對原型、函數(shù)構(gòu)造器、閉包和基于上下文的 this 有了充分的理解,那么理解 Simple Inheritance 的實(shí)現(xiàn)原理也并非相當(dāng)困難。從本質(zhì)上講,var Person = Class.extend(...)該語句中,左邊的 Person 實(shí)際上是獲得了由 Class 調(diào)用 extend 方法返回的一個構(gòu)造器,也即一個 function 對象的引用。順著這個思路,我們繼續(xù)介紹 Simple Inheritance 是如何做到這一點(diǎn),進(jìn)而實(shí)現(xiàn)了由原型繼承方式到類式繼承方式的轉(zhuǎn)換的。圖 2 是 Simple Inheritance 的源碼及其附帶注釋。為了方便理解,用中文對代碼逐行補(bǔ)充說明。

圖 2.Simple Inheritance 源碼解析

圖 2.Simple Inheritance 源碼解析 

拋開代碼第二部分,整體連貫地考察第一和第三部分會發(fā)現(xiàn),extend 函數(shù)的根本目的就是要構(gòu)造一個具有新原型屬性的新構(gòu)造器。我們不禁感嘆 John Resig的大師手筆及其對 JS 語言本質(zhì)把握的細(xì)膩程度。至于 John Resig是如何想到這樣精妙的實(shí)現(xiàn)方法,感興趣的讀者可以閱讀本文 (參考資源),其中有詳細(xì)介紹關(guān)于最初設(shè)計(jì) Simple Inheritance 的思維過程。

JavaScript 私有成員實(shí)現(xiàn)

到此為止,如果您任然對 JavaScript 面向?qū)ο蟪謶岩蓱B(tài)度,那么這個懷疑一定是,JavaScript 沒有實(shí)現(xiàn)面向?qū)ο笾械男畔㈦[藏,即私有和公有。與其他類式面向?qū)ο竽菢语@式地聲明私有公有成員的方式不同,JavaScript 的信息隱藏就是靠閉包實(shí)現(xiàn)的。見 程序清單 7:

清單 7. 使用閉包實(shí)現(xiàn)信息隱藏

復(fù)制代碼 代碼如下:

// 聲明 User 構(gòu)造器
 function User( pwd ) {
    // 定義私有屬性
    var password = pwd;
    // 定義私有方法
    function getPassword() {
        // 返回了閉包中的 password
        return password;
    }
    // 特權(quán)函數(shù)聲明,用于該對象其他公有方法能通過該特權(quán)方法訪問到私有成員
    this.passwordService = function() {
        return getPassword();
    }
 }
 // 公有成員聲明
 User.prototype.checkPassword = function( pwd ) {
    return this.passwordService() === pwd;
 };
 // 驗(yàn)證隱藏性
 var u = new User( "123456" );
 // 打印 true
 console.log( u.checkPassword( "123456" ) );
 // 打印 undefined
 console.log( u.password );
 // 打印 true
 console.log( typeof u.gePassword === "undefined" );

JavaScript 必須依賴閉包實(shí)現(xiàn)信息隱藏,是由其函數(shù)式語言特性所決定的。本文不會對函數(shù)式語言和閉包這兩個話題展開討論,正如上文默認(rèn)您理解 JavaScript 中基于上下文的 this 一樣。關(guān)于 JavaScript 中實(shí)現(xiàn)信息隱藏,Douglas Crockford在《 Private members in JavaScript 》(參考資源)一文中有更權(quán)威和詳細(xì)的介紹。

結(jié)束語

JavaScript 被認(rèn)為是世界上最受誤解的編程語言,因?yàn)樗砼?c 語言家族的外衣,表現(xiàn)的卻是 LISP 風(fēng)格的函數(shù)式語言特性;沒有類,卻實(shí)也徹底實(shí)現(xiàn)了面向?qū)ο蟆R獙@門語言有透徹的理解,就必須扒開其 c 語言的外衣,從新回到函數(shù)式編程的角度,同時摒棄原有類的面向?qū)ο蟾拍钊W(xué)習(xí)領(lǐng)悟它。隨著近些年來 Web 應(yīng)用的普及和 JS 語言自身的長足發(fā)展,特別是后臺 JS 引擎的出現(xiàn) ( 如基于 V8 的 NodeJS 等 ),可以預(yù)見,原來只是作為玩具編寫頁面效果的 JS 將獲得更廣闊發(fā)展天地。這樣的發(fā)展趨勢,也對 JS 程序員提出了更高要求。只有徹底領(lǐng)悟了這門語言,才有可能在大型的 JS 項(xiàng)目中發(fā)揮她的威力。

相關(guān)文章

最新評論