JavaScriptによる単純な継承-jsチュートリアル-php.cn

JavaScriptによる単純な継承

キーテイクアウト

JavaScriptは、プロトタイプベースのアプローチを使用して、オブジェクト指向の言語を作成します。これにより、プロトタイプとして機能する既存のオブジェクトをクローニングすることで動作を再利用できます。この概念は、継承をシミュレートするために使用できます
JavaScriptにはオブジェクト指向プログラミングに対する独自のアプローチがありますが、C＃やCなどの言語から来る開発者にとって、馴染みのある言語をJavaScriptに複製しようとすると、最良の結果が得られないことを理解することが重要です。代わりに、JavaScriptのユニークな哲学を受け入れると、その全力のロックを解除できます。
この記事は、MicrosoftのWeb Dev Techシリーズの一部です。 SitePointを可能にしてくれたパートナーをサポートしてくれてありがとう。

私の友人の多くはC＃またはC開発者です。彼らはプロジェクトで継承を使用することに慣れており、JavaScriptを学習または発見したいとき、彼らが尋ねる最初の質問の1つは次のとおりです。

実際、JavaScriptはC＃またはCとは異なるアプローチを使用して、オブジェクト指向の言語を作成します。プロトタイプベースの言語です。プロトタイピングの概念は、プロトタイプとして機能する既存のオブジェクトをクローニングすることにより、動作を再利用できることを意味します。 JavaScriptのすべてのオブジェクトは、オブジェクトが使用できる一連の関数とメンバーを定義するプロトタイプから決定します。クラスはありません。ただオブジェクト。すべてのオブジェクトは、別のオブジェクトのプロトタイプとして使用できます。 この概念は非常に柔軟であり、継承のようなOOPからいくつかの概念をシミュレートするために使用できます。 継承の実装

JavaScriptを使用してこの階層で作成したいものを視覚化しましょう：

まず、クラスを簡単に作成できます。明示的なクラスがないため、次のような関数を作成するだけで、動作のセット（クラスなど）を定義できます。

この「クラス」は、新しいキーワード：

を使用してインスタンス化できます

オブジェクトを使用して使用するには、>

かなり単純ですよね？ JavaScriptによる単純な継承

完全なサンプルの長さはわずか8行です：

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

ログイン後にコピー

クラス間で「継承」を作成するツールを追加しましょう。このツールは、プロトタイプのクローンを1つだけ行う必要があります：

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

ログイン後にコピー

これはまさに魔法が起こる場所です！プロトタイプをクローニングすることにより、すべてのメンバーと機能を新しいクラスに転送します。

したがって、最初のクラスの子になる2番目のクラスを追加したい場合は、このコードを使用する必要があります。

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

ログイン後にコピー

および次の出力を生成します：

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

ログイン後にコピー

classBの印刷関数をオーバーライドすることもできます：

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

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

var a = new ClassA();

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

ログイン後にコピー

この場合、生成された出力は次のようになります。

ここでのトリックは、コールclassa.prototypeで、ベース印刷機能を取得します。次に、呼び出し関数のおかげで、現在のオブジェクト（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を使用したより実践的な

少し驚くかもしれませんが、Microsoftは多くのオープンソースJavaScriptのトピックについてたくさんの自由な学習を持っています。プロジェクトSpartanが来ることでさらに多くのことを創造することを使命としています。自分のものをチェックしてください：

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

ログイン後にコピー

webgl 3d、html5、babylon.jsの紹介

ASP.NETおよびAngularJS

HTMLの最先端のグラフィックス
または私たちのチームの学習シリーズ：

最新のWebプラットフォームJumpstart（HTML、CSS、およびJSの基礎）

およびいくつかの無料ツール：Visual Studioコミュニティ、Azureトライアル、およびMac、Linux、またはWindows用のクロスブラウザーテストツール。

この記事は、MicrosoftのWeb Dev Techシリーズの一部です。 Project Spartanとその新しいレンダリングエンジンを皆さんと共有できることを楽しみにしています。モダンでMac、iOS、Android、またはWindowsデバイスで無料の仮想マシンを入手するか、リモートでテストします。JavaScript継承に関するよくある質問（FAQ）

JavaScriptの古典的継承とプロトタイプの継承の違いは何ですか？

JavaScriptには、2つのタイプの継承があります。古典的およびプロトタイプです。コンストラクター継承としても知られる古典的な継承は、クラスまたはコンストラクター関数から新しいオブジェクトが作成される場所です。これは、Javaやcなどの言語での継承がどのように機能するかに似ています。一方、プロトタイプの継承は、JavaScriptに固有のものです。既存のオブジェクトからプロパティを継承する新しいオブジェクトを作成することが含まれます。これは、object.create（）メソッドを使用して、または新しいオブジェクトのプロトタイプを既存のオブジェクトに設定することによって行われます。 2つの主な違いは、古典的継承がクラスとコンストラクター機能を使用し、プロトタイプ継承はオブジェクトを使用することです。 JavaScript継承の概念。プロパティまたはメソッドにオブジェクトにアクセスされる場合、JavaScriptは最初にそのオブジェクトにそのプロパティまたはメソッドがあるかどうかを確認します。そうでない場合、JavaScriptはオブジェクトのプロトタイプをチェックします。このプロセスは、プロパティまたはメソッドが見つかるか、チェーンの終了に到達するまでプロトタイプチェーンを継続します（通常は組み込みのオブジェクトプロトタイプです）。このメカニズムにより、オブジェクトはプロトタイプからプロパティとメソッドを継承し、JavaScriptのコードの再利用と継承を可能にします。 JavaScriptのキーワードは、オブジェクトの親の関数を呼び出すためにクラスのコンテキストで使用されます。言い換えれば、「Super」を使用すると、オブジェクトの親クラスで機能にアクセスして呼び出しているため、親クラスのメソッドを再利用できます。これは、サブクラスのコンストラクターで特に役立ちます。ここでは、親クラスのコンストラクターを呼び出すことができます。簡単です。子クラスまたはオブジェクトに同じ名前のメソッドを定義するだけです。その方法が子クラスまたはオブジェクトのインスタンスで呼び出されると、子で定義されたバージョンは親のものではなく使用されます。これにより、継承されたメソッドの動作をカスタマイズまたは拡張できます。オブジェクトの作成と初期化に使用されます。継承のコンテキストでは、親クラスのコンストラクター関数は、「スーパー」キーワードを使用して子クラスのコンストラクターでしばしば呼び出されます。これにより、子クラスは親クラスのプロパティと方法を継承できます。