js-原型/繼承

原型

image.png

沒錯优妙,第一次看到這張圖的我,也呆了憎账。但經過這幾天對原型的了解套硼,已經可以完全理解。

構造函數(shù)created的時候胞皱,就會有一個prototype屬性邪意,指向其原型對象九妈。原型對象有一個屬性constructor,指回其構造函數(shù)雾鬼。用構造函數(shù)new出來的實力對象萌朱,有_proto_屬性,指向其構造函數(shù)的原型策菜。

于是晶疼,對于每一個對象來說,都有一個這樣的三角關系又憨。

構造函數(shù)翠霍,本質上是Function new出來的,所以他們的_proto_都指向Function.prototype(Foo, Object, Function)竟块。

xxx.prototype壶运,原型對象,本質上是對象浪秘,所以他們的proto都指向Object.prototype(Foo.prototype, Function.prototype)蒋情。普通對象,是Object new出來的耸携,所以_proto_也指向Object.prototype棵癣。

Object.prototype._proto_ === null

由_proto_指向串聯(lián)起來的,就是原型鏈夺衍。當我們訪問對象的一個屬性時狈谊,會先看對象本身是否有這個屬性,沒有的話順著原型鏈一層層查找沟沙,直到null為止河劝。若找到,則返回該值矛紫;找不到赎瞎,則返回undefinded。

繼承

 //parent構造函數(shù)
function Parent(name) {
    this.name = name || 'Adam';
}

//給原型增加方法
Parent.prototype.say = function () {
    return this.name;
};

//空的child構造函數(shù)
function Child(name) {}

//繼承
inherit(Child, Parent);
  1. 原型繼承
function inherit(C, P) {
    C.prototype = new P();
}
var kid = new Child();
kid.say(); // "Adam"

kid會拿到Parent構造函數(shù)自身&原型上的值颊咬,且無法傳遞參數(shù)給父函數(shù)务甥。

  1. 借用構造函數(shù)
function Child(a, c, b, d) {
    Parent.apply(this, arguments);
}

子對象復制了一套父構造函數(shù)自身的屬性,改動不會影響父函數(shù)喳篇。
可以傳參給父函數(shù)敞临。
子無法拿到父原型上的屬性。

  1. 借用并設置原型
function Child(a, c, b, d) {
    Parent.apply(this, arguments);
}
Child.prototype = new Parent();

子對象獲得了父對象自己的成員麸澜,也獲得了父對象中可復用的(在原型中實現(xiàn)的)方法挺尿。
子對象也可以傳遞任何參數(shù)給父構造函數(shù)。
一個弊端是父構造函數(shù)被調用了兩次,所以不是很高效票髓。最后攀涵,(父對象)自己的屬性(比如這個例子中的name)也被繼承了兩次。

  1. 共享原型
function inherit(C, P) {
    C.prototype = P.prototype;
}

這種模式的原型鏈很短并且查找很快洽沟,因為所有的對象實際上共享著同一個原型以故。但是這樣也有弊端,那就是如果子對象或者在繼承關系中的某個地方的任何一個子對象修改這個原型裆操,將影響所有的繼承關系中的父對象怒详。(譯注:這里應該是指會影響到所有從這個原型中繼承的對象。)

  1. 臨時構造函數(shù)
function inherit(C, P) {
    var F = function () {};
    F.prototype = P.prototype;
    C.prototype = new F();
}

打斷父對象和子對象原型的直接鏈接解決了共享原型時的問題踪区,子對象只繼承原型中的屬性昆烁。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市缎岗,隨后出現(xiàn)的幾起案子静尼,更是在濱河造成了極大的恐慌,老刑警劉巖传泊,帶你破解...
    沈念sama閱讀 219,427評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鼠渺,死亡現(xiàn)場離奇詭異,居然都是意外死亡眷细,警方通過查閱死者的電腦和手機拦盹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,551評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來溪椎,“玉大人普舆,你說我怎么就攤上這事⌒6粒” “怎么了沼侣?”我有些...
    開封第一講書人閱讀 165,747評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長歉秫。 經常有香客問我华临,道長,這世上最難降的妖魔是什么端考? 我笑而不...
    開封第一講書人閱讀 58,939評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮揭厚,結果婚禮上却特,老公的妹妹穿的比我還像新娘。我一直安慰自己筛圆,他們只是感情好裂明,可當我...
    茶點故事閱讀 67,955評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著太援,像睡著了一般闽晦。 火紅的嫁衣襯著肌膚如雪扳碍。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,737評論 1 305
  • 那天仙蛉,我揣著相機與錄音笋敞,去河邊找鬼。 笑死荠瘪,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播手蝎,決...
    沈念sama閱讀 40,448評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼散怖,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了篮绰?” 一聲冷哼從身側響起后雷,我...
    開封第一講書人閱讀 39,352評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎吠各,沒想到半個月后臀突,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 45,834評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡走孽,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,992評論 3 338
  • 正文 我和宋清朗相戀三年惧辈,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片磕瓷。...
    茶點故事閱讀 40,133評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡盒齿,死狀恐怖,靈堂內的尸體忽然破棺而出困食,到底是詐尸還是另有隱情边翁,我是刑警寧澤,帶...
    沈念sama閱讀 35,815評論 5 346
  • 正文 年R本政府宣布硕盹,位于F島的核電站符匾,受9級特大地震影響,放射性物質發(fā)生泄漏瘩例。R本人自食惡果不足惜啊胶,卻給世界環(huán)境...
    茶點故事閱讀 41,477評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望垛贤。 院中可真熱鬧焰坪,春花似錦、人聲如沸聘惦。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,022評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至黔漂,卻和暖如春诫尽,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背炬守。 一陣腳步聲響...
    開封第一講書人閱讀 33,147評論 1 272
  • 我被黑心中介騙來泰國打工牧嫉, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人劳较。 一個月前我還...
    沈念sama閱讀 48,398評論 3 373
  • 正文 我出身青樓驹止,卻偏偏與公主長得像,于是被迫代替她去往敵國和親观蜗。 傳聞我的和親對象是個殘疾皇子臊恋,可洞房花燭夜當晚...
    茶點故事閱讀 45,077評論 2 355

推薦閱讀更多精彩內容