JS類與繼承

一些概念

prototype是構(gòu)造函數(shù)的指針泣懊,指向原型對象。講述的是構(gòu)造函數(shù)和原型對象之間的關(guān)系。
__proto__是實(shí)例對象的指針哟楷,也指向原型對象,講述的是實(shí)例對象和原型對象之間的關(guān)系否灾。
因為原型對象也是對象卖擅,所以原型對象也有__proto__,指向的是這個原型對象的原型對象墨技,JS實(shí)現(xiàn)繼承的方式就是根據(jù)__proto__指針惩阶,在一個對象上查找一個property,會依次在自身對象、原型對象扣汪、原型對象的原型對象(就是原型鏈)断楷。
所以在js中實(shí)現(xiàn)繼承的關(guān)鍵就是使得一個原型對象的__proto__指針指向某一個(原型)對象。

最后在說一下constructor指針崭别。
constructor是原型對象的的指針冬筒,指向構(gòu)造函數(shù)。講述的是原型對象和構(gòu)造函數(shù)之間的關(guān)系茅主。所以和prototype是互逆的一對指針舞痰。

《《JavaScript高級程序設(shè)計》》第三版講解原型和繼承對于有些基礎(chǔ)的人有些拖沓。其中第六章第三節(jié)講解繼承的時候也告訴了在JavaScript實(shí)現(xiàn)繼承的業(yè)界默認(rèn)方式就是借用構(gòu)造函數(shù)和原型繼承诀姚。

其背后的思路就是使用原型鏈實(shí)現(xiàn)對原型屬性和方法的繼承响牛,通過借用構(gòu)造函數(shù)來實(shí)現(xiàn)對實(shí)例屬性的繼承。

上面這句話總結(jié)的很好很全面了赫段。

所以繼承包括兩個方面娃善,實(shí)例屬性和原型屬性的繼承。

繼承實(shí)例屬性最常用的一種方法是上面說到的借用構(gòu)造函數(shù)瑞佩。

function ParentClass() { // 父類構(gòu)造函數(shù)
}

function ChildrenClass(xx,yy,zz) { // 子類構(gòu)造函數(shù)
  ParentClass.call(this,xx,yy);
  this.zz = zz;
}

繼承原型屬性的方法就有很多種了聚磺。

Object.create

function inherit(C,P) {
  C.prototype = Object.create(P.prototype)
}

inherit(ChildrenClass,ParentClass)

最早老道提出來這種方法叫原型式繼承。實(shí)現(xiàn)了一個create方法炬丸,只不過ES5在語法層面實(shí)現(xiàn)了create方法瘫寝,形成了上面的方法蜒蕾。

function create(o) {
  var F = new Function();
  F.prototype = o;
  return new F();
}

function inherit(C,P) {
  C.prototype = create(P.prototype)
}

inherit(ChildrenClass,ParentClass)

原型式繼承之二

function inherit(C,P) {
    var F = new Function();  // 臨時構(gòu)造函數(shù)
    F.prototype = P.prototype;
    C.super = P; // 使得子類能夠獲得對父類的引用
    C.prototype = new F(); // 使得子類的原型對象__proto__指向父類的原型對象,從而實(shí)現(xiàn)繼承原型方法
    C.prototype.constructor = C; // 使得子類的constructor指針重新指向子類的構(gòu)造函數(shù)
}

inherit(ChildrenClass,ParentClass)

setPrototypeOf

const inherit = function(ctor, superCtor) {

  if (ctor === undefined || ctor === null)
    throw new errors.TypeError('ERR_INVALID_ARG_TYPE', 'ctor', 'function');

  if (superCtor === undefined || superCtor === null)
    throw new errors.TypeError('ERR_INVALID_ARG_TYPE', 'superCtor', 'function');

  if (superCtor.prototype === undefined) {
    throw new errors.TypeError('ERR_INVALID_ARG_TYPE', 'superCtor.prototype',
                               'function');
  }
  ctor.super_ = superCtor;
  Object.setPrototypeOf(ctor.prototype, superCtor.prototype);
};

上面一段代碼來自node的util模塊的inherits方法焕阿。使用了ES6的Object.setPrototypeOf.
其實(shí)都ES6了咪啡,為什么不直接使用ES6的extends關(guān)鍵字。

ES6

ES6的到來暮屡,為JS實(shí)現(xiàn)了語言層面的class撤摸。其實(shí)也只是上面內(nèi)容的一個語法糖。即使在各種環(huán)境都支持ES6和class的情況下褒纲,熟悉和了解JS中繼承是如何實(shí)現(xiàn)的也是很有必要的准夷。
詳細(xì)的ES6 class講解可以參考 阮一峰的ES6教程;

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市莺掠,隨后出現(xiàn)的幾起案子衫嵌,更是在濱河造成了極大的恐慌,老刑警劉巖彻秆,帶你破解...
    沈念sama閱讀 221,548評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件楔绞,死亡現(xiàn)場離奇詭異,居然都是意外死亡唇兑,警方通過查閱死者的電腦和手機(jī)酒朵,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,497評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來扎附,“玉大人耻讽,你說我怎么就攤上這事∨撩蓿” “怎么了针肥?”我有些...
    開封第一講書人閱讀 167,990評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長香伴。 經(jīng)常有香客問我慰枕,道長,這世上最難降的妖魔是什么即纲? 我笑而不...
    開封第一講書人閱讀 59,618評論 1 296
  • 正文 為了忘掉前任具帮,我火速辦了婚禮,結(jié)果婚禮上低斋,老公的妹妹穿的比我還像新娘蜂厅。我一直安慰自己,他們只是感情好膊畴,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,618評論 6 397
  • 文/花漫 我一把揭開白布掘猿。 她就那樣靜靜地躺著,像睡著了一般唇跨。 火紅的嫁衣襯著肌膚如雪稠通。 梳的紋絲不亂的頭發(fā)上衬衬,一...
    開封第一講書人閱讀 52,246評論 1 308
  • 那天,我揣著相機(jī)與錄音改橘,去河邊找鬼滋尉。 笑死,一個胖子當(dāng)著我的面吹牛飞主,可吹牛的內(nèi)容都是我干的狮惜。 我是一名探鬼主播,決...
    沈念sama閱讀 40,819評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼碌识,長吁一口氣:“原來是場噩夢啊……” “哼碾篡!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起丸冕,我...
    開封第一講書人閱讀 39,725評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎薛窥,沒想到半個月后胖烛,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,268評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡诅迷,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,356評論 3 340
  • 正文 我和宋清朗相戀三年佩番,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片罢杉。...
    茶點(diǎn)故事閱讀 40,488評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡趟畏,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出滩租,到底是詐尸還是另有隱情赋秀,我是刑警寧澤,帶...
    沈念sama閱讀 36,181評論 5 350
  • 正文 年R本政府宣布律想,位于F島的核電站猎莲,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏技即。R本人自食惡果不足惜著洼,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,862評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望而叼。 院中可真熱鬧身笤,春花似錦、人聲如沸葵陵。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,331評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽脱篙。三九已至莹弊,卻和暖如春涤久,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背忍弛。 一陣腳步聲響...
    開封第一講書人閱讀 33,445評論 1 272
  • 我被黑心中介騙來泰國打工响迂, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人细疚。 一個月前我還...
    沈念sama閱讀 48,897評論 3 376
  • 正文 我出身青樓蔗彤,卻偏偏與公主長得像,于是被迫代替她去往敵國和親疯兼。 傳聞我的和親對象是個殘疾皇子然遏,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,500評論 2 359

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

  • 博客內(nèi)容:什么是面向?qū)ο鬄槭裁匆嫦驅(qū)ο竺嫦驅(qū)ο缶幊痰奶匦院驮瓌t理解對象屬性創(chuàng)建對象繼承 什么是面向?qū)ο?面向?qū)ο?..
    _Dot912閱讀 1,428評論 3 12
  • 理解 javascript 的原型鏈及繼承 以上所有的運(yùn)行結(jié)果都是 true; 三種構(gòu)造對象的方法: 通過對象字面...
    你期待的花開閱讀 1,519評論 0 3
  • 1,javascript 基礎(chǔ)知識 Array對象 Array對象屬性 Arrray對象方法 Date對象 Dat...
    Yuann閱讀 922評論 0 1
  • 看到水田里茁長成長的禾苗,田田的翠翠的煙葉吧彪,不由得想起了被我擱置心里快要遺忘的童年和少年待侵。 ...
    潤秀閱讀 227評論 0 0
  • 我是日記星球215號星寶寶王小鳳,正在參加小牛媽媽日記星球21天蛻變之旅的寫作訓(xùn)練姨裸,這是我的第37篇原創(chuàng)日記秧倾。 忍...
    小鳳Isabel閱讀 309評論 0 2