當你在js代碼中看到有調用super()時，會不會好奇這個super()到底有什么作用？在子類中，您可以使用super()調用其父級的構造函數，并使用super.<方法名>來訪問其父級的方法。
本文將假定您至少對構造函數以及子類和父類的概念有所了解。如果你不了解這些，則可能需要從Mozilla的Object-oriented JavaScript for beginners開始學習。
super并不是只javascript語言才有--許多其它編程語言，如java, python都有一個super()關鍵字來提供對父類的引用。與Java和Python不同，JavaScript并不是圍繞類繼承模型構建的。相反，它擴展了JavaScript的原型繼承模型，以提供與類繼承一致的行為。
讓我們進一步了解它，并查看一些代碼示例。
首先，這里引用的一段話Mozilla’s web docs for classes：
JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript’s existing prototype-based inheritance. The class syntax does not introduce a new object-oriented inheritance model to JavaScript.
一個簡單的子類和父類的例子將有助于說明這句話的真正含義:
class Fish {
constructor(habitat, length) {
this.habitat = habitat
this.length = length
}
renderProperties(element) {
element.innerHTML = JSON.stringify(this)
}
}
class Trout extends Fish {
constructor(habitat, length, variety) {
super(habitat, length)
this.variety = variety
}
renderPropertiesWithSuper(element) {
element.className="green"
super.renderProperties(element);
}
}
let grouper = new Fish("saltwater", "26in");
console.log(grouper);
grouper.renderProperties(document.getElementById("grouper"));
let rainbowTrout = new Trout("freshwater", "14in", "rainbow");
console.log(rainbowTrout);
//invoke function from parent prototype
rainbowTrout.renderProperties(document.getElementById("rainbowTrout"));
//invoke function from child's prototype
rainbowTrout.renderPropertiesWithSuper(document.getElementById("rainbowTroutParent"));我的例子有兩個類：Fish和 Trout。所有的魚都有棲息地和長度的信息，所以這些屬性屬于魚類。鱒魚也有一個多樣性的屬性，所以它基于fish又擴展了屬性variety。下面是魚和鱒魚的構造函數：
class fish {
constructor(habitat, length) {
this.habitat = habitat
this.length = length
}
}
class trout extends fish {
constructor(habitat, length, variety) {
super(habitat, length)
this.variety = variety
}
}魚類的構造函數定義棲息地和長度，鱒魚的構造函數定義了種類。我必須在鱒魚的構造函數中調用super()，否則在嘗試設置this.variety時會出現錯誤。那是因為在鱒魚類的第一行中，我告訴JavaScript鱒魚是使用extends關鍵字的“魚”。
這意味著鱒魚的上下文包括fish類中定義的屬性和方法，以及鱒魚為其自身定義的任何屬性和方法。調用super()本質上使JavaScript知道魚是什么，以便可以為鱒魚創建this上下文，其中包括魚中的所有內容以及我們將為鱒魚定義的所有內容。fish類不需要super（），因為它的“父級”只是JavaScript對象。Fish已處于原型繼承鏈的頂部，因此無需調用super()。
我在trout的構造函數中調用super(habitat, length)，使這三個屬性在這個上下文中立即可用。實際上還有另一種方法可以從trout的構造函數中得到相同的行為。我必須調用super()來避免引用錯誤，但我不必使用fish的構造函數所期望的參數正確調用它。
這是因為我不需要使用super()來給fish創建的字段賦值，我只需要確保這些字段存在于這個上下文上。這是JavaScript與真正的類繼承模型（例如Java）之間的重要區別，根據我的實現方式，以下代碼可能是非法的：
class trout extends fish {
constructor(habitat, length, variety) {
super()
this.habitat = habitat
this.length = length
this.variety = variety
}
}這種替代的trout構造函數使您更難分辨哪些屬性屬于fish和哪些屬性屬于trout，但其結果與前面的示例相同。唯一的區別是，在此情況下，不帶參數調用super（）會在當前此this的上下文上創建屬性habitat和length，而無需為其分配任何內容。
如果我在第三行之后調用console.log（this），它將顯示{habitat：undefined，length：undefined}。第四行和第五行分配值。
我也可以在trout的構造函數之外使用super（），以引用父類上的方法。在這里，我定義了renderProperties方法，該方法會將類的所有屬性顯示在我傳遞給它的HTML元素中。
super（）在這里很有用，因為我希望我的trout類實現一個類似的方法，該方法可以完成相同的工作，并且還要多做一些事情—它在更新HTML之前為該元素執定了一個類名。我可以通過在相關類函數內調用super.renderProperties（）來重用fish類中的邏輯。
class fish {
renderProperties(element) {
element.innerHTML = JSON.stringify(this)
}
}
class trout extends fish {
renderPropertiesWithSuper(element) {
element.className="green"
super.renderProperties(element);
}
}你在定義時方法命名很重要。我把我在trout類中的方法叫做renderPropertiesWithSuper()，因為我仍然希望可以選擇調用trout.renderProperties()，因為它是在fish類上定義的。
如果我只是將函數命名為trout類中的renderProperties，那將是完全有效的；但是，我將不再能夠從trout的實例中直接訪問這兩個函數--調用trout.renderProperties將調用定義在trout上的函數。
這不一定是一個有用的實現方式--可以說，像這樣調用super的函數覆蓋其父函數的名稱是一個更好的模式--但它確實說明了JavaScript允許你的類是多么靈活。
其實也可以完全可以不使用前面代碼示例中非常有用的super()或extends關鍵字來實現這個例子，只是不太方便。這就是Mozilla所說的 "語法糖 "的意思。事實上，如果我把我之前的代碼插入像Babel這樣的移植器中，以確保我的類能與舊版本的JavaScript一起工作，它將生成一些更接近下面的代碼。
這里的代碼大部分是一樣的，但你會注意到，如果沒有extends和super()，我必須將fish和trout定義為函數并直接訪問它們的原型。我還必須在第15、16和17行對原型做一些額外的改動，并確保trout可以在其構造函數中傳遞正確的this上下文（混合繼承）。
如果你有興趣深入了解這里發生的事情，Eric Green有一篇優秀的帖子，里面有很多代碼片段，介紹了如何使用和不使用ES2015構建類以及其繼承的關系。
function Fish(habitat, length) {
this.habitat = habitat;
this.length = length;
}
Fish.prototype.renderProperties = function(element) {
element.innerHTML = JSON.stringify(this)
};
function Trout(habitat, length, variety) {
this._super.call(this, habitat, length);
this.variety = variety;
}
Trout.prototype = Object.create(Fish.prototype);
Trout.prototype.constructor = Trout;
Trout.prototype._super = Fish;
Trout.prototype.renderPropertiesWithSuper = function(element) {
element.className="green";
this.renderProperties(element);
};
let grouper = new Fish("saltwater", "26in");
grouper.renderProperties(document.getElementById("grouper"));
var rainbowTrout = new Trout("freshwater", "14in", "rainbow");
//invoke function from parent
rainbowTrout.renderProperties(document.getElementById("rainbowTrout"));
//invoke function from child
rainbowTrout.renderPropertiesWithSuper(document.getElementById("rainbowTroutParent"));JavaScript中的類是共享功能的強大方法。例如，React中的類組件依賴于它們。但是，如果您習慣使用另一種使用類繼承模型的語言進行面向對象的編程，那么JavaScript的行為有時可能會令人驚訝。所以學習原型繼承的基礎知識可以幫助闡明如何使用JavaScript中的類。
