繼承

  • 構(gòu)造函數(shù)显押、原型和實例的關(guān)系:

每個構(gòu)造函數(shù)都有其對應(yīng)的原型對象浸踩;
每個原型對象都有一個構(gòu)造函數(shù)指針constructor指向其構(gòu)造函數(shù)叔汁;
每個實例都包含一個內(nèi)部指針[[prototype]],指向構(gòu)造函數(shù)的原型對象检碗;

我們創(chuàng)建一個Person構(gòu)造函數(shù)和一個Student構(gòu)造函數(shù)攻柠,如下:

function Person(){
  this.name = "張三",
  this.hobby=["游泳","看書"]
}
Person.prototype.sayName=function(){return this.name}

function Student(){
  this.needStudy = true
}
Student.prototype.getStudy=function(){return this.needStudy}

Person構(gòu)造函數(shù)的原型屬性有sayName,實例屬性有name和hobby。Student的原型屬性有g(shù)etStudy后裸,實例屬性有needStudy。
用結(jié)構(gòu)圖展示構(gòu)造函數(shù)冒滩、原型對象和實例的關(guān)系如下:


Person構(gòu)造函數(shù).png

Student構(gòu)造函數(shù).png

繼承的實現(xiàn)

下面講述3種繼承的實現(xiàn)方法:
原型鏈繼承微驶、借用構(gòu)造函數(shù)繼承、組合繼承开睡。

1.原型鏈繼承

讓Student繼承Person的實現(xiàn):
令Student的原型對象等于Person的實例因苹。

Student.prototype = new Person()
//Student原型上的方法需要重新定義以下,因為上面重寫了Student原型對象
Student.prototype.getStudy=function(){return this.needStudy}

var stu1 = new Student()

其結(jié)構(gòu)圖如下:


Student與Person的繼承關(guān)系圖.png

原型鏈實現(xiàn)繼承的本質(zhì):重寫原型對象篇恒。

  • 注意:子類型中定義與超類型同樣的方法名會覆蓋超類型中的方法扶檐。
    如下:
Student.prototype.sayName=function(){return "李四"}

var stu1 = new Student()

stu1.sayName() //"李四"
  • 原型鏈的問題:

1.超類型上定義的實例屬性會相互影響,如下:

function Person(){
  this.name = "張三",
  this.hobby=["游泳","看書"]
}
function Student(){
}
Student.prototype = new Person()
var stu1=new Student()
var stu2=new Student()
stu1.hobby.push("聽歌")
console.log(stu1.hobby, stu2.hobby)

上述對stu1的hobby的改變會影響到stu2的hobby值胁艰。

2.無法向超類型傳遞參數(shù)

function Person(name, hobby){
  this.name = name,
  this.hobby = hobby
}
function Student(){
}
Student.prototype = new Person("張三",["游泳"])
var stu1=new Student()
var stu2=new Student()

如果想在new Student()的時候傳遞參數(shù)給Person款筑,是無法傳遞的智蝠。
為解決以上問題,可以使用借用構(gòu)造函數(shù)方法奈梳。

2.借用構(gòu)造函數(shù)繼承
function Person(name,hobby){
  this.name = name,
  this.hobby=hobby
}
Person.prototype.sayName=function(){return this.name}
function Student(name,hobby){
  this.needStudy = true
  Person.call(this,name,hobby)
}
var stu1 = new Student("張三",["看書"])
var stu2 = new Student("李四",["聽歌"])

將超類型中的方法和屬性在子類型中定義一遍杈湾。

  • 借用構(gòu)造函數(shù)的問題:

方法都在構(gòu)造函數(shù)中定義,函數(shù)無法實現(xiàn)復(fù)用攘须;
超類型中的原型方法無法訪問到漆撞。

3.組合繼承
function Person(name,hobby){
  this.name = name,
  this.hobby=hobby
}
Person.prototype.sayName=function(){return this.name}
function Student(name,hobby){
  this.needStudy = true
  Person.call(this,name,hobby)
}
Student.prototype = new Person();
Student.prototype.constructor = Student
Student.prototype.getStudy=function(){
  return this.needStudy
}
var stu1 = new Student("張三",["看書"])
var stu2 = new Student("李四",["聽歌"])
  • 組合繼承本質(zhì):

原型鏈繼承共享的屬性和方法,借用構(gòu)造函數(shù)繼承實例屬性于宙。

總結(jié)

image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末浮驳,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子捞魁,更是在濱河造成了極大的恐慌至会,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,817評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件署驻,死亡現(xiàn)場離奇詭異奋献,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)旺上,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評論 3 385
  • 文/潘曉璐 我一進(jìn)店門瓶蚂,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人宣吱,你說我怎么就攤上這事窃这。” “怎么了征候?”我有些...
    開封第一講書人閱讀 157,354評論 0 348
  • 文/不壞的土叔 我叫張陵杭攻,是天一觀的道長。 經(jīng)常有香客問我疤坝,道長兆解,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,498評論 1 284
  • 正文 為了忘掉前任跑揉,我火速辦了婚禮锅睛,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘历谍。我一直安慰自己现拒,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,600評論 6 386
  • 文/花漫 我一把揭開白布望侈。 她就那樣靜靜地躺著印蔬,像睡著了一般。 火紅的嫁衣襯著肌膚如雪脱衙。 梳的紋絲不亂的頭發(fā)上侥猬,一...
    開封第一講書人閱讀 49,829評論 1 290
  • 那天例驹,我揣著相機(jī)與錄音,去河邊找鬼陵究。 笑死眠饮,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的铜邮。 我是一名探鬼主播仪召,決...
    沈念sama閱讀 38,979評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼松蒜!你這毒婦竟也來了扔茅?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,722評論 0 266
  • 序言:老撾萬榮一對情侶失蹤秸苗,失蹤者是張志新(化名)和其女友劉穎召娜,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體惊楼,經(jīng)...
    沈念sama閱讀 44,189評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡玖瘸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,519評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了檀咙。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片雅倒。...
    茶點故事閱讀 38,654評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖弧可,靈堂內(nèi)的尸體忽然破棺而出蔑匣,到底是詐尸還是另有隱情,我是刑警寧澤棕诵,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布裁良,位于F島的核電站,受9級特大地震影響校套,放射性物質(zhì)發(fā)生泄漏价脾。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,940評論 3 313
  • 文/蒙蒙 一笛匙、第九天 我趴在偏房一處隱蔽的房頂上張望侨把。 院中可真熱鬧,春花似錦膳算、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至映琳,卻和暖如春机隙,著一層夾襖步出監(jiān)牢的瞬間蜘拉,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1 266
  • 我被黑心中介騙來泰國打工有鹿, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留旭旭,地道東北人。 一個月前我還...
    沈念sama閱讀 46,382評論 2 360
  • 正文 我出身青樓葱跋,卻偏偏與公主長得像持寄,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子娱俺,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,543評論 2 349

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