繼承與原型鏈(筆記)

JavaScript 對象是動態(tài)的屬性“包”(指其自己的屬性)。JavaScript 對象有一個指向一個原型對象的鏈鹰晨。當試圖訪問一個對象的屬性時忧侧,它不僅僅在該對象上搜尋年枕,還會搜尋該對象的原型标捺,以及該對象的原型的原型懊纳,依次層層向上搜索网持,直到找到一個名字匹配的屬性或到達原型鏈的末尾。

繼承方法

JavaScript 并沒有其他基于類的語言所定義的“方法”长踊。在 JavaScript 里,任何函數都可以添加到對象上作為對象的屬性萍倡。函數的繼承與其他的屬性繼承沒有差別身弊,包括上面的“屬性覆蓋”(這種情況相當于其他語言的方法重寫)。
當繼承的函數被調用時列敲,this指向的是當前繼承的對象阱佛,而不是繼承的函數所在的原型對象。

var o = {
  a: 2,
  m: function(){
    return this.a + 1;
  }
};
console.log(o.m()); // 3
// 當調用 o.m 時,'this'指向了o.

var p = Object.create(o);
// p是一個對象, p.__proto__是o.

p.a = 12; // 創(chuàng)建 p 的自身屬性a.
console.log(p.m()); // 13
// 調用 p.m 時, 'this'指向 p. 
// 又因為 p 繼承 o 的 m 函數
// 此時的'this.a' 即 p.a戴而,即 p 的自身屬性 'a'

使用普通語法創(chuàng)建對象

var o = {a: 1};

// o這個對象繼承了Object.prototype上面的所有屬性
// 所以可以這樣使用 o.hasOwnProperty('a').
// hasOwnProperty 是Object.prototype的自身屬性凑术。
// Object.prototype的原型為null。
// 原型鏈如下:
// o ---> Object.prototype ---> null

var a = ["yo", "whadup", "?"];

// 數組都繼承于Array.prototype 
// (indexOf, forEach等方法都是從它繼承而來).
// 原型鏈如下:
// a ---> Array.prototype ---> Object.prototype ---> null

function f(){
  return 2;
}

// 函數都繼承于Function.prototype
// (call, bind等方法都是從它繼承而來):
// f ---> Function.prototype ---> Object.prototype ---> null

使用構造器創(chuàng)建對象

在 JavaScript 中所意,構造器其實就是一個普通的函數淮逊。當使用 new 操作符來作用這個函數時,它就可以被稱為構造方法(構造函數)扶踊。

function Graph() {
  this.vertices = [];
  this.edges = [];
}

Graph.prototype = {
  addVertex: function(v){
    this.vertices.push(v);
  }
};

var g = new Graph();
// g是生成的對象,他的自身屬性有'vertices'和'edges'.
// 在g被實例化時,g.__proto__指向了Graph.prototype.

使用 Object.create 創(chuàng)建對象

ECMAScript 5 中引入了一個新方法:Object.create()泄鹏。可以調用這個方法來創(chuàng)建一個新對象秧耗。新對象的原型就是調用 create 方法時傳入的第一個參數:

var a = {a: 1}; 
// a ---> Object.prototype ---> null

var b = Object.create(a);
// b ---> a ---> Object.prototype ---> null
console.log(b.a); // 1 (繼承而來)

var c = Object.create(b);
// c ---> b ---> a ---> Object.prototype ---> null

var d = Object.create(null);
// d ---> null
console.log(d.hasOwnProperty); // undefined, 因為d沒有繼承Object.prototype

使用 class 關鍵字

ECMAScript6 引入了一套新的關鍵字用來實現(xiàn) class备籽。使用基于類語言的開發(fā)人員會對這些結構感到熟悉,但它們是不一樣的分井。 JavaScript 仍然是基于原型的车猬。這些新的關鍵字包括 class,constructor,static,extends和super。

"use strict";

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

class Square extends Polygon {
  constructor(sideLength) {
    super(sideLength, sideLength);
  }
  get area() {
    return this.height * this.width;
  }
  set sideLength(newLength) {
    this.height = newLength;
    this.width = newLength;
  }
}

var square = new Square(2);
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末尺锚,一起剝皮案震驚了整個濱河市珠闰,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌缩麸,老刑警劉巖铸磅,帶你破解...
    沈念sama閱讀 211,376評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異杭朱,居然都是意外死亡阅仔,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,126評論 2 385
  • 文/潘曉璐 我一進店門弧械,熙熙樓的掌柜王于貴愁眉苦臉地迎上來八酒,“玉大人,你說我怎么就攤上這事刃唐⌒呙裕” “怎么了界轩?”我有些...
    開封第一講書人閱讀 156,966評論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長衔瓮。 經常有香客問我浊猾,道長,這世上最難降的妖魔是什么热鞍? 我笑而不...
    開封第一講書人閱讀 56,432評論 1 283
  • 正文 為了忘掉前任葫慎,我火速辦了婚禮,結果婚禮上薇宠,老公的妹妹穿的比我還像新娘偷办。我一直安慰自己,他們只是感情好澄港,可當我...
    茶點故事閱讀 65,519評論 6 385
  • 文/花漫 我一把揭開白布椒涯。 她就那樣靜靜地躺著,像睡著了一般回梧。 火紅的嫁衣襯著肌膚如雪废岂。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,792評論 1 290
  • 那天漂辐,我揣著相機與錄音泪喊,去河邊找鬼。 笑死髓涯,一個胖子當著我的面吹牛袒啼,可吹牛的內容都是我干的。 我是一名探鬼主播纬纪,決...
    沈念sama閱讀 38,933評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼蚓再,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了包各?” 一聲冷哼從身側響起摘仅,我...
    開封第一講書人閱讀 37,701評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎问畅,沒想到半個月后娃属,有當地人在樹林里發(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 44,143評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡护姆,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,488評論 2 327
  • 正文 我和宋清朗相戀三年矾端,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片卵皂。...
    茶點故事閱讀 38,626評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡秩铆,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情殴玛,我是刑警寧澤捅膘,帶...
    沈念sama閱讀 34,292評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站滚粟,受9級特大地震影響寻仗,放射性物質發(fā)生泄漏。R本人自食惡果不足惜凡壤,卻給世界環(huán)境...
    茶點故事閱讀 39,896評論 3 313
  • 文/蒙蒙 一愧沟、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧鲤遥,春花似錦、人聲如沸林艘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,742評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽狐援。三九已至钢坦,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間啥酱,已是汗流浹背爹凹。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留镶殷,地道東北人禾酱。 一個月前我還...
    沈念sama閱讀 46,324評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像绘趋,于是被迫代替她去往敵國和親颤陶。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,494評論 2 348

推薦閱讀更多精彩內容