JavaScript的簡單繼承

鑰匙要點

JavaScript使用基於原型的方法來創建面向對象的語言，該方法可以通過克隆用作原型的現有對象來重複行為。這個概念可用於模擬繼承。
• > 可以通過創建夾緊原型的函數，從而將所有成員和函數傳輸到新類中，從而在JavaScript中實現>
• > JavaScript具有自己獨特的面向對象編程的獨特方法，但對於來自C＃或C等語言的開發人員來說，重要的是要了解嘗試將其熟悉的語言複製到JavaScript中可能不會產生最佳結果。取而代之的是，擁抱JavaScript的獨特哲學可以解鎖其全部力量。
>
>

本文是Microsoft的Web開發技術系列的一部分。感謝您支持使SitietPoint成為可能的合作夥伴。

>我的許多朋友是C＃或C開發人員。他們習慣於在項目中使用繼承，當他們想學習或發現JavaScript時，他們問的第一個問題之一是：“但是我該如何使用JavaScript進行繼承？”> 實際上，JavaScript使用與C＃或C不同的方法來創建面向對象的語言。這是一種基於原型的語言。原型製作的概念意味著可以通過克隆作為原型的現有對象來重複行為。 JavaScript中的每個對像都會從原型定義對象可以使用的一組函數和成員的原型。沒有班級。只是對象。然後，每個對像都可以用作另一個對象的原型。

這個概念非常靈活，我們可以使用它來模擬從oop等sashination。

實施繼承

我們使用JavaScript可視化我們想要通過此層次結構創建的內容：

首先，我們可以輕鬆創建Classa。因為沒有明確的類，所以我們可以通過創建這樣的函數來定義一組行為（so…）：

>

可以使用新關鍵字實例化此“類”：>

並使用我們的對象使用它：

<span>var <span>ClassA</span> = function() {
</span>    <span>this.name = "class A";
</span><span>}</span>

>非常簡單，對嗎？

完整的樣本只有8行長：

<span>var a = new ClassA();
</span><span>ClassA.prototype.print = function() {
</span>    <span>console.log(this.name);
</span><span>}</span>

>現在，讓我們添加一個工具以在類之間創建“繼承”。此工具只需要做一件事情：克隆原型：

a<span>.print();</span>

>

這正是魔術發生的地方！通過克隆原型，我們將所有成員和功能傳輸到新類。

>因此，如果我們要添加一個將是第一堂課的第二類，我們只需要使用此代碼：>

<span>var <span>ClassA</span> = function() {
</span>    <span>this.name = "class A";
</span><span>}</span>

然後，由於classB繼承了Classa的打印函數，因此以下代碼正常工作：

>

<span>var a = new ClassA();
</span><span>ClassA.prototype.print = function() {
</span>    <span>console.log(this.name);
</span><span>}</span>

並產生以下輸出：

我們甚至可以覆蓋classB的打印功能：

a<span>.print();</span>

在這種情況下，產生的輸出將看起來像這樣：

var ClassA = function() {
    this.name = "class A";
}

ClassA.prototype.print = function() {
    console.log(this.name);
}

var a = new ClassA();

a<span>.print();</span>

>

>這裡的訣竅是call clasta.protype獲取基本打印功能。然後，由於呼叫函數，我們可以在當前對像上調用基本函數（this）。

<span>var inheritsFrom = function (child<span>, parent</span>) {
</span>    child<span>.prototype = Object.create(parent.prototype);
</span><span>};</span>

創建classC現在很明顯：

>

>輸出為：

<span>var <span>ClassB</span> = function() {
</span>    <span>this.name = "class B";
</span>    <span>this.surname = "I'm the child";
</span><span>}
</span>
<span>inheritsFrom(ClassB, ClassA);</span>

與JavaScript更多動手

<span>var b = new ClassB();
</span>b<span>.print();</span>

>這可能會讓您感到驚訝，但是微軟在許多開源JavaScript主題上擁有大量免費學習，我們的任務是隨著Project Spartan的到來而創造更多的東西。查看我自己的：

WebGL 3D，HTML5和Babylon.js

簡介

>使用ASP.NET和AngularJS
• 構建單頁應用程序 HTML
中的尖端邊緣圖形
或我們團隊的學習系列：

實用的性能提示，使您的HTML/JavaScript更快（從響應式設計到休閒遊戲再到性能優化的7部分系列）

>現代Web平台Jumpstart（HTML，CSS和JS的基本原理）

>

>使用HTML和JavaScript Jumpstart開發通用Windows應用程序（使用已創建的JS來構建應用程序）
和一些免費工具：Visual Studio社區，Azure試用和Mac，Linux或Windows的跨瀏覽器測試工具。
• >
和一些哲學……
得出結論，我只想清楚地表明JavaScript不是C＃或C。它有自己的哲學。如果您是C＃開發人員，並且您真的想接受JavaScript的全部功能，那麼我可以給您的最好的提示是：不要嘗試將您的語言複製到JavaScript中。沒有最好或最壞的語言。只是不同的哲學！

本文是Microsoft的Web Dev技術系列的一部分。我們很高興與您共享Spartan項目及其新的渲染引擎。在Modern.ie上獲取免費的虛擬機或遠程測試。

經常詢問有關JavaScript繼承的問題（常見問題解答）

在JavaScript中的經典和原型繼承是什麼區別？經典的繼承，也稱為構造函數繼承，是從類或構造函數創建新對象的地方。這類似於繼承在Java或C等語言中的工作方式。另一方面，原型繼承是JavaScript所獨有的。它涉及創建一個從現有對象繼承屬性的新對象。這是使用object.create（）方法或通過將新對象的原型設置為現有對象完成的。兩者之間的主要區別在於，經典的繼承使用類和構造函數函數，而原型繼承使用對象。

>

>原型鏈如何在JavaScript繼承中起作用？ JavaScript繼承中的概念。當對像上訪問屬性或方法時，JavaScript首先檢查該對像是否具有該屬性或方法。如果沒有，JavaScript然後檢查對象的原型。此過程繼續延續原型鏈，直到找到屬性或方法或達到鏈的末端（通常是內置對象原型）。該機制允許對像從其原型繼承屬性和方法，從而在JavaScript中啟用代碼重複使用和繼承。

>您能否解釋JavaScript繼承中的“超級”概念？ JavaScript中的關鍵字在類的上下文中用於在對象的父母上調用函數。換句話說，“超級”使您可以在對象的父類上訪問和調用功能，從而使您能夠重複使用父類的方法。這在子類的構造函數中特別有用，您可能需要在其中調用父類的構造函數。

>

>我如何在JavaScript中覆蓋繼承的方法？

>在JavaScript繼承中'構造函數'的作用是什麼？用於創建和初始化對象。在繼承的背景下，使用“超級”關鍵字在子類的構造函數中通常調用父類的構造函數函數。這允許子類繼承父級的屬性和方法。

>

>繼承如何與JavaScript ES6類一起使用？

在引入ES6時，JavaScript現在具有更傳統的基於類的語法，用於定義構造函數和使用繼承。 “類”關鍵字用於定義類，“擴展”關鍵字用於創建從父類繼承的子類。 “超級”關鍵字在子類的構造函數中使用，以調用父類的構造函數。

您可以在JavaScript中解釋多個繼承嗎？一個對像或類可以從多個父母繼承的地方。但是，可以使用Mixins模擬多個繼承。混合蛋白是一種技術，對像或類可以從多個來源“混合”屬性和方法。這使您可以將多個對像或類的功能組合到一個。

> javaScript中的“繼承”和“組合”之間有什麼區別？ JavaScript中的代碼。繼承是對像或類從父對像或類繼承屬性和方法的地方。另一方面，組成是由對象由其他對象組成的地方，功能被委派給了這些組件對象。雖然繼承是關於“ is-a”關係（子類是父類的一種類型），但構圖是關於“ has-a”關係（一個對象具有其他對象）。

>我如何如何在JavaScript中使用JavaScript函數的繼承？

函數是對象，它們可用於實現繼承。這是通過定義用於創建新對象的構造函數來完成的。構造函數函數的“原型”屬性是函數所有實例都將繼承的對象。通過將屬性和方法添加到此原型對像中，您可以使它們可用於函數的所有實例。

>

> javaScript繼承的某些常見陷阱是什麼？原型鏈與構造鏈之間的混淆。當對像上調用方法時，JavaScript查找原型鏈，而不是構造鏈。另一個陷阱是忘記在子構造函數中打電話給父構建器，這可能會導致意外的結果。最後，由於JavaScript使用原型繼承，因此當您打算修改實例時，可能會意外修改原型。

>

以上是JavaScript的簡單繼承的詳細內容。更多資訊請關注PHP中文網其他相關文章！