首頁 > web前端 > js教程 > 主體

JavaScript如何使用建構函式模式建立物件實例詳解

伊谢尔伦
發布: 2017-07-27 10:32:15
原創
3284 人瀏覽過

建構函數模式

像Object 和Array 這樣建構函數,在執行時會自動出現在執行環境中。此外,也可以建立自訂的建構函數,從而定義自訂物件類型的屬性和方法。


function Person(name, age, job){
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = function(){
 alert(this.name);
};
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
登入後複製

在這個範例中,Person()函數取代了createPerson()函數。我們注意到,Person()中的程式碼除了與createPerson()中相同的部分外,還存在以下不同之處:

1、 沒有明確地建立物件;

2、直接將屬性和方法賦給了this 物件;

3、 沒有return 語句。

要建立Person 的新實例,必須使用new 運算元。以這種方式呼叫建構函式實際上會經歷以下4個步驟:

(1) 建立一個新物件;
(2) 將建構函式的作用域賦給新物件(因此this 就指向了這個新物件);
(3) 執行建構函式中的程式碼(為這個新物件新增屬性);
(4) 傳回新物件。

在前面例子的最後,person1 和person2 分別保存著Person 的一個不同的實例。這兩個物件都有一個constructor(建構函式)屬性,該屬性指向Person,如下所示。

alert(person1.constructor == Person); //true
alert(person2.constructor == Person); //true
登入後複製

物件的constructor 屬性最初是用來識別物件類型的。但是,提到偵測物件類型,還是instanceof操作符要更可靠一些。我們在這個例子中所建立的所有物件既是Object 的實例,同時也是Person的實例,這一點透過instanceof 操作符可以得到驗證。

alert(person1 instanceof Object); //true
alert(person1 instanceof Person); //true
alert(person2 instanceof Object); //true
alert(person2 instanceof Person); //true
登入後複製

建立自訂的建構函式意味著將來可以將它的實例標識為一種特定的型別;而這正是建構函式模式勝過工廠模式的地方。在這個例子中,person1 和person2 之所以同時是Object 的實例,是因為所有物件都繼承自Object。

建構子的問題

建構函式模式雖然好用,但並非沒有缺點。使用建構函數的主要問題,就是每個方法都要在每個實例上重新建立一遍。

ECMAScript 中的函數是對象,因此每定義一個函數,也就是實例化了一個物件。從邏輯角度講,此時的建構函數也可以這樣定義。

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = new Function("alert(this.name)"); // 与声明函数在逻辑上是等价的
}
登入後複製

從這個角度來看建構函數,更容易明白每個Person 實例都包含一個不同的Function 實例(以顯示name 屬性)的本質。說明白些,以這種方式創建函數,會導致不同的作用域鍊和標識符解析,但創建Function 新實例的機制仍然是相同的。因此,不同實例上的同名函數是不相等的,以下程式碼可以證明這一點。

alert(person1.sayName == person2.sayName); //false
登入後複製

然而,建立兩個完成同樣任務的Function 實例的確沒有必要;況且有this 物件在,根本不用在執行程式碼前就把函數綁定到特定物件上面。因此,大可像下面這樣,透過把函數定義轉移到建構函數外部來解決這個問題。


function Person(name, age, job){
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = sayName;
}
function sayName(){
 alert(this.name);
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
登入後複製

以上是JavaScript如何使用建構函式模式建立物件實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!