JS設(shè)計模式之構(gòu)造函數(shù)模式1

關(guān)鍵詞:類鞋既,實例症革,原型

構(gòu)造函數(shù)定義:

構(gòu)造函數(shù)用于創(chuàng)建特定類型的對象——不僅聲明了使用的對象汉柒,構(gòu)造函數(shù)還可以接受參數(shù)以便第一次創(chuàng)建對象的時候設(shè)置對象的成員值强戴。你可以自定義自己的構(gòu)造函數(shù),然后在里面聲明自定義類型對象的屬性或方法残家。

如果你剛接觸構(gòu)造函數(shù)榆俺,上面的概念可以完全忽略了,因為你根本看不懂在講什么坞淮,直接跳過就好了茴晋。

先從工廠模式開始寫, 應該能更好理解構(gòu)造函數(shù)回窘。

工廠模式:

function create(name,age) {
    var obj={};
    obj.name=name;
    obj.age=age;
    obj.createJs=function () {
        console.log(this.name+'和'+this.age)
    }
    return obj;
}
var p1=create('js',19);
p1.createJs();

如果把它改寫成構(gòu)造函數(shù)诺擅,就應該是這樣的:

  function Create(name,age) {
    // var obj={};
    this.name=name;
    this.age=age;
    this.createJs=function () {
        console.log(this.name+'和'+this.age)
    }
    // return obj;
}
var p1=new Create('js',19);
p1.createJs();  

乍一看,差別很大啊啡直,是怎么改寫的呢烁涌?

搞明白構(gòu)造函數(shù)的特點,會更容易理解它們的區(qū)別酒觅。

1撮执、函數(shù)名大寫(不是規(guī)定,約定俗成的一種規(guī)范)舷丹;

2抒钱、執(zhí)行 new Create()之后,Create就有了一個新的名字:類(它依然是函數(shù)颜凯,也要形成一個私有作用域继效,形參賦值,預解釋装获,代碼從上到下執(zhí)行)

它的特點(與普通函數(shù)不同的地方)是:在代碼執(zhí)行之前瑞信,不用自己手動創(chuàng)建對象obj了,所以看不到 obj穴豫,瀏覽器會默認創(chuàng)建一個對象數(shù)據(jù)類型值(這個對象相當于構(gòu)造函數(shù)中的obj)凡简,也就是函數(shù)中的this。

3精肃、工廠模式里返回值是一個對象 p1秤涩,那么構(gòu)造函數(shù)里的返回值呢?

構(gòu)造函數(shù)里的代碼從上到下執(zhí)行司抱,默認地把創(chuàng)建的實例 p1 作為了返回值筐眷。并且以當前的實例(p1)為執(zhí)行的主體,把屬性名和屬性值賦給當前的實例 p1习柠。

如果再創(chuàng)造另一個實例 var p2=new CreateJs('js',19);那么 p1 和 p2 有什么關(guān)系匀谣,它們是獨立的照棋,沒有任何關(guān)系。p1==p2 //false;

上面的函數(shù)繼續(xù)改寫

function Create(name,age) {
    var name='xiaoming'; 
    this.name=name;
    this.age=age;
    this.createJs=function () {
        console.log(this.name+'和'+this.age)
    }
}
var p1=new Create('js',19);

上面只增加了一行代碼武翎,那么增加的一行代碼和實例有什么關(guān)系呢烈炭?答案是沒有任何關(guān)系,該如何理解呢宝恶?

先從概念上解析這句話符隙,構(gòu)造函數(shù)執(zhí)行后返回的是一個實例(對象),構(gòu)造函數(shù)把** 實例相關(guān)( this ) **的屬性和屬性值對實例進行賦值(別忘了 瀏覽器事先創(chuàng)建了一個obj垫毙,最后把這個obj返回出去變成了p1)霹疫, var name='xiaoming'和obj沒有任何關(guān)系,它是構(gòu)造函數(shù)內(nèi)部私有變量综芥。

繼續(xù)改寫代碼

function Create(name,age) {
    var name='xiaoming'; 
    this.name=name;
    this.age=age;
    this.createJs=function () {
        console.log(this.name+'和'+this.age)
    }
    return name;
   // return function (){ console.log(11)};
}
var p1=new Create('js',19);
console.log(p1); //Create { name: 'xiaoming', age: 19, createJs: [Function] }
//console.log(p1);//結(jié)果是手動返回的函數(shù)

構(gòu)造函數(shù)執(zhí)行后丽蝎,默認返回一個對象。如果手動添加一個基本類型返回值毫痕,它的返回值依然是瀏覽器添加的默認返回值征峦;如果手動添加的返回值是一個引用數(shù)據(jù)類型迟几,那么它默認的返回值就會被覆蓋掉消请;所以最好不要給構(gòu)造函數(shù)添加返回值。

既然有了工廠模式类腮,為什么還要設(shè)計構(gòu)造函數(shù)模式呢?

/*工廠模式*/
function create(name, age) {
    var obj={}
    obj.name=name;
    obj.age=age;
    obj.createJs=function () {
        console.log(this.name+'和'+this.age)
    }
    return obj;
}
var p1=create('js',18);
var p2=create('jss',19);
console.log(p1==p2)//false(完全不同的內(nèi)存地址)
/*構(gòu)造函數(shù)模式*/
function Create(name, age) {
    this.name=name;
    this.age=age;
    this.createJs=function () {
        console.log(this.name+'和'+this.age)
    }
}
var p11=new Create('js',18);
var p22=new Create('jss',19);
console.log(p11==p22)//false

他們相似的地方是臊泰,每一個實例對象,都有自己的屬性和方法的副本蚜枢,每個實例都會占用不同的內(nèi)存空間缸逃。但是,如果每個實例上的** 共同屬性(不變的屬性) **都寫在構(gòu)造函數(shù)(類)內(nèi)部厂抽,那么每創(chuàng)造一個實例需频,就會把所有相關(guān)的屬性(包括共同屬性)拷貝到對應實例的內(nèi)存空間下,這是極大的資源浪費筷凤。例如:

function Create(name, age) {
    this.name=name;
    this.age=age;
    this.chara=function(){ console.log('我們是公有屬性') };
    this.createJs=function () {
        console.log(this.name+'和'+this.age)
    }
}
var p11=new Create('js',18);
var p22=new Create('js',18);
console.log(p11.chara==p22.chara);//false

this.chara是每個實例共同擁有的方法昭殉,每次實例化就會拷貝到自對應實例的內(nèi)存空間下,造成了極大的浪費藐守,這是new方法的缺陷挪丢。

構(gòu)造函數(shù)為了解決這個問題,引入了原型prototype卢厂,prototype是一個對象乾蓬,是用來存儲實例的公有屬性和方法的。

Create.prototype.chara=function () {
    console.log('share')
}
console.log(p11.chara) //function
console.log(p11.chara==p22.chara);//true

實例一旦創(chuàng)建慎恒,將自動引用prototype對象的屬性和方法任内。也就是說撵渡,實例對象的屬性和方法,分成了兩種族奢,一種是本地的(私有的)姥闭,另一種是引用的(公有的)。

現(xiàn)在越走,chara屬性放在prototype對象里棚品,是兩個實例對象共享的。只要修改了prototype對象廊敌,就會同時影響到兩個實例對象铜跑。

檢測實例是否屬于類

console.log(p1 instanceof Create);  //true;
var arr=[];
console.log(arr instanceof Array); //true;
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市骡澈,隨后出現(xiàn)的幾起案子锅纺,更是在濱河造成了極大的恐慌,老刑警劉巖肋殴,帶你破解...
    沈念sama閱讀 218,122評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件囤锉,死亡現(xiàn)場離奇詭異,居然都是意外死亡护锤,警方通過查閱死者的電腦和手機官地,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,070評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來烙懦,“玉大人驱入,你說我怎么就攤上這事÷任觯” “怎么了亏较?”我有些...
    開封第一講書人閱讀 164,491評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長掩缓。 經(jīng)常有香客問我雪情,道長,這世上最難降的妖魔是什么你辣? 我笑而不...
    開封第一講書人閱讀 58,636評論 1 293
  • 正文 為了忘掉前任巡通,我火速辦了婚禮,結(jié)果婚禮上绢记,老公的妹妹穿的比我還像新娘扁达。我一直安慰自己,他們只是感情好蠢熄,可當我...
    茶點故事閱讀 67,676評論 6 392
  • 文/花漫 我一把揭開白布跪解。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪叉讥。 梳的紋絲不亂的頭發(fā)上窘行,一...
    開封第一講書人閱讀 51,541評論 1 305
  • 那天,我揣著相機與錄音图仓,去河邊找鬼罐盔。 笑死,一個胖子當著我的面吹牛救崔,可吹牛的內(nèi)容都是我干的惶看。 我是一名探鬼主播,決...
    沈念sama閱讀 40,292評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼六孵,長吁一口氣:“原來是場噩夢啊……” “哼纬黎!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起劫窒,我...
    開封第一講書人閱讀 39,211評論 0 276
  • 序言:老撾萬榮一對情侶失蹤本今,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后主巍,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體冠息,經(jīng)...
    沈念sama閱讀 45,655評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,846評論 3 336
  • 正文 我和宋清朗相戀三年孕索,在試婚紗的時候發(fā)現(xiàn)自己被綠了逛艰。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,965評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡檬果,死狀恐怖瓮孙,靈堂內(nèi)的尸體忽然破棺而出唐断,到底是詐尸還是另有隱情选脊,我是刑警寧澤,帶...
    沈念sama閱讀 35,684評論 5 347
  • 正文 年R本政府宣布脸甘,位于F島的核電站恳啥,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏丹诀。R本人自食惡果不足惜钝的,卻給世界環(huán)境...
    茶點故事閱讀 41,295評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望铆遭。 院中可真熱鬧硝桩,春花似錦、人聲如沸枚荣。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,894評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽橄妆。三九已至衙伶,卻和暖如春祈坠,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背矢劲。 一陣腳步聲響...
    開封第一講書人閱讀 33,012評論 1 269
  • 我被黑心中介騙來泰國打工赦拘, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人芬沉。 一個月前我還...
    沈念sama閱讀 48,126評論 3 370
  • 正文 我出身青樓躺同,卻偏偏與公主長得像,于是被迫代替她去往敵國和親丸逸。 傳聞我的和親對象是個殘疾皇子笋籽,可洞房花燭夜當晚...
    茶點故事閱讀 44,914評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品,去做同樣的事情椭员,實現(xiàn)同樣的效果;這時候需要使用工廠模式车海。簡單...
    舟漁行舟閱讀 7,761評論 2 17
  • 普通創(chuàng)建對象和字面量創(chuàng)建對象不足之處:雖然 Object 構(gòu)造函數(shù)或?qū)ο笞置媪慷伎梢杂脕韯?chuàng)建單個對象,但這些方式有...
    believedream閱讀 2,377評論 2 18
  • 上周四晚上晚自習輔導結(jié)束回家洗漱完畢后隘击,窩在床上看了一小會兒書侍芝,然后調(diào)好鬧鈴準備入睡時,電話忽然間響了起來埋同。心里琢...
    老草閱讀 309評論 0 0
  • 《躍遷》第二章下半部分的主要論點如上州叠,不贅述。對于我們小時候一直聽到的那句“寧做雞頭凶赁,不做鳳尾”的老話也是感觸頗深...
    helenxxf閱讀 214評論 0 1