免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項超值服

開通VIP
深入理解JavaScript系列(26):設(shè)計模式之構(gòu)造函數(shù)模式

介紹

構(gòu)造函數(shù)大家都很熟悉了,不過如果你是新手,還是有必要來了解一下什么叫構(gòu)造函數(shù)的。構(gòu)造函數(shù)用于創(chuàng)建特定類型的對象——不僅聲明了使用的對象,構(gòu)造函數(shù)還可以接受參數(shù)以便第一次創(chuàng)建對象的時候設(shè)置對象的成員值。你可以自定義自己的構(gòu)造函數(shù),然后在里面聲明自定義類型對象的屬性或方法。

基本用法

在JavaScript里,構(gòu)造函數(shù)通常是認(rèn)為用來實現(xiàn)實例的,JavaScript沒有類的概念,但是有特殊的構(gòu)造函數(shù)。通過new關(guān)鍵字來調(diào)用定義的否早函數(shù),你可以告訴JavaScript你要創(chuàng)建一個新對象并且新對象的成員聲明都是構(gòu)造函數(shù)里定義的。在構(gòu)造函數(shù)內(nèi)部,this關(guān)鍵字引用的是新創(chuàng)建的對象。基本用法如下:

function Car(model, year, miles) {
this.model = model;
this.year = year;
this.miles = miles;
this.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());

上面的例子是個非常簡單的構(gòu)造函數(shù)模式,但是有點(diǎn)小問題。首先是使用繼承很麻煩了,其次output()在每次創(chuàng)建對象的時候都重新定義了,最好的方法是讓所有Car類型的實例都共享這個output()方法,這樣如果有大批量的實例的話,就會節(jié)約很多內(nèi)存。

解決這個問題,我們可以使用如下方式:

function Car(model, year, miles) {
this.model = model;
this.year = year;
this.miles = miles;
this.output= formatCar;
}

function formatCar() {
return this.model + "走了" + this.miles + "公里";
}

這個方式雖然可用,但是我們有如下更好的方式。

構(gòu)造函數(shù)與原型

JavaScript里函數(shù)有個原型屬性叫prototype,當(dāng)調(diào)用構(gòu)造函數(shù)創(chuàng)建對象的時候,所有該構(gòu)造函數(shù)原型的屬性在新創(chuàng)建對象上都可用。按照這樣,多個Car對象實例可以共享同一個原型,我們再擴(kuò)展一下上例的代碼:

function Car(model, year, miles) {
this.model = model;
this.year = year;
this.miles = miles;
}

/*
注意:這里我們使用了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());

這里,output()單實例可以在所有Car對象實例里共享使用。

另外:我們推薦構(gòu)造函數(shù)以大寫字母開頭,以便區(qū)分普通的函數(shù)。

只能用new嗎?

上面的例子對函數(shù)car都是用new來創(chuàng)建對象的,只有這一種方式么?其實還有別的方式,我們列舉兩種:

function Car(model, year, miles) {
this.model = model;
this.year = year;
this.miles = miles;
// 自定義一個output輸出內(nèi)容
this.output = function () {
return this.model + "走了" + this.miles + "公里";
}
}

//方法1:作為函數(shù)調(diào)用
Car("大叔", 2009, 20000); //添加到window對象上
console.log(window.output());

//方法2:在另外一個對象的作用域內(nèi)調(diào)用
var o = new Object();
Car.call(o, "Dudu", 2010, 5000);
console.log(o.output());

該代碼的方法1有點(diǎn)特殊,如果不適用new直接調(diào)用函數(shù)的話,this指向的是全局對象window,我們來驗證一下:

//作為函數(shù)調(diào)用
var tom = Car("大叔", 2009, 20000);
console.log(typeof tom); // "undefined"
console.log(window.output()); // "大叔走了20000公里"

這時候?qū)ο髏om是undefined,而window.output()會正確輸出結(jié)果,而如果使用new關(guān)鍵字則沒有這個問題,驗證如下:

//使用new 關(guān)鍵字
var tom = new Car("大叔", 2009, 20000);
console.log(typeof tom); // "object"
console.log(tom.output()); // "大叔走了20000公里"

強(qiáng)制使用new

上述的例子展示了不使用new的問題,那么我們有沒有辦法讓構(gòu)造函數(shù)強(qiáng)制使用new關(guān)鍵字呢,答案是肯定的,上代碼:

function Car(model, year, miles) {
if (!(this instanceof Car)) {
return new Car(model, year, miles);
}
this.model = model;
this.year = year;
this.miles = miles;
this.output = function () {
return this.model + "走了" + this.miles + "公里";
}
}

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公里"

通過判斷this的instanceof是不是Car來決定返回new Car還是繼續(xù)執(zhí)行代碼,如果使用的是new關(guān)鍵字,則(this instanceof Car)為真,會繼續(xù)執(zhí)行下面的參數(shù)賦值,如果沒有用new,(this instanceof Car)就為假,就會重新new一個實例返回。

原始包裝函數(shù)

JavaScript里有3中原始包裝函數(shù):number, string, boolean,有時候兩種都用:

// 使用原始包裝函數(shù)
var s = new String("my string");
var n = new Number(101);
var b = new Boolean(true);


// 推薦這種
var s = "my string";
var n = 101;
var b = true;

推薦,只有在想保留數(shù)值狀態(tài)的時候使用這些包裝函數(shù),關(guān)于區(qū)別可以參考下面的代碼:

// 原始string
var greet = "Hello there";
// 使用split()方法分割
greet.split(' ')[0]; // "Hello"
//
給原始類型添加新屬性不會報錯
greet.smile = true;
// 單沒法獲取這個值(18章ECMAScript實現(xiàn)里我們講了為什么)
console.log(typeof greet.smile); // "undefined"

// 原始string
var greet = new String("Hello there");
// 使用split()方法分割
greet.split(' ')[0]; // "Hello"
//
給包裝函數(shù)類型添加新屬性不會報錯
greet.smile = true;
// 可以正常訪問新屬性
console.log(typeof greet.smile); // "boolean"

總結(jié)

本章主要講解了構(gòu)造函數(shù)模式的使用方法、調(diào)用方法以及new關(guān)鍵字的區(qū)別,希望大家在使用的時候有所注意。

參考:http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#constructorpatternjavascript

同步與推薦

本文已同步至目錄索引:深入理解JavaScript系列

深入理解JavaScript系列文章,包括了原創(chuàng),翻譯,轉(zhuǎn)載等各類型的文章,如果對你有用,請推薦支持一把,給大叔寫作的動力。

本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊舉報。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
javascript 對象的定義方法
以原型構(gòu)造新對象的兩種方式
js自執(zhí)行函數(shù)
JS中構(gòu)造函數(shù)的方法定義在原型對象里
JavaScript中的構(gòu)造函數(shù)和工廠函數(shù)說明
面向?qū)ο笤O(shè)計(一)——對象和類的理解
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服