JavaScript面向對象編程(1)

          自從有了Ajax這個概念,JavaScript作為Ajax的利器,其作用一路飆升。JavaScript最基本的使用,以及語法、瀏覽器對象等等東東在這里就不累贅了。把主要篇幅放在如何實現JavaScript的面向對象編程方面。

          ??? 1. 用JavaScript實現類
          ??? ?? JavaScritpt沒有專門的機制實現類,這里是借助它的函數允許嵌套的機制來實現類的。一個函數可以包含變量,又可以包含其它函數,這樣,變量可以作為屬性,內部的函數就可以作為成員方法了。因此外層函數本身就可以作為一個類了。如下:

          function?myClass()
          {
          ????
          //此處相當于構造函數
          }
          這里 myClass就是一個類。其實可以把它看成類的構造函數。至于非構造函數的部分,以后會詳細描述。

          ??? 2. 如何獲得一個類的實例
          ????? 實現了類就應該可以獲得類的實例,JavaScript提供了一個方法可以獲得對象實例。即 new操作符。其實JavaScript中,類和函數是同一個概念,當用new操作一個函數時就返回一個對象。如下:
          var obj1?=?new?myClass();

          ??? 3. 對象的成員的引用
          ?????? 在JavaScript中引用一個類的屬性或方法的方法有以下三種。
          ?????? 1>? 點號操作符
          ??????????? 這是一種最普遍的引用方式,就不累贅。即如下形式:
          對象名.屬性名;
          對象名.方法名;

          ????? 2>? 方括號引用
          ?????????? JavaScript中允許用方括號引用對象的成員。如下:
          對象名["屬性名"];
          對象名[
          "方法名"];
          ??????????? 這里方括號內是代表屬性或方法名的字符串,不一定是字符串常量。也可以使用變量。這樣就可以使用變量傳遞屬性或方法名。為編程帶來了方便。在某些情況下,代碼中不能確定要調用那個屬性或方法時,就可以采用這種方式。否則,如果使用點號操作符,還需要使用條件判斷來調用屬性或方法。
          ?????? 另外,使用方括號引用的屬性和方法名還可以以數字開頭,或者出現空格,而使用點號引用的屬性和方法名則遵循標示符的規則。但一般不提倡使用非標示符的命名方法。
          ?
          ????? 3>? 使用eval函數
          ?????????? 如果不希望使用變量傳遞變量或方法名,又不想使用條件判斷,那么eval函數是一個好的選擇。eval接收一個字符串類型的參數,然后將這個字符串作為代碼在上下文中執行,返回執行的結果。這里正是利用了eval的這一功能。如下:
          alert(eval("對象名."?+?element.value));
          ????????
          ???? 4. 對對象屬性,方法的添加、修改和刪除操作
          ???????? JavaScript中,在生成對象之后還可以為對象動態添加、修改和刪除屬性和方法,這與其它面向對象的語言是不同的。
          ??????? 1>? 添加屬性和方法
          ????????????? 先創建一個對象,空對象創建后沒有任何屬性和方法,然而我們可以在代碼中創建。
          var?obj1?=?new?Object();
          //添加屬性
          obj1.ID?=?1;
          obj1.Name?
          =?"johnson";

          //添加方法
          obj1.showMessage?=?function()
          {
          ????alert(
          "ID:?"?+?this.ID?+?",?Name:?"?+?this.Name);
          }

          ????? 2>? 修改屬性與方法
          ??????????? 與添加屬性和方法類似,例如接著上面的例子:
          //?修改屬性
          obj1.ID?=?2;
          obj1.Name?
          =?"Amanda";

          //?修改方法
          obj1.showMessage?=?function()
          {
          ????alert(
          "ID:?"?+?this.ID");
          }
          ????
          ????? 3>? 刪除屬性與方法
          ??????????? 直接將要刪除的屬性或方法賦值為undefined即可:
          obj1.ID?= 1;
          obj1.Name?
          =?undefined;

          obj1.showMessage?
          =?undefined;

          ???? 5. 創建無類型對象。
          ??????? 類似于C#3.0里的Anonymous Types,JavaScript 也可以創建無類型的對象。形式如下:
          var?obj1?=?{};
          var?obj2?=?
          {
          ????ID:?
          1,
          ????Name:?
          "Johnson",
          ????showMessage:?
          function()
          ????
          {
          ????????alert(
          "ID:?"?+?this.ID?+?"Name:?"?+?this.Name);
          ????}

          }
          ?????? 這里定義了兩個無類型的對象,obj1和obj2。其中obj1是一個空對象。obj2包括兩個屬性ID, Name和一個方法showMessage。每個屬性和方法用逗號分割。屬性(方法)名和其值之間用分號分割。
          ?????? 用這種方式創建屬性方法時,也可以用字符串定義屬性方法的名字。如:
          var?obj2?=?
          {
          ????
          "ID"?:?1,
          ????
          "Name":?"Johnson"
          }
          ?
          ????? 6. prototype
          ????????? 每個函數對象都具有一個子對象prototype,因為函數也可以表示類,所以prototype表示一個類的成員的集合。當new 一個對象時,prototype對象的成員都會被實例化成對象的成員。先看一個例子:
          function?myClass()
          {?}

          myClass.prototype.ID?
          =?1;
          myClass.prototype.Name?
          =?"johnson";
          myClass.prototype.showMessage?
          =?function()
          {
          ????alert(
          "ID:?"?+?this.ID?+?"Name:?"?+?this.Name);
          }


          var?obj1?=?new?myClass();
          obj1.showMessage();
          ????? 使用prototype對象創建類有一個好處。如果將所有的成員直接寫在類的聲明中,如下:
          function?myClass()
          {
          ????
          //添加屬性
          ????this.ID?=?1;
          ????
          this.Name?=?"johnson";

          ????
          //添加方法
          ????this.showMessage?=?function()
          ????
          {
          ????????alert(
          "ID:?"?+?this.ID?+?",?Name:?"?+?this.Name);
          ????}

          }


          var?obj1?=?new?myClass();
          var?obj2?=?new?myClass();
          ??????? 在上面的代碼中,定義了一個類myClass,在類中直接定義了兩個屬性和一個方法。然后實例化了兩個對象,這里的兩個屬性和一個方法,每創建一次myClass對象都會被創建一次,浪費了內存空間。而用prototype以后就可以解決這個問題,每new一個函數時,其prototype對象的成員都會自動賦給這個對象,當new多個對象時不會重復創建。
          ??????? 由于prototype的初始化發生在函數體執行之前,用以下代碼可以證明:
          function?myClass()
          {
          ????
          //此處相當于構造函數
          ????this.ID?=?1;
          ????
          this.Name1 =?this.Name;
          ????
          this.showMessage();
          }

          myClass.prototype.Name?
          =?"johnson";
          myClass.prototype.showMessage?
          =?function()
          {
          ????alert(
          "ID:?"?+?this.ID?+?",?Name:?"?+?this.Name);
          }


          var?obj1?=?new?myClass();
          ??????? 執行以上代碼可以發現當new這個類型的對象時,即彈出了對話框。
          ??????? 最后只得一提的是,prototype有一個方法,在面向對象的設計中用得到。即:constructor屬性,是對構造函數的調用,這里的構造函數即上文提到的類的聲明里的代碼。如:
          function?myClass()
          {
          ????
          //此處相當于構造函數
          ????alert("this?is?in?constructor");
          }

          myClass.prototype.constructor();

          var?obj1?=?new?myClass();
          ?? 執行以上代碼你會發現對話框彈出了兩次。由此可見,prototype可專門用于設計類的成員,實際上在JavaScript面向對象的設計中,很多時候都會用到prototype。

          posted on 2009-12-08 15:39 飛熊 閱讀(228) 評論(0)  編輯  收藏 所屬分類: javaScript

          <2009年12月>
          293012345
          6789101112
          13141516171819
          20212223242526
          272829303112
          3456789

          導航

          統計

          常用鏈接

          留言簿(1)

          隨筆分類

          隨筆檔案

          文章分類

          文章檔案

          收藏夾

          搜索

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 通化市| 八宿县| 康平县| 汾西县| 师宗县| 池州市| 巧家县| 延寿县| 武功县| 青阳县| 清新县| 威信县| 阿克苏市| 双桥区| 大理市| 夏河县| 余庆县| 静宁县| 咸阳市| 阿坝县| 靖西县| 宝山区| 五寨县| 化德县| 琼海市| 扬中市| 玉门市| 普格县| 阜新市| 隆尧县| 南乐县| 阿拉善盟| 日喀则市| 新安县| 旬邑县| 绥芬河市| 无棣县| 乌鲁木齐县| 长白| 安溪县| 潮州市|