聊一聊 JavaScript 中的 Super() 是什么？

作者：方章和翻譯 2022-11-09 08:05:15

本文將假定您至少對構造函數(shù)以及子類和父類的概念有所了解。如果你不了解這些，則可能需要從Mozilla的Object-oriented JavaScript for beginners開始學習。

當你在js代碼中看到有調用super()時，會不會好奇這個super()到底有什么作用？在子類中，您可以使用super()調用其父級的構造函數(shù)，并使用super.<方法名>來訪問其父級的方法。

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。下面是魚和鱒魚的構造函數(shù)：

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
}
}

魚類的構造函數(shù)定義棲息地和長度，鱒魚的構造函數(shù)定義了種類。我必須在鱒魚的構造函數(shù)中調用super()，否則在嘗試設置this.variety時會出現(xiàn)錯誤。那是因為在鱒魚類的第一行中，我告訴JavaScript鱒魚是使用extends關鍵字的“魚”。

這意味著鱒魚的上下文包括fish類中定義的屬性和方法，以及鱒魚為其自身定義的任何屬性和方法。調用super()本質上使JavaScript知道魚是什么，以便可以為鱒魚創(chuàng)建this上下文，其中包括魚中的所有內容以及我們將為鱒魚定義的所有內容。fish類不需要super（），因為它的“父級”只是JavaScript對象。Fish已處于原型繼承鏈的頂部，因此無需調用super()。

我在trout的構造函數(shù)中調用super(habitat, length)，使這三個屬性在這個上下文中立即可用。實際上還有另一種方法可以從trout的構造函數(shù)中得到相同的行為。我必須調用super()來避免引用錯誤，但我不必使用fish的構造函數(shù)所期望的參數(shù)正確調用它。

這是因為我不需要使用super()來給fish創(chuàng)建的字段賦值，我只需要確保這些字段存在于這個上下文上。這是JavaScript與真正的類繼承模型（例如Java）之間的重要區(qū)別，根據(jù)我的實現(xiàn)方式，以下代碼可能是非法的：

class trout extends fish {
constructor(habitat, length, variety) {
  super()
  this.habitat = habitat
  this.length = length
  this.variety = variety
}
}

這種替代的trout構造函數(shù)使您更難分辨哪些屬性屬于fish和哪些屬性屬于trout，但其結果與前面的示例相同。唯一的區(qū)別是，在此情況下，不帶參數(shù)調用super（）會在當前此this的上下文上創(chuàng)建屬性habitat和length，而無需為其分配任何內容。

如果我在第三行之后調用console.log（this），它將顯示{habitat：undefined，length：undefined}。第四行和第五行分配值。

我也可以在trout的構造函數(shù)之外使用super（），以引用父類上的方法。在這里，我定義了renderProperties方法，該方法會將類的所有屬性顯示在我傳遞給它的HTML元素中。

super（）在這里很有用，因為我希望我的trout類實現(xiàn)一個類似的方法，該方法可以完成相同的工作，并且還要多做一些事情—它在更新HTML之前為該元素執(zhí)定了一個類名。我可以通過在相關類函數(shù)內調用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類上定義的。

如果我只是將函數(shù)命名為trout類中的renderProperties，那將是完全有效的；但是，我將不再能夠從trout的實例中直接訪問這兩個函數(shù)--調用trout.renderProperties將調用定義在trout上的函數(shù)。

這不一定是一個有用的實現(xiàn)方式--可以說，像這樣調用super的函數(shù)覆蓋其父函數(shù)的名稱是一個更好的模式--但它確實說明了JavaScript允許你的類是多么靈活。

其實也可以完全可以不使用前面代碼示例中非常有用的super()或extends關鍵字來實現(xiàn)這個例子，只是不太方便。這就是Mozilla所說的 "語法糖 "的意思。事實上，如果我把我之前的代碼插入像Babel這樣的移植器中，以確保我的類能與舊版本的JavaScript一起工作，它將生成一些更接近下面的代碼。

這里的代碼大部分是一樣的，但你會注意到，如果沒有extends和super()，我必須將fish和trout定義為函數(shù)并直接訪問它們的原型。我還必須在第15、16和17行對原型做一些額外的改動，并確保trout可以在其構造函數(shù)中傳遞正確的this上下文（混合繼承）。

如果你有興趣深入了解這里發(fā)生的事情，Eric Green有一篇優(yōu)秀的帖子，里面有很多代碼片段，介紹了如何使用和不使用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中的類。

責任編輯：姜華來源：新鈦云服

JavaScript super()

国产精品电影_久久视频免费_欧美日韩国产激情_成年人视频免费在线播放_日本久久亚洲电影_久久都是精品_66av99_九色精品美女在线_蜜臀a∨国产成人精品_冲田杏梨av在线_欧美精品在线一区二区三区_麻豆mv在线看

聊一聊 JavaScript 中的 Super() 是什么？