javascript物件導向，從建立對象到對象繼承(1/5)

JS建立對象的幾種方法，本文討論幾種js建立對象的方法，先從最好理解的原廠模式開始：

代碼如下	複製代碼
function createPerson(name,age,job){     var o = {};     o.name = name;     o.age = age;     o.job = job;     o.sayName = function(){      alert(this.name);     };     return o; } var tanya = createPerson("tanya","30","female"); var ansel = createPerson("ansel","30","male"); tanya.sayName(); ansel.sayName();

這裡先定義o為一個空的對象，然後為o設定了一堆屬性。其實也可以直接給o屬性的嘛，所以如果這樣寫也是ok的。

代碼如下	複製代碼
function createPerson(name,age,job){     var o = {         name : name,         age : age,         job : job,         sayName : function(){          alert(this.name);         }     };     return o; } var tanya = createPerson("tanya","30","female"); var ansel = createPerson("ansel","30","male"); tanya.sayName(); ansel.sayName();

還有一種辦法是利用無敵的this，因為this就表示當前運行時的對象，將建構函式this的範圍指向新對象，將當前運行對象的屬性和方法都賦給新對象，這樣對象模式稱為建構函式模式

 

代碼如下	複製代碼
function Person(name,age,job){     this.name = name;     this.age = age;     this.job = job;     this.sayName = function(){      alert(this.name);     }; } var tanya = new Person("tanya","30","female"); var ansel =  new Person("ansel","30","male"); tanya.sayName(); ansel.sayName();

在這個例子中，tanya和ansel都有一個constructor屬性，該屬性指向person。

考慮一下如下的情況：

 

代碼如下	複製代碼
function Person(name,age,job){     this.name = name;     this.age = age;     this.job = job;     this.sayName = function(){      alert(this.name);     }; } Person("tanya","30","female"); Person("ansel","30","male"); window.sayName(); window.sayName();

發現兩次彈出的都是ansel，這是因為不用new的話，就不是一個person的執行個體，而僅僅在執行函數。而在全域範圍調用一個函數時this總是指向Global對象。而Global對象在瀏覽器中就是window對象。

我們還可以用構造模式在另外一個對象中調用sayName方法，還記得Apply和call麼，來吧再考慮另外一種情況，

代碼如下	複製代碼
function Person(name,age,job){     this.name = name;     this.age = age;     this.job = job;     this.sayName = function(){      alert(this.name);     }; } var olivia = {}; Person.call(olivia,"tanya","30","female"); olivia.sayName(); var philip = {} Person.apply(philip,["ansel","30","male"]); philip.sayName();

原型模式就要考慮原型鏈了，分析一下，sayName方法在執行個體中被重複定義了兩次，但其實沒有必要創造兩個一樣的副本。使用原型方法，可以使是tanya和ansel的共用一個sayName方法。

於是原型模式的寫法如下：

代碼如下	複製代碼
function Person(name,age,job){     this.name = name;     this.age = age;     this.job = job; } Person.prototype.sayName= function(){      alert(this.name);     }; var tanya = new Person("tanya","30","female"); var ansel =  new Person("ansel","30","male"); tanya.sayName(); ansel.sayName();

實際應用時，不是一成不變的套用某種模式，活學活用。需要共用方法的時候就用原型模式，需要使用副本的時候就用構造模式，還可以結合起來，把所有資訊都封裝在建構函式中，而通過在建構函式中初始化原型，使得對象保持了同時使用建構函式和原型的優點。

代碼如下

複製代碼

function Person(name,age,job){     this.name = name;     this.age = age;     this.job = job;     if (typeof sayName != "function" ){             Person.prototype.sayName= function(){             alert(this.name);         };     } } var tanya = new Person("tanya","30","female"); var ansel =  new Person("ansel","30","male"); ansel.sayName = function () {     alert("Hi ansel, how hansome you are!"); } tanya.sayName(); ansel.sayName();

首頁 1 2 3 4 5 末頁