實(shí)現(xiàn)繼承的幾種方法

1.原型鏈
// 缺點(diǎn):1)引用類(lèi)型的屬性被實(shí)例所共享
// 2)在創(chuàng)建Child的實(shí)例時(shí),不能向Parent傳參

var log = console.log.bind(console)
function Parent () {
   this.names = ['kevin', 'daisy'];
}
function Child () {}
Child.prototype = new Parent();

var child = new Child();
child.names.push('yayu'); 
console.log(child.names); // ["kevin", "daisy", "yayu"]
var child1 = new Child();
console.log(child1.names); // ["kevin", "daisy", "yayu"]

2.借助構(gòu)造函數(shù)设江,也叫偽造對(duì)象或經(jīng)典繼承锦茁。
// 優(yōu)點(diǎn):
// 1)避免了引用類(lèi)型的屬性被所有實(shí)例共享
// 2)可以在 Child 中向 Parent 傳參
// 缺點(diǎn):方法都在構(gòu)造函數(shù)中定義,每次創(chuàng)建實(shí)例都會(huì)創(chuàng)建一遍方法叉存。

var log = console.log.bind(console)
function Parent(name) {
  this.name = name
  this.getName = function() {
    log(this.name)
  }
}
function Child(name) {
  Parent.call(this, name)
}
var child1 = new Child('kevin');
console.log(child1.name); // kevin
var child2 = new Child('daisy');
console.log(child2.name); // daisy
log(child1.getName == child2.getName) //false

3.組合繼承码俩。也叫偽經(jīng)典繼承。
// 優(yōu)點(diǎn):融合原型鏈繼承和構(gòu)造函數(shù)的優(yōu)點(diǎn)歼捏,是 JavaScript 中最常用的繼承模式稿存。

var log = console.log.bind(console)
function Parent (name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.getName = function () {
    console.log(111, this.name)
}
function Child (name, age) {
    // 借用構(gòu)造函數(shù)
    Parent.call(this, name); 
    this.age = age;
}
// 原型繼承
Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child1 = new Child('kevin', '18');
child1.colors.push('black');
console.log(child1.name); // kevin
console.log(child1.age); // 18
console.log(child1.colors); // ["red", "blue", "green", "black"]


var child2 = new Child('daisy', '20');
console.log(child2.name); // daisy
console.log(child2.age); // 20
console.log(child2.colors); // ["red", "blue", "green"]

log(child1.getName == child2.getName)  //true

4.原型式繼承
// ES5 Object.create 的模擬實(shí)現(xiàn),將傳入的對(duì)象作為創(chuàng)建的對(duì)象的原型瞳秽。
// 缺點(diǎn):包含引用類(lèi)型的屬性值始終都會(huì)共享相應(yīng)的值瓣履,這點(diǎn)跟原型鏈繼承一樣

var log = console.log.bind(console)
function createObj(o) {
    function F(){}
    F.prototype = o;
    return new F();
}

var person = {
    name: 'kevin',
    friends: ['daisy', 'kelly']
}

var person1 = createObj(person);
var person2 = createObj(person);
// 注意:修改person1.name的值,person2.name的值并未發(fā)生改變练俐,并不是因?yàn)閜erson1和person2有獨(dú)立的 name 值袖迎,而是因?yàn)閜erson1.name = 'person1',給person1添加了 name 值痰洒,并非修改了原型上的 name 值瓢棒。
person1.name = 'person1';
console.log(person2.name); // kevin

person1.friends.push('taylor');
console.log(person2.friends); // ["daisy", "kelly", "taylor"]

5.寄生式繼承
// 創(chuàng)建一個(gè)僅用于封裝繼承過(guò)程的函數(shù),該函數(shù)在內(nèi)部以某種形式來(lái)做增強(qiáng)對(duì)象丘喻,最后返回對(duì)象脯宿。
// 缺點(diǎn):跟借用構(gòu)造函數(shù)模式一樣,每次創(chuàng)建對(duì)象都會(huì)創(chuàng)建一遍方法泉粉。

function createObj(o) {
  var clone = Object.create(o)
  clone.sayName = function() {
    log('hi')
  }
  return clone
}

6.寄生組合式繼承(是引用類(lèi)型最理想的繼承范式)
// 避免了組合繼承的:2次調(diào)用父級(jí)的構(gòu)造函數(shù)

function object(o) {
  function F() {}
  F.prototype = o
  return new F()
}
function prototype(child, parent) {
  var prototype = object(parent.prototype)  //創(chuàng)建對(duì)象
  child.constructor = child  //增強(qiáng)對(duì)象
  child.prototype = prototype
}

function Parent(name) {
  this.name = name
  this.colors = ['red', 'blue', 'green']
}
Parent.prototype.getName = function() {
  log(this.name)
}
function Child(name, age) {
  Parent.call(this, name)
  this.age = age
}
// 避免了組合繼承的:2次調(diào)用父級(jí)的構(gòu)造函數(shù)
// Child.prototype = new Parent()
prototype(Child, Parent)
var child1 = new Child('haha', 19)
child1.getName()
child1.colors.push('yellow')
log(child1.colors)
log('-----------', child1)
var child2 = new Child('meimei', 20)
child2.getName()
log(child2.colors)
log('-----------', child2)
// 這個(gè)方法也是公共的
log(child1.getName == child2.getName)

詳見(jiàn):查看打印

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末连霉,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子嗡靡,更是在濱河造成了極大的恐慌跺撼,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,816評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件讨彼,死亡現(xiàn)場(chǎng)離奇詭異歉井,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)哈误,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén)哩至,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)躏嚎,“玉大人,你說(shuō)我怎么就攤上這事菩貌÷叮” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 158,300評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵箭阶,是天一觀的道長(zhǎng)虚茶。 經(jīng)常有香客問(wèn)我,道長(zhǎng)仇参,這世上最難降的妖魔是什么嘹叫? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,780評(píng)論 1 285
  • 正文 為了忘掉前任,我火速辦了婚禮冈敛,結(jié)果婚禮上待笑,老公的妹妹穿的比我還像新娘鸣皂。我一直安慰自己抓谴,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,890評(píng)論 6 385
  • 文/花漫 我一把揭開(kāi)白布寞缝。 她就那樣靜靜地躺著癌压,像睡著了一般。 火紅的嫁衣襯著肌膚如雪荆陆。 梳的紋絲不亂的頭發(fā)上滩届,一...
    開(kāi)封第一講書(shū)人閱讀 50,084評(píng)論 1 291
  • 那天,我揣著相機(jī)與錄音被啼,去河邊找鬼帜消。 笑死,一個(gè)胖子當(dāng)著我的面吹牛浓体,可吹牛的內(nèi)容都是我干的泡挺。 我是一名探鬼主播,決...
    沈念sama閱讀 39,151評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼命浴,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼娄猫!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起生闲,我...
    開(kāi)封第一講書(shū)人閱讀 37,912評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤媳溺,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后碍讯,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體悬蔽,經(jīng)...
    沈念sama閱讀 44,355評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,666評(píng)論 2 327
  • 正文 我和宋清朗相戀三年捉兴,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了蝎困。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片缅帘。...
    茶點(diǎn)故事閱讀 38,809評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖难衰,靈堂內(nèi)的尸體忽然破棺而出钦无,到底是詐尸還是另有隱情,我是刑警寧澤盖袭,帶...
    沈念sama閱讀 34,504評(píng)論 4 334
  • 正文 年R本政府宣布失暂,位于F島的核電站,受9級(jí)特大地震影響鳄虱,放射性物質(zhì)發(fā)生泄漏弟塞。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,150評(píng)論 3 317
  • 文/蒙蒙 一拙已、第九天 我趴在偏房一處隱蔽的房頂上張望决记。 院中可真熱鬧,春花似錦倍踪、人聲如沸系宫。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,882評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)扩借。三九已至,卻和暖如春缤至,著一層夾襖步出監(jiān)牢的瞬間潮罪,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,121評(píng)論 1 267
  • 我被黑心中介騙來(lái)泰國(guó)打工领斥, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留嫉到,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,628評(píng)論 2 362
  • 正文 我出身青樓月洛,卻偏偏與公主長(zhǎng)得像何恶,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子膊存,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,724評(píng)論 2 351

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