“類”的設計模式

類的設計模式:實例化欺殿、繼承和(相對)多態(tài)拔莱。

JavaScript通過原型鏈,在兩個對象之間創(chuàng)建一個關聯(lián)匿又。這樣方灾,一個對象就可以通過委托訪問另一個對象的屬性和函數(shù),從而達到“繼承”的實現(xiàn)碌更。

下面來看一個例子:


function Foo(name) {

  this.name = name;

}

Foo.prototype.myName = function () {

  return this.name;

};

function Bar(name, label) {

  Foo.call(this, name);

  this.label = label;

}

Bar.prototype = new Foo(); //實現(xiàn)prototype的關聯(lián)

Bar.prototype.myLabel = function () {

  return this.label;

};

var a = new Bar("a", "obj a");

a.myName(); // "a"

a.myLabel(); // "obj a"

構造函數(shù)和實例原型的關系圖(紅色的就是原型鏈)

image

原型prototype

每個函數(shù)都有一個prototype屬性裕偿,函數(shù)的prototype屬性指向了一個對象,這個對象正是調用該構造函數(shù)而創(chuàng)建的實例的原型痛单。例子中Bar.prototype就是實例a的原型嘿棘。

proto

這是每一個JavaScript對象(除了 null )都具有的一個屬性,叫proto旭绒,這個屬性會指向該對象的原型鸟妙。


a.__proto__ === Bar.prototype //true

Bar.prototype.__proto__ === Foo.prototype //true

constructor

constructor,每個原型都有一個 constructor 屬性指向關聯(lián)的構造函數(shù)挥吵。


Foo === Foo.prototype.constructor

為了方便理解圆仔,這里我們簡單模擬實現(xiàn)new


function objectFactory() {

  var obj = new Object(),Constructor = [].shift.call(arguments);

  obj.__proto__ = Constructor.prototype;

  var ret = Constructor.apply(obj, arguments);

  return typeof ret === 'object' ? ret : obj;

};

下面介紹,另外兩種寫法:

Object.create(行為委托設計模式)


var Foo = {

  init: function(name){

    this.name = name;

  },

  myName: function(){

    return this.name;

  }

};

var Bar = Object.create(Foo);

Bar.setup = function(name, label){

  // 委托調用

  this.init(name);

  this.label = label;

};

Bar.myLabel = function(){

  return this.label;

};

var a = Object.create( Bar );

a.setup("a", "obj a");

a.myName(); // "a"

a.myLabel(); // "obj a"

簡單模擬實現(xiàn)Object.create


Object.create = function (o) {

  var F = function () {};

  F.prototype = o;

  return new F();

};

class(class 語法可以簡潔地定義類方法)


class Foo {

  constructor(name) {

    this.name = name;

  }

  myName() {

    return this.name;

  }

}

class Bar extends Foo {

  constructor(props, label) {

    super(props);

    this.label = label;

  }

  myLabel() {

    return this.label;

  }

}

var a = new Bar("a", "obj a");

a.myName(); // "a"

a.myLabel(); // "obj a"

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末蔫劣,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子个从,更是在濱河造成了極大的恐慌脉幢,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,997評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件嗦锐,死亡現(xiàn)場離奇詭異嫌松,居然都是意外死亡,警方通過查閱死者的電腦和手機奕污,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,603評論 3 392
  • 文/潘曉璐 我一進店門萎羔,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人碳默,你說我怎么就攤上這事贾陷。” “怎么了嘱根?”我有些...
    開封第一講書人閱讀 163,359評論 0 353
  • 文/不壞的土叔 我叫張陵髓废,是天一觀的道長。 經常有香客問我该抒,道長慌洪,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,309評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮冈爹,結果婚禮上涌攻,老公的妹妹穿的比我還像新娘。我一直安慰自己频伤,他們只是感情好恳谎,可當我...
    茶點故事閱讀 67,346評論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著剂买,像睡著了一般惠爽。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上瞬哼,一...
    開封第一講書人閱讀 51,258評論 1 300
  • 那天婚肆,我揣著相機與錄音,去河邊找鬼坐慰。 笑死较性,一個胖子當著我的面吹牛,可吹牛的內容都是我干的结胀。 我是一名探鬼主播赞咙,決...
    沈念sama閱讀 40,122評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼糟港!你這毒婦竟也來了攀操?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 38,970評論 0 275
  • 序言:老撾萬榮一對情侶失蹤秸抚,失蹤者是張志新(化名)和其女友劉穎速和,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體剥汤,經...
    沈念sama閱讀 45,403評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡颠放,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,596評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了吭敢。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片碰凶。...
    茶點故事閱讀 39,769評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖鹿驼,靈堂內的尸體忽然破棺而出欲低,到底是詐尸還是另有隱情,我是刑警寧澤蠢沿,帶...
    沈念sama閱讀 35,464評論 5 344
  • 正文 年R本政府宣布伸头,位于F島的核電站,受9級特大地震影響舷蟀,放射性物質發(fā)生泄漏恤磷。R本人自食惡果不足惜面哼,卻給世界環(huán)境...
    茶點故事閱讀 41,075評論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望扫步。 院中可真熱鬧魔策,春花似錦、人聲如沸河胎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,705評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽游岳。三九已至政敢,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間胚迫,已是汗流浹背喷户。 一陣腳步聲響...
    開封第一講書人閱讀 32,848評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留访锻,地道東北人褪尝。 一個月前我還...
    沈念sama閱讀 47,831評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像期犬,于是被迫代替她去往敵國和親河哑。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,678評論 2 354

推薦閱讀更多精彩內容

  • ??面向對象(Object-Oriented,OO)的語言有一個標志鲤妥,那就是它們都有類的概念睬罗,而通過類可以創(chuàng)建任意...
    霜天曉閱讀 2,107評論 0 6
  • 第3章 基本概念 3.1 語法 3.2 關鍵字和保留字 3.3 變量 3.4 數(shù)據(jù)類型 5種簡單數(shù)據(jù)類型:Unde...
    RickCole閱讀 5,124評論 0 21
  • 時光飛渡 仿佛在加快分別的腳步 我還沒有享受夠 那種曼妙的幸福 卻被無情的現(xiàn)實打住 我曾在大街小巷 不停地尋覓 尋...
    燕zi閱讀 390評論 3 12
  • MySQL-5.7.16-winx64.zip安裝教程 1.下載mysql-5.7.16-winx64.zip解壓...
    Q羅閱讀 397評論 0 0