js中的繼承

上篇說了js的設計模式万栅,現在再說說繼承(不理解設計模式的可以看上篇)。
1伞辛、原型鏈

function Child(){
    this.name= 'scater';
}
function Parent(){
    this.age= 29;
}
//繼承了 SuperType
Child.prototype = new Parent();
Parent.prototype.getAge= function (){
    return this.age;
};
const child1 = new Child();
console.log(child1.getAge()); //29

缺點:引用類型屬性被實例共享黍檩;創(chuàng)建子類實例時,無法向父類構造函數傳參始锚。
2刽酱、借用構造函數

function Child(){
    this.name= 'scater';
    Parent.call(this); // call和apply都可以
}
function Parent(){
    this.age= 29;
    this.getAge= function (){
        return this.age;
    }
};
const child1 = new Child();
console.log(child1.getAge()); //29

實例并不是父類的實例,只是子類的實例瞧捌;只能繼承父類的實例屬性和方法棵里,不能繼承原型屬性/方法;無法實現函數復用姐呐,每個子類都有父類實例函數的副本殿怜,影響性能
3、組合繼承

function Parent(){
    this.age= 29;
    this.getAge= function (){
        return this.age;
    }
};
function Child(){
    this.name= 'scater';
    Parent.call(this); // call和apply都可以
}
Child.prototype = new Parent();
Child.prototype.constructor = Child; // 將構造函數指向Child
Parent.prototype.getName = function (){
    return this.name;
};
const child1 = new Child();
console.log(child1.getAge(), child1.getName ()); //29, 'scater'

可以繼承父級實例屬性/方法曙砂,也可以繼承父級原型屬性/方法头谜;但是調用了兩次父類構造函數,生成了兩份實例鸠澈。
4柱告、原型式繼承

function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}
var person = {
    name: "scater",
    friends: ["tom", "Lee"]
};
// 利用object繼承
const anotherPerson = object(person);
// 給子類添加自有屬性
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
console.log (anotherPerson.name, anotherPerson.friends);  // Greg ["tom", "Lee", "Rob"]

ES5 通過新增 Object.create() 方法規(guī)范化了原型式繼承。這個方法接收兩個參數:一
個用作新對象原型的對象和(可選的)一個為新對象定義額外屬性的對象笑陈。

var anotherPerson = Object.create(person);
// 給子類添加自有屬性
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
console.log (anotherPerson.name, anotherPerson.friends);  // Greg ["tom", "Lee", "Rob"]

在沒有必要創(chuàng)建構造函數际度,而只想讓一個對象與另一個對象保持類似的情況下,原型式
繼承是完全可以勝任的涵妥。但是包含引用類型值的屬性始終都會共享相應的值乖菱,就像使用原型模
式一樣。
5蓬网、寄生式繼承

function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}
function createAnother(original){
    var clone = object(original); //通過調用函數創(chuàng)建一個新對象
    clone.sayHi = function(){ //以某種方式來增強這個對象
        console.log("hi");
    };
    return clone; //返回這個對象
}
var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"

在主要考慮對象而不是自定義類型和構造函數的情況下窒所,寄生式繼承也是一種有用的模式。
6帆锋、寄生組合式繼承(推薦)

function Parent(){
    this.age= 29;
}
function Child(name){
  Parent.call(this);
  this.name = name;
}
(function(){
  // 創(chuàng)建一個沒有實例方法的類
  var Super = function(){};
  Super.prototype = Parent.prototype;
  //將實例作為子類的原型
  Child.prototype = new Super();
})();

Child.prototype.constructor = Child; // 將構造函數指向Child
const scater= new Child('scater');
console.log(scater.name, scater.age); // scater 29

7吵取、ES6 Class類的繼承

class Parent {
  constructor() {
    this.age = 29;
  }
}
class Child extends Parent {
  constructor(name) {
    super(); // 在子類的構造函數中,只有調用super之后窟坐,才可以使用this關鍵字海渊,否則會報錯。
    this.name = name;
  }
}
const scater = new Child('scater');
console.log(scater.name, scater.age); // scater 29

ES6 的繼承機制哲鸳,實質是先將父類實例對象的屬性和方法臣疑,加到this上面(所以必須先調用super方法),然后再用子類的構造函數修改this徙菠。

?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末讯沈,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子婿奔,更是在濱河造成了極大的恐慌缺狠,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件萍摊,死亡現場離奇詭異挤茄,居然都是意外死亡,警方通過查閱死者的電腦和手機冰木,發(fā)現死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進店門穷劈,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人踊沸,你說我怎么就攤上這事歇终。” “怎么了逼龟?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵评凝,是天一觀的道長。 經常有香客問我腺律,道長奕短,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任匀钧,我火速辦了婚禮篡诽,結果婚禮上,老公的妹妹穿的比我還像新娘榴捡。我一直安慰自己杈女,他們只是感情好,可當我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布吊圾。 她就那樣靜靜地躺著达椰,像睡著了一般。 火紅的嫁衣襯著肌膚如雪项乒。 梳的紋絲不亂的頭發(fā)上啰劲,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天,我揣著相機與錄音檀何,去河邊找鬼蝇裤。 笑死廷支,一個胖子當著我的面吹牛,可吹牛的內容都是我干的栓辜。 我是一名探鬼主播恋拍,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼藕甩!你這毒婦竟也來了施敢?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤狭莱,失蹤者是張志新(化名)和其女友劉穎僵娃,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體腋妙,經...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡默怨,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了骤素。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片先壕。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖谆甜,靈堂內的尸體忽然破棺而出垃僚,到底是詐尸還是另有隱情,我是刑警寧澤规辱,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布谆棺,位于F島的核電站,受9級特大地震影響罕袋,放射性物質發(fā)生泄漏改淑。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一浴讯、第九天 我趴在偏房一處隱蔽的房頂上張望朵夏。 院中可真熱鬧,春花似錦榆纽、人聲如沸仰猖。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽饥侵。三九已至,卻和暖如春衣屏,著一層夾襖步出監(jiān)牢的瞬間躏升,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工狼忱, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留膨疏,地道東北人一睁。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓,卻偏偏與公主長得像佃却,于是被迫代替她去往敵國和親者吁。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,627評論 2 350

推薦閱讀更多精彩內容

  • 方式一双霍、原型鏈繼承 分析: 這種方式實現的本質是通過將子類的原型指向了父類的實例,子類的實例就可以通過proto訪...
    tency小七閱讀 218評論 0 0
  • ??面向對象(Object-Oriented,OO)的語言有一個標志均芽,那就是它們都有類的概念丘逸,而通過類可以創(chuàng)建任意...
    霜天曉閱讀 2,098評論 0 6
  • # 概述 本文主要記錄js中實現繼承的幾種方法的實現,優(yōu)缺點分析 # 知識鋪墊 + **構造函數掀宋,原型和實例的關系...
    HLE閱讀 636評論 0 0
  • 這是16年5月份編輯的一份比較雜亂適合自己觀看的學習記錄文檔深纲,今天18年5月份再次想寫文章,發(fā)現簡書還為我保存起的...
    Jenaral閱讀 2,739評論 2 9
  • 第3章 基本概念 3.1 語法 3.2 關鍵字和保留字 3.3 變量 3.4 數據類型 5種簡單數據類型:Unde...
    RickCole閱讀 5,106評論 0 21