這篇文章主要介紹了深入理解JavaScript系列(26):設計模式之構造函數模式詳解,本文講解了基本用法、構造函數與原型、只能用new嗎?、強制使用new、原始包裝函數等內容,需要的朋友可以參考下
介紹
構造函數大家都很熟悉了,不過如果你是新手,還是有必要來了解一下什麼叫構造函數的。構造函數用於創建特定類型的對象——不僅聲明了使用的對象,構造函數還可以接受參數以便第一次創建對象的時候設置對象的成員值。你可以自定義自己的構造函數,然後在裡面聲明自定義類型對象的屬性或方法。
基本用法
在JavaScript裡,構造函數通常是認為用來實現實例的,JavaScript沒有類的概念,但是有特殊的構造函數。通過new關鍵字來調用定義的否早函數,你可以告訴JavaScript你要創建一個新對象並且新對象的成員聲明都是構造函數裡定義的。在構造函數內部,this關鍵字引用的是新創建的對象。基本用法如下:
代碼如下:
var tom= new Car("大叔", 2009, 20000);
var dudu= new Car("Dudu", 2010, 5000);
console.log(tom.output());
console.log(dudu.output());
上面的例子是個非常簡單的構造函數模式,但是有點小問題。首先是使用繼承很麻煩了,其次output()在每次創建對象的時候都重新定義了,最好的方法是讓所有Car類型的實例都共享這個output()方法,這樣如果有大批量的實例的話,就會節約很多內存。
解決這個問題,我們可以使用如下方式:
代碼如下:
function formatCar() {
return this.model + "走了" + this.miles + "公裡";
}
構造函數與原型
JavaScript裡函數有個原型屬性叫prototype,當調用構造函數創建對象的時候,所有該構造函數原型的屬性在新創建對象上都可用。按照這樣,多個Car對象實例可以共享同一個原型,我們再擴展一下上例的代碼:
代碼如下:
/*
注意:這裡我們使用了Object.prototype.方法名,而不是Object.prototype
主要是用來避免重寫定義原型prototype對象
*/
Car.prototype.output= function () {
return this.model + "走了" + this.miles + "公裡";
};
var tom = new Car("大叔", 2009, 20000);
var dudu = new Car("Dudu", 2010, 5000);
console.log(tom.output());
console.log(dudu.output());
另外:我們推薦構造函數以大寫字母開頭,以便區分普通的函數。
只能用new嗎?
上面的例子對函數car都是用new來創建對象的,只有這一種方式麼?其實還有別的方式,我們列舉兩種:
代碼如下:
//方法1:作為函數調用
Car("大叔", 2009, 20000); //添加到window對象上
console.log(window.output());
//方法2:在另外一個對象的作用域內調用
var o = new Object();
Car.call(o, "Dudu", 2010, 5000);
console.log(o.output());
強制使用new
上述的例子展示了不使用new的問題,那麼我們有沒有辦法讓構造函數強制使用new關鍵字呢,答案是肯定的,上代碼:
代碼如下:
var tom = new Car("大叔", 2009, 20000);
var dudu = Car("Dudu", 2010, 5000);
console.log(typeof tom); // "object"
console.log(tom.output()); // "大叔走了20000公裡"
console.log(typeof dudu); // "object"
console.log(dudu.output()); // "Dudu走了5000公裡"
原始包裝函數
JavaScript裡有3中原始包裝函數:number, string, boolean,有時候兩種都用:
代碼如下:
// 推薦這種
var s = "my string";
var n = 101;
var b = true;
// 原始string
var greet = new String("Hello there");
// 使用split()方法分割
greet.split(' ')[0]; // "Hello"
// 給包裝函數類型添加新屬性不會報錯
greet.smile = true;
// 可以正常訪問新屬性
console.log(typeof greet.smile); // "boolean"
總結
本章主要講解了構造函數模式的使用方法、調用方法以及new關鍵字的區別,希望大家在使用的時候有所注意。