js物件導向之：建立對象

標籤：des   style   blog   color   io   os   使用   ar   for   

最近在學習《js進階程式設計》，之前所接觸的很多的js類庫和jQuery外掛程式都會用物件導向的方式來設計，而自己卻還是停留在面向方法的階段，所以今天好好記錄一下學習的js建立對象。

 

第一種方式：原廠模式

function createPerson(name,age,job){    var o = new Object();    o.name = name;    o.age = age;    o.job = job;    o.sayName = function(){        alert(this.name);       };    return o;   }//調用var person = createPerson(‘張三‘,23,‘IT‘);person.sayName();

第二種方式：建構函式模式

function Person(name,age,job){    this.name = name;    this.age = age;    this.job = job;    this.sayName = function(){        alert(this.name);       };}var person = new Person(‘李四‘,24,‘nothing‘);
var person2 = new Person(‘李四2‘,22,‘nothing‘);
alert(person.sayName == person2.sayName);//false

這種方式建立的對象執行個體，每一個執行個體都對應不同的name、age、job屬性和sayName方法。

例如上面輸出了兩個執行個體的sayName方法是不同的對象。

 

第三種方式：原型模式

function Person(){}Person.prototype.name = ‘王五‘;Person.prototype.age = 25;Person.prototype.job = ‘nothing‘;Person.prototype.sayName = function(){    alert(this.name);};

也可改進為：

function Person(){ } 
Person.prototype = {
    name ： ‘王五‘, 
    age ： 25,
    job ： ‘nothing‘, 
    sayName ： function(){ alert(this.name); }
}var person = new Person();

通過原型建立的屬性，則在每一個執行個體之間共用，有點類似於static的感覺了。

原型的prototype會有一個預設建立的屬性：constructor，指向建立prototype的函數的指標，拿前面的例子將就是Person函數。

但是改進後的寫法會有不同，Person.prototype.constructor不在指向Person函數了，以為下面的寫法等於重寫了Prototype為一個Object對象。

alert(person instanceof Person);//true

alert(person instanceof Object);//true

alert(person.constructor == Person);//false

alert(person.constructor == Object);//true

 

如果constructor屬性很重要，可以手動指定。

function Person(){ } Person.prototype = {    constructor : Person,    name ： ‘王五‘,     age ： 25,    job ： ‘nothing‘,     sayName ： function(){ alert(this.name); }}var person = new Person();

 

 

 

var person1 = new Person();var person2 = new Person();當person1執行個體重新定義name時，person1執行個體的name會改變，而原型中的name值保持不變person1.name=‘王八蛋‘;alert(person1.name); //王八蛋alert(person2.name); //王五//但是使用delete可刪除執行個體屬性，重新訪問原型的屬性delete person1.name;alert(person1.name);//王五

//hasOwnProperty可以檢測執行個體是否有該屬性，繼承自Object

alert(person1.hasOwnProperty("name"));//false

//in可以檢測是否有該屬性，不論是執行個體屬性還是原型屬性

alert("name" in person1);//true

js物件導向之：建立對象