在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 教程/ HTML/ 淺談 JavaScript 實現(xiàn)面向對象中的類
淺談 JavaScript 之事件綁定
淺談 javascript 中字符串 String 與數(shù)組 Array
淺談 javascript 中基本包裝類型
淺談 JavaScript Math 和 Number 對象
淺談 Javascript 的靜態(tài)屬性和原型屬性
淺談 JavaScript 中定義變量時有無 var 聲明的區(qū)別
淺談 JavaScript Array 對象
淺談 JavaScript 函數(shù)參數(shù)的可修改性問題
淺談 javascript 中的 instanceof 和 typeof
淺談 JavaScript 中 Date (日期對象),Math 對象
淺談 Javascript 執(zhí)行順序
淺談 javascript 函數(shù)屬性和方法
淺談 JavaScript 中面向對象技術的模擬
淺談 javascript 的原型繼承
淺談 javascript 事件取消和阻止冒泡
根據(jù)一段代碼淺談 Javascript 閉包
淺談 Javascript 面向對象編程
淺談 javascript 六種數(shù)據(jù)類型以及特殊注意點
淺談 Javascript 變量作用域問題
淺談 javascript 函數(shù)內部屬性
淺談 javascript 中自定義模版
淺談 JavaScript 字符集
淺談 javascript 面向對象編程
淺談 JavaScript 框架分類
淺談 JavaScript 中的 Math.atan() 方法的使用
淺談 Javascript 數(shù)組與字典
淺談 JavaScript 數(shù)據(jù)類型及轉換
淺談 javascript 的調試
淺談 Javascript 嵌套函數(shù)及閉包
淺談 javascript 回調函數(shù)
淺談 JavaScript Date 日期和時間對象
淺談 Javascript 中的 Function 與 Object
淺談 JavaScript 數(shù)據(jù)類型
淺談 javascript 中 this 在事件中的應用
淺談 javascript 中的閉包
淺談 javascript 函數(shù)劫持
淺談 Javascript 中深復制
淺談 JavaScript 函數(shù)節(jié)流
淺談 JavaScript 中的 String 對象常用方法
淺談 JavaScript 事件的屬性列表
淺談 JavaScript 函數(shù)與棧
淺談 JavaScript 的事件
淺談 javascript 中的作用域
淺談 JavaScript 的執(zhí)行效率
淺談 Javascript 事件模擬
淺談 JavaScript function 函數(shù)種類
淺談 javascript 歸并方法
淺談 javascript 迭代方法
淺談 JavaScript 編程語言的編碼規(guī)范
淺談 JavaScript 實現(xiàn)面向對象中的類
淺談 Javascript 鼠標和滾輪事件
淺談 Javascript Base64 加密解密
淺談 Javascript 中勻速運動的停止條件
淺談 javascript 實現(xiàn)八大排序
淺談 javascript 的分號的使用
淺談 javascript 中 createElement 事件
淺談 javascript 的數(shù)據(jù)類型檢測
淺談 javascript 對象模型和 function 對象
淺談 Javascript 如何實現(xiàn)勻速運動
淺談 JavaScript 字符串與數(shù)組
淺談 javascript 面向對象程序設計
淺談 Javascript 事件處理程序的幾種方式

淺談 JavaScript 實現(xiàn)面向對象中的類

對象,是人們要進行研究的任何事物,從最簡單的整數(shù)到復雜的飛機等均可看作對象,它不僅能表示具體的事物,還能表示抽象的規(guī)則、計劃或事件。-- 引自百度百科

面向對象編程,是當前最流行的編程模式。但令人沮喪的是,作為前端應用最為廣泛的 javascript,并不支持面向對象。

javascript 沒有訪問控制符,它沒有定義類的關鍵字 class,它沒有支持繼承的 extend 或冒號,它也沒有用 來支持虛函數(shù)的 virtual,不過,JavaScript 是一門靈活的語言,下面我們就看看沒有關鍵字 class 的 Javascript 如何實現(xiàn)類定 義,并創(chuàng)建對象。

定義類并創(chuàng)建類的實例對象

在 Javascript 中,我們用 function 來定義類,如下:

function Shape()  

{  

    var x=1;  

    var y=2;  

}  

你或許會說,疑?這個不是定義函數(shù)嗎?沒錯,這個是定義函數(shù),我們定義了一個 Shape 函數(shù),并對 x 和 y 進行了初始化。不過,如果你換個角度來 看,這個就是定義一個 Shape 類,里面有兩個屬性 x 和 y,初始值分別是 1 和 2,只不過,我們定義類的關鍵字是 function 而不是 class。

然后,我們可以創(chuàng)建 Shape 類的對象 aShape,如下:

var aShape = new Shape();  

定義公有屬性和私有屬性

我們已經(jīng)創(chuàng)建了 aShape 對象,但是,當我們試著訪問它的屬性時,會出錯,如下:

aShape.x=1;  

這說明,用 var 定義的屬性是私有的。我們需要使用 this 關鍵字來定義公有的屬性。

function Shape()  

{  

    this.x=1;  

    this.y=2;  

}  

這樣,我們就可以訪問 Shape 的屬性了,如:

aShape.x=2;  

好,我們可以根據(jù)上面的代碼總結得到:用 var 可以定義類的 private 屬性,而用 this 能定義類的 public 屬性。

定義公有方法和私有方法

在 JavaScript 中,函數(shù)是 Function 類的實例,F(xiàn)unction 間接繼承自 Object,所以,函數(shù)也是一個對象,因此,我們可以用賦值的方法創(chuàng)建函數(shù),當然,我們也可以將一個函數(shù)賦給類的一個屬性變量,那么,這個屬性變量就可以稱為方法,因為它是一個可以執(zhí)行的函數(shù)。代碼如下:

function Shape()  

{  

    var x=0;  

    var y=1;  

    this.draw=function()  

    {  

        //print;  

    };  

}  

我們在上面的代碼中定義了一個 draw,并把一個 function 賦給它,下面,我們就可以通過 aShape 調用這個函數(shù),OOP 中稱為公有方法,如:

aShape.draw();  

如果用 var 定義,那么這個 draw 就變成私有的了,OOP 中稱為私有方法,如:

function Shape()  

{  

    var x=0;  

    var y=1;  

    var draw=function()  

    {  

        //print;  

    };  

}  

這樣就不能使用 aShape.draw 調用這個函數(shù)了。

構造函數(shù)

JavaScript 并不支持 OOP,當然也就沒有構造函數(shù)了,不過,我們可以自己模擬一個構造函數(shù),讓對象被創(chuàng)建時自動調用,代碼如下:

function Shape()  

{  

    var init = function()  

    {  

         // 構造函數(shù)代碼  

    };  

    init();  

}  

在 Shape 的最后,我們人為的調用了 init 函數(shù),那么,在創(chuàng)建了一個 Shape 對象是,init 總會被自動調用,可以模擬我們的構造函數(shù)了。

帶參數(shù)的構造函數(shù)

如何讓構造函數(shù)帶參數(shù)呢?其實很簡單,將要傳入的參數(shù)寫入函數(shù)的參數(shù)列表中即可,如:

function Shape(ax,ay)  

{  

    var x=0;  

    var y=0;  

    var init = function()  

    {  

        // 構造函數(shù)  

        x=ax;  

        y=ay;  

    };  

    init();  

}  

這樣,我們就可以這樣創(chuàng)建對象:

var aShape = new Shape(0,1);  

靜態(tài)屬性和靜態(tài)方法

在 Javascript 中如何定義靜態(tài)的屬性和方法呢?如下所示:

function Shape(ax,ay)  

{  

    var x=0;  

    var y=0;  

    var init = function()  

    {  

        // 構造函數(shù)  

        x=ax;  

        y=ay;  

    };  

    init();  

}  

Shape.count=0;// 定義一個靜態(tài)屬性 count,這個屬性是屬于類的,不是屬于對象的。  

Shape.staticMethod=function(){};// 定義一個靜態(tài)的方法  

有了靜態(tài)屬性和方法,我們就可以用類名來訪問它了,如下:

alert (aShape.count);  

aShape.staticMethod();  

注意:靜態(tài)屬性和方法都是公有的,目前為止,我不知道如何讓靜態(tài)屬性和方法變成私有的~

在方法中訪問本類的公有屬性和私有屬性

在類的方法中訪問自己的屬性,Javascript 對于公有屬性和私有屬性的訪問方法有所不同,請大家看下面的代碼:

function Shape(ax,ay)  

{  

    var x=0;  

    var y=0;  

    this.gx=0;  

    this.gy=0;  

    var init = function()  

    {  

        x=ax;// 訪問私有屬性,直接寫變量名即可  

        y=ay;  

        this.gx=ax;// 訪問公有屬性,需要在變量名前加上 this.  

        this.gy=ay;  

    };  

    init();  

}  

this 的注意事項

根據(jù)筆者的經(jīng)驗,類中的 this 并不是一直指向我們的這個對象本身的,主要原因還是因為 Javascript 并不是 OOP 語言,而且,函數(shù)和類均用 function 定義,當然會引起一些小問題。

this 指針指錯的場合一般在事件處理上面,我們想讓某個對象的成員函數(shù)來響應某個事件,當事件被觸發(fā)以后,系統(tǒng)會調用我們這個成員函數(shù),但是,傳入的 this 指針已經(jīng)不是我們本身的對象了,當然,這時再在成員函數(shù)中調用 this 當然會出錯了。

解決方法是我們在定義類的一開始就將 this 保存到一個私有的屬性中,以后,我們可以用這個屬性代替 this。我用這個方法使用 this 指針相當安全,而且很是省心~

我們修改一下代碼,解決 this 問題。對照第六部分的代碼看,你一定就明白了:

function Shape(ax,ay)  

{  

    var _this=this; // 把 this 保存下來,以后用_this 代替 this,這樣就不會被 this 弄暈了  

    var x=0;  

    var y=0;  

    _this.gx=0;  

    _this.gy=0;  

    var init = function()  

    {  

        x=ax;// 訪問私有屬性,直接寫變量名即可  

        y=ay;  

        _this.gx=ax;// 訪問公有屬性,需要在變量名前加上 this.  

        _this.gy=ay;  

    };  

    init();  

}  

以上我們聊了如何在 Javascript 中定義類,創(chuàng)建類的對象,創(chuàng)建公有和私有的屬性和方法,創(chuàng)建靜態(tài)屬性和方法,模擬構造函數(shù),并且討論了容易出錯的 this。

關于 Javascript 中的 OOP 實現(xiàn)就聊到這里,以上是最實用的內容,一般用 Javascript 定義類,創(chuàng)建對象用以上的代碼已經(jīng)足夠 了。當然,你還可以用 mootools 或 prototype 來定義類,創(chuàng)建對象。我用過 mootools 框架,感覺很不錯,它對 Javascript 的類 模擬就更完善了,還支持類的繼承,有興趣的讀者可以去嘗試一下。當然,如果使用了框架,那么在你的網(wǎng)頁中就需要包含相關的 js 頭文件,因此我還是希望讀者 能夠在沒有框架的情況下創(chuàng)建類,這樣,代碼效率較高,而且你也可以看到,要創(chuàng)建一個簡單的類并不麻煩~