js繼承

js各種繼承方式介紹

1.原型鏈繼承

function Parent () {
  this.name = 'kevin';
}
 
Parent.prototype.getName = function () {
  console.log(this.name);
}
 
function Child () {
 
}
Child.prototype = new Parent();
 
var child1 = new Child();
 
console.log(child1.getName()) // kevin

2.構(gòu)造繼承

function Parent () {
  this.names = ['kevin', 'daisy'];
}
 
function Child () {
  Parent.call(this);
}
 
var child1 = new Child();
 
child1.names.push('yayu');
 
console.log(child1.names); // ["kevin", "daisy", "yayu"]
 
var child2 = new Child();
 
console.log(child2.names); // ["kevin", "daisy"]

3.組合繼承

function Parent (name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.getName = function () {
    console.log(this.name)
}

function Child (name, age) {
    Parent.call(this, name);
    this.age = age;
}

Child.prototype = new Parent();

var child1 = new Child('kevin', '18');

4.寄生繼承

function createAnother(original){
    var clone = Object.create(original);    //通過(guò)調(diào)用函數(shù)創(chuàng)建一個(gè)新對(duì)象
    clone.sayHi = function(){               //以某種方式來(lái)增強(qiáng)這個(gè)對(duì)象
        alert("Hi");
    };
    
    return clone;                        //返回這個(gè)對(duì)象
}

var person = {
    name: "Bob",
    friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi();

5.寄生組合式繼承

 function Parent(name) {
            this.name = name;
            this.colors = ['red', 'blue', 'green'];
        }

        Parent.prototype.getName = function () {
            console.log(this.name);
        }

        function Child(name, age) {
            Parent.call(this, name);
            this.age = age;
        }

        function object(o) {
            function F() { }
            F.prototype = o;
            return new F();
            // 通過(guò)構(gòu)造一個(gè)介于 Parent 與 Child 之間的對(duì)象绒疗,并使該對(duì)象的 prototype 屬性指向 Parent 的 prototype對(duì)象故响,
            // 來(lái)避開(kāi)通過(guò)調(diào)用 Parent 構(gòu)造函數(shù)的方式來(lái)產(chǎn)生一個(gè) prototype 指向Parent prototype對(duì)象的對(duì)象亭枷。
        }

        function prototype(child, parent) {
            // 不直接child.prototype=parent.prototype呢河爹?
            // 原因 : 當(dāng)我們想給 Child 的prototype里面添加共享屬性或者方法時(shí)植捎,如果其 prototype 指向的是 Parent 的 prototype贩挣,那么在 Child 的 prototype 里添加的屬性和方法也會(huì)反映在 Parent 的 prototype 里面剂碴,
            // 這明顯是不合理的把将,這樣做的后果是當(dāng)我們只想使用 Parent 時(shí),也能看見(jiàn) Child 往里面扔的方法和屬性忆矛。
            // 所以需要每個(gè)構(gòu)造函數(shù)都需要持有自己專用的prototype對(duì)象
            var prototype = object(parent.prototype);
            prototype.constructor = child;
            child.prototype = prototype;
        }

        prototype(Child, Parent);

        var child1 = new Child('kevin', '18');

        console.log(child1);

這種方式的高效率體現(xiàn)它只調(diào)用了一次Parent構(gòu)造函數(shù)察蹲,并且因此避免了在 Parent.prototype 上面創(chuàng)建不必要的、多余的屬性洪碳。與此同時(shí)递览,原型鏈還能保持不變;因此瞳腌,還能夠正常使用 instanceof 和 isPrototypeOf绞铃。開(kāi)發(fā)人員普遍認(rèn)為寄生組合式繼承是引用類型最理想的繼承范式。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末嫂侍,一起剝皮案震驚了整個(gè)濱河市儿捧,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌挑宠,老刑警劉巖菲盾,帶你破解...
    沈念sama閱讀 210,978評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異各淀,居然都是意外死亡懒鉴,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)临谱,“玉大人璃俗,你說(shuō)我怎么就攤上這事∠つ” “怎么了城豁?”我有些...
    開(kāi)封第一講書(shū)人閱讀 156,623評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)抄课。 經(jīng)常有香客問(wèn)我唱星,道長(zhǎng),這世上最難降的妖魔是什么跟磨? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,324評(píng)論 1 282
  • 正文 為了忘掉前任间聊,我火速辦了婚禮,結(jié)果婚禮上吱晒,老公的妹妹穿的比我還像新娘甸饱。我一直安慰自己,他們只是感情好仑濒,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,390評(píng)論 5 384
  • 文/花漫 我一把揭開(kāi)白布叹话。 她就那樣靜靜地躺著,像睡著了一般墩瞳。 火紅的嫁衣襯著肌膚如雪驼壶。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 49,741評(píng)論 1 289
  • 那天喉酌,我揣著相機(jī)與錄音热凹,去河邊找鬼。 笑死泪电,一個(gè)胖子當(dāng)著我的面吹牛般妙,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播相速,決...
    沈念sama閱讀 38,892評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼碟渺,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了突诬?” 一聲冷哼從身側(cè)響起苫拍,我...
    開(kāi)封第一講書(shū)人閱讀 37,655評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎旺隙,沒(méi)想到半個(gè)月后绒极,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,104評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蔬捷,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評(píng)論 2 325
  • 正文 我和宋清朗相戀三年垄提,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,569評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡塔淤,死狀恐怖摘昌,靈堂內(nèi)的尸體忽然破棺而出速妖,到底是詐尸還是另有隱情高蜂,我是刑警寧澤,帶...
    沈念sama閱讀 34,254評(píng)論 4 328
  • 正文 年R本政府宣布罕容,位于F島的核電站备恤,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏锦秒。R本人自食惡果不足惜露泊,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,834評(píng)論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望旅择。 院中可真熱鬧惭笑,春花似錦、人聲如沸生真。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,725評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)柱蟀。三九已至川蒙,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間长已,已是汗流浹背畜眨。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,950評(píng)論 1 264
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留术瓮,地道東北人康聂。 一個(gè)月前我還...
    沈念sama閱讀 46,260評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像胞四,于是被迫代替她去往敵國(guó)和親恬汁。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,446評(píng)論 2 348

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

  • 繼承的概念:子類可以使用父類共享的屬性和方法撬讽,避免重復(fù)代碼提高代碼復(fù)用性蕊连。 原型鏈:子類可以共享父類的實(shí)例對(duì)象和實(shí)...
    淺秋_6672閱讀 393評(píng)論 0 0
  • 前言 此篇文章的目的是讓你搞懂這些繼承到底是為什么?他們的優(yōu)缺點(diǎn)的原理到底是什么游昼?看了很多文章說(shuō)的太抽象甘苍,怎么可能...
    沐雨芝錄閱讀 1,090評(píng)論 0 5
  • 原文鏈接:zhuanlan.zhihu.com (一) 原型鏈繼承: function Parent(name) ...
    越努力越幸運(yùn)_952c閱讀 294評(píng)論 0 2
  • 繼承6種套餐 參照紅皮書(shū),JS繼承一共6種 1.原型鏈繼承 核心思想:子類的原型指向父類的一個(gè)實(shí)例 Son.pro...
    燈不梨喵閱讀 3,128評(píng)論 1 2
  • 周?chē)娜俗罱荚谪?zé)怪我烘豌,說(shuō)我現(xiàn)在越來(lái)越不合群了载庭,其實(shí)我也發(fā)現(xiàn)了,她們叫我一起吃飯唱歌逛街,我是能推就推囚聚,因?yàn)檫@一年...
    磚縫的小草閱讀 887評(píng)論 29 30