深入理解 Javascript 之繼承

wuyangnju 發布于2019-08-23 10:56 / 1868人閱讀

摘要：繼承繼承子類可以使用父類的所有功能，并且對這些功能進行擴展。類繼承父類父類添加共有方法子類繼承父類子類添加共有方法其中最核心的一句代碼是將原型指向了父類的原型對象。

繼承

繼承：子類可以使用父類的所有功能，并且對這些功能進行擴展。繼承的過程，就是從一般到特殊的過程。

類繼承

// 父類
var supperClass = function() {
  var id = 1;
  this.name = ["js"];
  this.superVal = function() {
    console.log("supreVal is true");
    console.log(id);
  }
}
// 父類添加共有方法
supperClass.prototype.getSupperVal = function () {
  return this.superVal();
}

// 子類
var subClass = function() {
  this.subVal = function() {
    console.log("this is subVal")
  }
}

// 繼承父類
subClass.prototype = new supperClass();

// 子類添加共有方法
subClass.prototype.getsubVal = function() {
  return this.subVal();
}    

var sub = new subClass();

sub.getSupperVal();   //superValue is true
sub.getsubVal();     //this is subValue
console.log(sub.name);
sub.name.push("java");  //["javascript"]

var sub2 = new subClass();
console.log(sub2.name); // ?["js", "java"]

其中最核心的一句代碼是SubClass.prototype = new SuperClass() ;

將原型__proto__ 指向了父類的原型對象。這樣子類就可以訪問父類的public 和protected 的屬性和方法，同時，父類中的private 的屬性和方法不會被子類繼承。

缺點

敲黑板，如上述代碼的最后一段，使用類繼承的方法，如果父類的構造函數中有【引用類型】，就會在子類中被所有實例共用，因此一個子類的實例如果更改了這個引用類型，就會影響到其他子類的實例。

構造函數繼承

正式因為有了上述的缺點，才有了構造函數繼承，構造函數繼承的核心思想就是SuperClass.call(this,id),直接改變this的指向，使通過this創建的屬性和方法在子類中復制一份，因為是多帶帶復制的，所以各個實例化的子類互不影響。但是會造成內存浪費的問題

var parentClass = function(name, id) {
  this.name = name;
  this.id = id;
  this.getName = function(){
    console.log(this.name)
  }
}

parentClass.prototype.show = function( ) {
  console.log(this.id)
}

var childClass = function(name, id) {
  parentClass.call(this, name, id); 
}
var subClass = new childClass("zjj", 10);

我們先來總結一下類繼承和構造函數繼承的優缺點

=	類繼承	構造函數繼承
核心思想	子類的原型是父類實例化的對象	SuperClass.call(this,id)
優點	子類實例化對象的屬性和方法都指向父類的原型	每個實例化的子類互不影響
缺點	子類之間可能會互相影響	內存浪費

云服務器 GPU云服務器深入理解webrtc之aec 深入理解javascript 深入理解系列深入理解linux

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96827.html

深入理解JavaScript系列8:S.O.L.I.D五大原則之里氏替換原則

摘要：前言本章我們要講解的是五大原則語言實現的第篇，里氏替換原則。因此，違反了里氏替換原則。與行為有關，而不是繼承到現在，我們討論了和繼承上下文在內的里氏替換原則，指示出的面向對象。前言本章我們要講解的是S.O.L.I.D五大原則JavaScript語言實現的第3篇，里氏替換原則LSP（The Liskov Substitution Principle ）。英文原文：http://fre...

susheng 2019-08-19 17:21 評論0 收藏0
深入理解JavaScript

摘要：深入之繼承的多種方式和優缺點深入系列第十五篇，講解各種繼承方式和優缺點。對于解釋型語言例如來說，通過詞法分析語法分析語法樹，就可以開始解釋執行了。 JavaScript深入之繼承的多種方式和優缺點 JavaScript深入系列第十五篇，講解JavaScript各種繼承方式和優缺點。寫在前面本文講解JavaScript各種繼承方式和優缺點。但是注意：這篇文章更像是筆記，哎，再讓我...

myeveryheart 2019-08-22 13:46 評論0 收藏0
深入理解 js 之繼承與原型鏈

摘要：原型鏈與繼承當談到繼承時，只有一種結構對象。如果對該圖不怎么理解，不要著急，繼續往下看基于原型鏈的繼承對象是動態的屬性包指其自己的屬性。當使用操作符來作用這個函數時，它就可以被稱為構造方法構造函數。原型鏈與繼承當談到繼承時，JavaScript 只有一種結構：對象。每個實例對象（object ）都有一個私有屬性（稱之為proto）指向它的原型對象（prototype）。該原型對象也...

xingqiba 2019-08-23 13:07 評論0 收藏0
JavaScript深入之從原型到原型鏈

摘要：深入系列的第一篇，從原型與原型鏈開始講起，如果你想知道構造函數的實例的原型，原型的原型，原型的原型的原型是什么，就來看看這篇文章吧。讓我們用一張圖表示構造函數和實例原型之間的關系在這張圖中我們用表示實例原型。 JavaScript深入系列的第一篇，從原型與原型鏈開始講起，如果你想知道構造函數的實例的原型，原型的原型，原型的原型的原型是什么，就來看看這篇文章吧。構造函數創建對象我們先...

Songlcy 2019-08-21 15:32 評論0 收藏0
JavaScript之深入各種繼承

摘要：通常有這兩種繼承方式接口繼承和實現繼承。理解繼承的工作是通過調用函數實現的，所以是寄生，將繼承工作寄托給別人做，自己只是做增強工作。適用基于某個對象或某些信息來創建對象，而不考慮自定義類型和構造函數。一、繼承的概念繼承，是面向對象語言的一個重要概念。通常有這兩種繼承方式：接口繼承和實現繼承。接口繼承只繼承方法簽名，而實現繼承則繼承實際的方法。《JS高程》里提到：由于函數沒有簽名，...

tomlingtm 2019-08-23 17:08 評論0 收藏0