javascript設(shè)計(jì)模式Constructor(構(gòu)造器)模式
Constructor是一種在內(nèi)存已分配給該對(duì)象的情況下,用于初始化新創(chuàng)建對(duì)象的特殊方法。Object構(gòu)造器用于創(chuàng)建特定類型的對(duì)象–準(zhǔn)備好對(duì)象以備使用,同事接收構(gòu)造器可以使用參數(shù),以在第一次創(chuàng)建對(duì)象時(shí),設(shè)置成員屬性和方法值。
對(duì)象創(chuàng)建
創(chuàng)新新對(duì)象,在javascript中通常有兩種方法:
1.對(duì)象直面量方法
var newObj = {};
2.構(gòu)造器的簡(jiǎn)潔方法
var newObj = new Object();
在Object構(gòu)造器為特定的值創(chuàng)建對(duì)象封裝,或者沒(méi)有傳遞值時(shí),它將創(chuàng)建一個(gè)肯那個(gè)對(duì)象并返回
對(duì)象賦值的方法:
1.“點(diǎn)”方法
//設(shè)置屬性 newObj.name = 'LanFeng'; //獲取值 var user= newObj.name;
1.中括號(hào)方法
//設(shè)置屬性 newObj["name"]= 'LanFeng'; //獲取值 var user= newObj["name"];
1.Object.defineProperty (適用ECMAScript5)
//設(shè)置屬性
Object.defineProperty(newObj,"name",{
value:"LanFeng",
writable:true,
enumerable:true,
configurable:true
})
1.Object.defineProperties
//設(shè)置屬性
Object.defineProperties(newObj,{
"someKey":{
value:"Hello Js",
writable:true
},
"anotherKey":{
value:"Foo bar",
writable:false
}
})
Javascript不支持類的概念,但它確實(shí)支持與對(duì)象一起用的特殊constructor函數(shù),通過(guò)在構(gòu)造器前面加new關(guān)鍵字,告訴js像使用構(gòu)造器一樣實(shí)例化一個(gè)新對(duì)象,并且對(duì)象成員由該函數(shù)定義。
在構(gòu)造器內(nèi),關(guān)鍵字this引用新創(chuàng)建的對(duì)象?;仡檶?duì)象創(chuàng)建,基本的構(gòu)造器:
function Car(model,year,miles){
this.model = model;
this.year = year;
this.miles = miles;
this.toString = function(){
return this.model + "has done" + this.miles +"miles";
}
}
//創(chuàng)建實(shí)例化對(duì)象
var civio = new Car("Honda Civio",2009,20000);
var mondeo= new Car("Ford Mondeo",2009,5000);
上面例子是一個(gè)簡(jiǎn)單的構(gòu)造器模式版本,但它確實(shí)存在一些問(wèn)題,其中一個(gè)問(wèn)題是,它使用繼承變得困難,另外一個(gè)問(wèn)題是,toString()這樣的函數(shù)是為每個(gè)使用Car構(gòu)造器創(chuàng)建的新對(duì)象而分別重新定義的,這個(gè)不是最理想的,因?yàn)檫@種函數(shù)應(yīng)該在所有的Car類型實(shí)例直接共享。
javascript中有有一個(gè)prototype的屬性,調(diào)用js構(gòu)造器創(chuàng)建一個(gè)對(duì)象后,新對(duì)象就會(huì)具有構(gòu)造器原型的所有屬性,通過(guò)這種方式,可以創(chuàng)建多個(gè)對(duì)象,并訪問(wèn)相同的原型,實(shí)現(xiàn)方法共享。
function Car(model,year,miles){
this.model = model;
this.year = year;
this.miles = miles;
}
//原型函數(shù)
Car.prototype.toString = function(){
return this.model + "has done" + this.miles +"miles";
}
//創(chuàng)建實(shí)例化對(duì)象
var civio = new Car("Honda Civio",2009,20000);
var mondeo= new Car("Ford Mondeo",2009,5000);
console.log(civio.toString())
console.log(mondeo.toString())
現(xiàn)在toString()的單一實(shí)例就能夠在所有Car對(duì)著之間共享。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 一文徹底理解js原生語(yǔ)法prototype,__proto__和constructor
- js構(gòu)造函數(shù)constructor和原型prototype原理與用法實(shí)例分析
- 幫你徹底搞懂JS中的prototype、__proto__與constructor(圖解)
- js核心基礎(chǔ)之構(gòu)造函數(shù)constructor用法實(shí)例分析
- 淺談javascript中的constructor
- npm出現(xiàn)Cannot?find?module?'XXX\node_modules\npm\bin\npm-cli.js'錯(cuò)誤的解決方法
- CommonJS與ES6?Module的使用區(qū)別分析
- JavaScript ES6 Module模塊詳解
- 全面解析JavaScript Module模式
- 利用webpack理解CommonJS和ES Modules的差異區(qū)別
- Javascript? Constructor構(gòu)造器模式與Module模塊模式
相關(guān)文章
javascript中undefined與null的區(qū)別
在JavaScript中存在這樣兩種原始類型:Null與Undefined。這兩種類型常常會(huì)使JavaScript的開發(fā)人員產(chǎn)生疑惑,在什么時(shí)候是Null,什么時(shí)候又是Undefined?2015-08-08
javascript基于DOM實(shí)現(xiàn)省市級(jí)聯(lián)下拉框的方法
這篇文章主要介紹了javascript基于DOM實(shí)現(xiàn)省市級(jí)聯(lián)下拉框的方法,可實(shí)現(xiàn)選擇省份后出現(xiàn)對(duì)應(yīng)城市下拉框選項(xiàng)的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
js對(duì)象合并與數(shù)組合并綜合應(yīng)用舉例
這篇文章主要給大家介紹了關(guān)于js對(duì)象合并與數(shù)組合并綜合應(yīng)用舉例的相關(guān)資料,本文將介紹常見的JS對(duì)象合并和數(shù)組合并方法,幫助讀者更好地理解和運(yùn)用這些方法,需要的朋友可以參考下2023-11-11
Ant Design Pro 下實(shí)現(xiàn)文件下載的實(shí)現(xiàn)代碼
這篇文章主要介紹了Ant Design Pro 下實(shí)現(xiàn)文件下載的實(shí)現(xiàn)代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
JavaScript解析及序列化JSON的方法實(shí)例分析
這篇文章主要介紹了JavaScript解析及序列化JSON的方法,結(jié)合實(shí)例形式分析javascript針對(duì)json格式數(shù)據(jù)的解析、序列化等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
超酷的網(wǎng)頁(yè)音樂(lè)播放器DewPlayer使用方法
在網(wǎng)上閑逛的時(shí)候無(wú)意中看到 Dewplayer 播放器,感覺(jué)不錯(cuò),特此分享。2010-12-12
JavaScript位移運(yùn)算符(無(wú)符號(hào)) >>> 三個(gè)大于號(hào) 的使用方法詳解
這篇文章主要介紹了JavaScript位移運(yùn)算符(無(wú)符號(hào)) >>> 三個(gè)大于號(hào) 的使用方法詳解的相關(guān)資料,需要的朋友可以參考下2016-03-03

