2008年12月2日

用物件寫程式

一個物件包括了數個特徵(property)及數個方法(method)。這種結構化的資料組成,更符合真實世界的物體。此處介紹建立物件的方法及如何使用物件。

  1. 使用 new Object() 建立客製物件實體。

    • 程式用法:

      <script type='text/javascript'>
      bike=new Object();
      bike.maker='光陽';
      bike.year=2007;
      bike.color='紅色';
      bike.draw=function () { document.write(this.maker+' '+this.year+' '+this.color); }
      bike.draw();
      </script>

    • 執行結果:

      光陽 2007 紅色

  2. this, new, delete:this 指正用的物件實體。用在方法中,指呼叫方法的物件實體。

    new 結合物件製造器,建立物件的實體,也就是配給記憶體。

    delete 可刪除已宣告的變數,物件實體,物件特徵,陣列的項目。delete 可以釋放沒用到的記憶體。

    • 程式用法:

      <script type='text/javascript'>
      delete bike.year;
      bike.draw(); 
      </script>

    • 執行結果:

      光陽 undefined 紅色

  3. 使用物件符號建立物件實體。物件用 { } 包夾。成員的名稱與值用”:”分開。不同的成員用”,”分隔。

    • 程式用法:

      <script type='text/javascript'>
      store={ 
      name:'老張麵店',
      address:'中壢市',
      show:function() { document.write(this.name+'新開張,位於'+this.address); }
      }
      store.show();
      </script>

    • 執行結果:

      老張麵店新開張,位於中壢市

  4. 使用製造器(Constructor)建立物件實體。先用 function 建立一個物件製造器,包括物件型態名稱,特徵,方法。然後用 new計算器,製造物件的實體,也就是配給資料儲存的記憶體,並且設定初值。物件製造器可以依據規劃的藍圖,建立多個物件實體,這比 new Object() 與物件符號{}兩個方法好,所以建議多採用物件製造器。

    • 程式用法:

      <script type='text/javascript'>
      function student(name,gender,department)
      {
       this.name=name;
       this.gender=gender;
       this.department=department;
       this.list=function () 
            { document.write('<br />'+this.name+
              ' / '+this.gender+' / '+this.department); 
            }
      }
      Jolin=new student('蔡依林', '女', '英語系');
      Jay=new student('周杰倫', '男', '音樂系');
      Jolin.list();
      Jay.list();
      </script>

    • 執行結果:


      蔡依林 / 女 / 英語系
      周杰倫 / 男 / 音樂系

    • 上面的範例中,用 function 定義了一個物件製造器,其名稱為 student。然後用 new 製造兩個物件實體 Jolin 及 Jay。

    所有的物件都會繼承物件 Function 的特徵與方法

    • 程式用法:

      <script type='text/javascript'>
      document.write( Jolin.constructor +'<br />');
      document.write( student.length +'<br />');
      document.write( Jay.toString() +'<br />');
      document.write( store.valueOf() );
      </script>

    • 執行結果:

      function student(name,gender,department) { this.name=name; this.gender=gender; this.department=department; this.list=function () { document.write('
      '+this.name+ ' / '+this.gender+' / '+this.department); } }
      3
      [object Object]
      [object Object]

    所有的物件都會繼承物件 Object 的方法

    • 程式用法:

      <script type='text/javascript'>
      document.write( student.prototype.isPrototypeOf(Jolin) +'<br />');
      document.write( Object.prototype.isPrototypeOf(store) +'<br />');
      document.write( bike.hasOwnProperty('maker') );
      </script>

    • 執行結果:

      true
      true
      true

    可以動態增加物件實體的特徵與方法。下面的例子,為物件 Jolin 增加了一個方法 hello()。這個方法 Jay 不能用。

    • 程式用法:

      <script type='text/javascript'>
      Jolin.hello=function () { document.write('你們好!我是 Jolin。'); };
      Jolin.hello();
      </script>

    • 執行結果:

      你們好!我是 Jolin。

  5. 使用 prototype 增加物件型態的特徵與方法。使用 prototype 的最大好處是,新增加的特徵與方法,也可以用在已經實體化的物件。

    • 程式用法:

      <script type='text/javascript'>
      student.prototype.age=0;
      student.prototype.changeAge=function (age) {this.age=age; }
      student.prototype.listAll=function () { document.write('<br />'+this.name+' / '+this.gender+' / '+this.age+'歲 / '+this.department); }
      Jolin.changeAge(27);
      Jay.changeAge(28);
      Jolin.listAll();
      Jay.listAll();
      </script>

    • 執行結果:


      蔡依林 / 女 / 27歲 / 英語系
      周杰倫 / 男 / 28歲 / 音樂系

    • 上例中,用 prototype 為物件型態 student 新增加一個特徵 age,兩個方法 changeAge 與 listAll。

    prototype 也可以用在系統預設的物件型態,例如 Array, Date, String 等等。

  6. 繼承(inheritance):請參考 說明與範例
  7. 取用物件成員的方法,可用 . 或 []。使用 [] 的好處是,成員名稱是用字串來表達,而在程序執行中,字串可以變更。

    • 程式用法:

      <script type='text/javascript'>
      document.write(Ma.name+' / '+Ma['department'])
      </script>

    • 執行結果:

  8. in:用來檢查一個物件實體或物件型態中,是否含有指定的成員。語法是:

    成員 in 物件

    成員可用字串指定成員的名稱,或用整數的陣列指標;如果成員存在物件中,得到 true,否則為 false。

    • 程式用法:

      <script type='text/javascript'>
      document.write( 'list' in Ma );
      </script>

    • 執行結果:

  9. instanceof:用來檢查一個物件實體是否是屬於指定的物件型態,肯定時為 true,否則為 false。其語法為:

    實體名稱 instanceof 型態名稱

    • 程式用法:

      <script type='text/javascript'>
      document.write( Ma instanceof teacher );
      </script>

    • 執行結果:

  10. for each( in ):將物件成員的值,一一取用。for each( in ) 將物件成員的值,一次取出一個,可在迴路中使用;到最後一個成員後,迴路結束。

    for each( in ) 只能在 Firefox 使用;IE, Safari, Chrome 都沒有支援。

    • 程式用法:

      <script type='text/javascript'>
      document.write('<ol>');
      for each( val in Ma ) document.write('<li>'+val);
      document.write('</ol>');
      </script>

    • 執行結果:

  11. for( in ):將物件的成員名稱,一一取用。這與上述的 for each( in ) 取出成員的值,有所不同。

    • 程式用法:

      <script type='text/javascript'>
      document.write('<ol>');
      for( key in Ma ) document.write('<li>'+key+' -- '+Ma[key]);
      document.write('</ol>');
      </script>

    • 執行結果:

  12. with:可用來宣告常用的物件實體,可以縮短使用物件成員的字串。通常用在使用物件頻繁的區塊。使用時要注意變數名稱與成員名稱不要相同。

    • 程式用法:

      <script type='text/javascript'>
      with( Ma ) document.write( name +' 任職 '+ department );
      </script>

    • 執行結果:

  13. set, get。 __defineGetter__(), __defineSetter__ ()。 __lookupGetter__(), __lookupSetter__() 。 以上請參考 說明與範例

©2008-2009 by ant2legs, All Rights Reserved. ant2legs 擁有其製作的文章,圖片與程式的著作權,所有權利保留。