[轉貼] 用物件寫程式

出處：http://ant4js.blogspot.tw/2009/02/object1.html

用物件寫程式 | 取用成員 | 繼承 | set, get new Object() | this | new | delete | { } | 物件製造器 | prototype

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

new Object()

使用 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 紅色

this, new, delete

this 指正用的物件實體。用在方法中，指呼叫方法的物件實體。

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

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

• 程式用法：
  <script type='text/javascript'>
  delete bike.year;
  bike.draw(); 
  </script>
• 執行結果：
  光陽 undefined 紅色

{ }

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

• 程式用法：
  <script type='text/javascript'>
  store={ 
  name:'老張麵店',
  address:'中壢市',
  show:function() { document.write(this.name+'新開張，位於'+this.address); }
  }
  store.show();
  </script>
• 執行結果：
  老張麵店新開張，位於中壢市

物件製造器

使用製造器（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。

prototype

使用 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 等等。