js面向?qū)ο笾R?jiàn)創(chuàng)建對(duì)象的幾種方式(工廠模式、構(gòu)造函數(shù)模式、原型模式)
在上篇文章給大家介紹了javascript面向?qū)ο蠡A(chǔ),本篇文章繼續(xù)深入學(xué)習(xí)javascript面向?qū)ο?,JS的語(yǔ)法非常靈活,簡(jiǎn)單的對(duì)象創(chuàng)建就有好幾種不同的方法。這些過(guò)于靈活的地方有時(shí)候確實(shí)很讓人迷惑,那么今天我們就來(lái)梳理一下JS中常用的創(chuàng)建對(duì)象的幾種方法吧。
前言
雖然使用 Object構(gòu)造函數(shù) 或者使用 對(duì)象字面量 可以很方便的用來(lái)創(chuàng)建一個(gè)對(duì)象,但這種方式有一個(gè)明顯的缺點(diǎn):使用一個(gè)接口創(chuàng)建多個(gè)對(duì)象會(huì)產(chǎn)生很多冗余的代碼。因此為了解決這個(gè)問(wèn)題,人們開(kāi)始使用以下幾種方式來(lái)常見(jiàn)對(duì)象。
工廠模式
該模式抽象了創(chuàng)建對(duì)象的具體過(guò)程,用函數(shù)來(lái)以特定接口創(chuàng)建對(duì)象的細(xì)節(jié)
function cPerson(name,sex,age){
var o = new Object();
o.name = name;
o.sex = sex;
o.age = age;
o.show = function(){
console.log(this.name,this.age,this.sex);
}
return o;
}
var p1 = cPerson('謙龍','男','100');
p1.show();
var p2 = cPerson('雛田','女','14');
p2.show();
工廠模式測(cè)試
工廠方式的問(wèn)題:使用工廠模式能夠創(chuàng)建一個(gè)包含所有信息的對(duì)象,可以無(wú)數(shù)次的調(diào)用的這個(gè)函數(shù)。雖然其解決了創(chuàng)建多個(gè)相似對(duì)象的問(wèn)題,但卻沒(méi)有解決對(duì)象識(shí)別的問(wèn)題(即如何得知一個(gè)對(duì)象的類型)
構(gòu)造函數(shù)模式
function CPerson(name,sex,age) {//注意這里 構(gòu)造函數(shù)首字母大寫
this.name = name;
this.sex = sex;
this.age = age;
this.show = function () {
console.log(this.name, this.age, this.sex);
}
}
var p1 = new CPerson('謙龍','男','100');
p1.show();
var p2 = new CPerson('雛田','女','14');
p2.show();
構(gòu)造函數(shù)模式測(cè)試
注意構(gòu)造函數(shù)與工廠模式有些不同的地方,如下
構(gòu)造函數(shù)首字母大寫
沒(méi)有顯式地創(chuàng)建對(duì)象
將屬性和方法賦值給了 this 對(duì)象
沒(méi)有return語(yǔ)句
而且以這種方式來(lái)調(diào)用構(gòu)造函數(shù)會(huì)大致經(jīng)歷一下 幾個(gè)步驟
創(chuàng)建一個(gè)新的對(duì)象
將構(gòu)造函數(shù)的作用域賦值給這個(gè)對(duì)象(因此this就指向了這個(gè)對(duì)象)
執(zhí)行構(gòu)造函數(shù)中的代碼(即給新對(duì)象添加屬性和方法的過(guò)程)
返回對(duì)象
注意:構(gòu)造函數(shù)其實(shí)和普通的函數(shù)沒(méi)有太大的差別,唯一的不同在于調(diào)用方式的不同。以下演示不同的幾種調(diào)用方式
// 調(diào)用方式1 new 方式
var p1 = new CPerson('謙龍','男','100');
p1.show();//謙龍 100 男
// 調(diào)用方式2 普通函數(shù)調(diào)用
CPerson('謙龍','男','100');
window.show()//謙龍 100 男 注意屬性和方法會(huì)被設(shè)置到window對(duì)象上
// 調(diào)用方式3 在另一個(gè)對(duì)象的作用域中調(diào)用
var obj = new Object();
CPerson.call(obj,'謙龍','男','100');
obj.show(); //謙龍 100 男 在obj的作用域
構(gòu)造函數(shù)的問(wèn)題:使用構(gòu)造函數(shù)最主要的問(wèn)題就是每個(gè)方法都要在每個(gè)實(shí)例上重新創(chuàng)建一次,p1與p2的都有show方法,但不是同一個(gè)Function的實(shí)例,因?yàn)閒unction在js中也是一個(gè)對(duì)象。因此他們共有的show方法并不相等。
原型模式
每個(gè)函數(shù)都有一個(gè)prototype屬性,這個(gè)屬性是一個(gè)指針,指向一個(gè)對(duì)象。而這個(gè)對(duì)象的用途是 包含可以由 特定類型 的所有 實(shí)例 共享的屬性和方法。即調(diào)用構(gòu)造函數(shù)所創(chuàng)建的那個(gè)對(duì)象的 原型對(duì)象
好處是可以讓所有對(duì)象的實(shí)例共享他的屬性的方法。即無(wú)需在構(gòu)造函數(shù)中定義實(shí)例的信息
function CPerson(){
}
CPerson.prototype.name='謙龍';
CPerson.prototype.sex='男';
CPerson.prototype.age=100;
CPerson.prototype.show=function(){
console.log(this.name, this.age, this.sex);
}
var p1 = new CPerson();
p1.show(); //謙龍 100 男
var p2 = new CPerson();
p2.show();//謙龍 100 男
console.log(p1.show == p2.show)//true
以上內(nèi)容是關(guān)于js面向?qū)ο笾R?jiàn)創(chuàng)建對(duì)象的幾種方式(工廠模式、構(gòu)造函數(shù)模式、原型模式),希望大家喜歡。
- JS中創(chuàng)建自定義類型的常用模式總結(jié)【工廠模式,構(gòu)造函數(shù)模式,原型模式,動(dòng)態(tài)原型模式等】
- JavaScript創(chuàng)建對(duì)象方式總結(jié)【工廠模式、構(gòu)造函數(shù)模式、原型模式等】
- 詳解js產(chǎn)生對(duì)象的3種基本方式(工廠模式,構(gòu)造函數(shù)模式,原型模式)
- JS面向?qū)ο蠡A(chǔ)講解(工廠模式、構(gòu)造函數(shù)模式、原型模式、混合模式、動(dòng)態(tài)原型模式)
- JS創(chuàng)建對(duì)象常用設(shè)計(jì)模式工廠構(gòu)造函數(shù)及原型
相關(guān)文章
jquery 實(shí)現(xiàn)輸入郵箱時(shí)自動(dòng)補(bǔ)全下拉提示功能
大家在做Web項(xiàng)目,都會(huì)有注冊(cè)登錄模塊,如果是郵箱注冊(cè),想要在輸入@后觸發(fā)下拉框顯示各個(gè)郵箱的功能。下面介紹一款jQuery實(shí)現(xiàn)輸入郵箱的時(shí)候,可自動(dòng)補(bǔ)全郵箱地址,也可稱為是“輸入提示”的功能,比如輸入aaa時(shí),自動(dòng)變成aaa@163.com,有效提升網(wǎng)頁(yè)的人性化體驗(yàn)2015-10-10
JS實(shí)現(xiàn)為表格動(dòng)態(tài)添加標(biāo)題的方法
這篇文章主要介紹了JS實(shí)現(xiàn)為表格動(dòng)態(tài)添加標(biāo)題的方法,涉及javascript中createCaption方法添加標(biāo)題的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
js或jquery動(dòng)態(tài)輸出select option的實(shí)現(xiàn)代碼
Bootstrap實(shí)現(xiàn)導(dǎo)航欄的2種方式
基于javascript實(shí)現(xiàn)日歷功能原理及代碼實(shí)例

