JavaScript 封裝和繼承

一、生成實(shí)例對(duì)象的原始模式

var Cat = {
   name : '',
   color : ''
  } 
var cat1 = {}; // 創(chuàng)建一個(gè)空對(duì)象
cat1.name = "大毛"; // 按照原型對(duì)象的屬性賦值
cat1.color = "黃色";

二、工廠模式

function creatObject(name, age, job) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function () {
        alert (this.name);
    }
  return o;
}

三噪珊、構(gòu)造函數(shù)模式

  1. 所謂"構(gòu)造函數(shù)",其實(shí)就是一個(gè)普通函數(shù)临燃,但是內(nèi)部使用了this變量。對(duì)構(gòu)造函數(shù)使用new運(yùn)算符,就能生成實(shí)例,并且this變量會(huì)綁定在實(shí)例對(duì)象上出革。
  function Cat(name,color){
    this.name=name;
    this.color=color;
  }
 var cat1 = new Cat("大毛","黃色");
 var cat2 = new Cat("二毛","黑色");
 alert(cat1.name); // 大毛
 alert(cat1.color); // 黃色

要?jiǎng)?chuàng)建Cat的新實(shí)例,必須使用new操作符渡讼,系統(tǒng)內(nèi)部創(chuàng)建過(guò)程如下:

  • 創(chuàng)建一個(gè)新對(duì)象
  • 將構(gòu)造函數(shù)的作用域賦給新對(duì)象(因此this就指向了這個(gè)新對(duì)象)
  • 執(zhí)行構(gòu)造函數(shù)中的代碼(為這個(gè)新對(duì)象添加屬性和方法)
  • 返回新對(duì)象

構(gòu)造函數(shù)和普通函數(shù)的唯一區(qū)別在于調(diào)用方式不同,構(gòu)造函數(shù)也是普通函數(shù)耳璧,任何通過(guò)new調(diào)用的函數(shù)都可以是構(gòu)造函數(shù)成箫。通常在項(xiàng)目中為了區(qū)分,我們都將構(gòu)造函數(shù)的第一個(gè)字母大寫 以區(qū)別于普通函數(shù)

2.構(gòu)造函數(shù)的問(wèn)題
使用構(gòu)造函數(shù)的時(shí)候旨枯,每個(gè)方法都要在每個(gè)實(shí)例上重新創(chuàng)建一遍蹬昌,然而創(chuàng)建兩個(gè)完全同樣任務(wù)的Function實(shí)例是沒(méi)有必要的,造成內(nèi)存的浪費(fèi)

四攀隔、原型模式( Prototype模式)

Javascript規(guī)定皂贩,每一個(gè)函數(shù)都有一個(gè)prototype(原型)屬性,它是一個(gè)指針昆汹,指向另一個(gè)對(duì)象明刷。這個(gè)對(duì)象的所有屬性和方法,都會(huì)被構(gòu)造函數(shù)的實(shí)例繼承和共享满粗。

  function Cat(name,color){
    this.name = name;
    this.color = color;
  }
  Cat.prototype.type = "貓科動(dòng)物";
  Cat.prototype.eat = function(){alert("吃老鼠")};

  // 實(shí)例
  var cat1 = new Cat("大毛","黃色");
  var cat2 = new Cat("二毛","黑色");
  alert(cat1.type); // 貓科動(dòng)物
  cat1.eat(); // 吃老鼠

   //驗(yàn)證是同一塊內(nèi)存
  alert(cat1.eat == cat2.eat); //true

這時(shí)所有實(shí)例的type屬性和eat()方法辈末,其實(shí)都是同一個(gè)內(nèi)存地址,指向prototype對(duì)象映皆,因此就提高了運(yùn)行效率挤聘。

  1. 理解原型對(duì)象
    只要?jiǎng)?chuàng)建了一個(gè)新函數(shù),就會(huì)根據(jù)一組特定的規(guī)則為該函數(shù)創(chuàng)建一個(gè)prototype屬性捅彻,這個(gè)屬性指向函數(shù)的原型對(duì)象组去,而每個(gè)遠(yuǎn)行對(duì)象都會(huì)自動(dòng)獲得一個(gè)constructor(構(gòu)造函數(shù))屬性,這個(gè)屬性包含一個(gè)指向prototype屬性所在函數(shù)的指針步淹。 原型是動(dòng)態(tài)的从隆,隨時(shí)修改 隨時(shí)生效

不論是對(duì)象的還是構(gòu)造函數(shù)本身的prototype指向的是本身引用類型的父引用類型的對(duì)象實(shí)例
constructor指向自身prototype原型對(duì)象的構(gòu)造函數(shù)

  1. 原型對(duì)象的問(wèn)題
    首先诚撵,他省略了為構(gòu)造函數(shù)傳遞初始化參數(shù)這一環(huán)節(jié),結(jié)果所有實(shí)例在默認(rèn)情況下都將取得相同的屬性值广料。
    重要的是砾脑,由于原型對(duì)象是共享的,原型中的屬性是被很多實(shí)例共享的艾杏,通過(guò)某個(gè)實(shí)例修改原型中的屬性韧衣,其他的實(shí)例的屬性值也會(huì)被修改。

五购桑、組合使用構(gòu)造函數(shù)和原型模式

就是屬性在本身的構(gòu)造函數(shù)中實(shí)現(xiàn)畅铭,而方法在prototype原型中實(shí)現(xiàn)。

六勃蜘、動(dòng)態(tài)原型模式

七硕噩、寄生構(gòu)造函數(shù)模式

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市缭贡,隨后出現(xiàn)的幾起案子炉擅,更是在濱河造成了極大的恐慌,老刑警劉巖阳惹,帶你破解...
    沈念sama閱讀 211,265評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件谍失,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡莹汤,警方通過(guò)查閱死者的電腦和手機(jī)快鱼,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)纲岭,“玉大人抹竹,你說(shuō)我怎么就攤上這事≈钩保” “怎么了窃判?”我有些...
    開(kāi)封第一講書(shū)人閱讀 156,852評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)喇闸。 經(jīng)常有香客問(wèn)我兢孝,道長(zhǎng),這世上最難降的妖魔是什么仅偎? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,408評(píng)論 1 283
  • 正文 為了忘掉前任跨蟹,我火速辦了婚禮,結(jié)果婚禮上橘沥,老公的妹妹穿的比我還像新娘窗轩。我一直安慰自己,他們只是感情好座咆,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,445評(píng)論 5 384
  • 文/花漫 我一把揭開(kāi)白布痢艺。 她就那樣靜靜地躺著仓洼,像睡著了一般。 火紅的嫁衣襯著肌膚如雪堤舒。 梳的紋絲不亂的頭發(fā)上色建,一...
    開(kāi)封第一講書(shū)人閱讀 49,772評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音舌缤,去河邊找鬼箕戳。 笑死,一個(gè)胖子當(dāng)著我的面吹牛国撵,可吹牛的內(nèi)容都是我干的陵吸。 我是一名探鬼主播,決...
    沈念sama閱讀 38,921評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼介牙,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼壮虫!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起环础,我...
    開(kāi)封第一講書(shū)人閱讀 37,688評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤囚似,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后线得,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體谆构,經(jīng)...
    沈念sama閱讀 44,130評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,467評(píng)論 2 325
  • 正文 我和宋清朗相戀三年框都,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片呵晨。...
    茶點(diǎn)故事閱讀 38,617評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡魏保,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出摸屠,到底是詐尸還是另有隱情谓罗,我是刑警寧澤,帶...
    沈念sama閱讀 34,276評(píng)論 4 329
  • 正文 年R本政府宣布季二,位于F島的核電站檩咱,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏胯舷。R本人自食惡果不足惜刻蚯,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,882評(píng)論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望桑嘶。 院中可真熱鬧炊汹,春花似錦、人聲如沸逃顶。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,740評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至霸褒,卻和暖如春伴找,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背废菱。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,967評(píng)論 1 265
  • 我被黑心中介騙來(lái)泰國(guó)打工技矮, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人昙啄。 一個(gè)月前我還...
    沈念sama閱讀 46,315評(píng)論 2 360
  • 正文 我出身青樓穆役,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親梳凛。 傳聞我的和親對(duì)象是個(gè)殘疾皇子耿币,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,486評(píng)論 2 348

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