JavaScriptによる単純な継承

キーテイクアウト

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

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

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

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の最先端のグラフィックス
• または私たちのチームの学習シリーズ：
HTML/JavaScriptをより高速にするための実用的なパフォーマンスのヒント（レスポンシブデザインからカジュアルゲーム、パフォーマンスの最適化まで）

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

HTMLとJavaScript JumpStartを使用してユニバーサルWindowsアプリの開発（すでに作成したJSを使用してアプリを構築するため）
• およびいくつかの無料ツール：Visual Studioコミュニティ、Azureトライアル、およびMac、Linux、またはWindows用のクロスブラウザーテストツール。
およびいくつかの哲学…
結論として、JavaScriptはC＃またはCではないことを明確に述べたいだけです。それは独自の哲学を持っています。あなたがCまたはC＃開発者であり、JavaScriptの全力を本当に受け入れたい場合、私があなたに与えることができる最良のヒントは、あなたの言語をJavaScriptに複製しようとしないでください。最も良い言語も最悪の言葉もありません。ただ異なる哲学！

この記事は、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」を使用すると、オブジェクトの親クラスで機能にアクセスして呼び出しているため、親クラスのメソッドを再利用できます。これは、サブクラスのコンストラクターで特に役立ちます。ここでは、親クラスのコンストラクターを呼び出すことができます。簡単です。子クラスまたはオブジェクトに同じ名前のメソッドを定義するだけです。その方法が子クラスまたはオブジェクトのインスタンスで呼び出されると、子で定義されたバージョンは親のものではなく使用されます。これにより、継承されたメソッドの動作をカスタマイズまたは拡張できます。オブジェクトの作成と初期化に使用されます。継承のコンテキストでは、親クラスのコンストラクター関数は、「スーパー」キーワードを使用して子クラスのコンストラクターでしばしば呼び出されます。これにより、子クラスは親クラスのプロパティと方法を継承できます。

JavaScript ES6クラスでの継承作業はどのように機能しますか？ ​​ javascriptの関数はオブジェクトであり、それらを使用して継承を実装できます。これは、新しいオブジェクトを作成するために使用されるコンストラクター関数を定義することによって行われます。コンストラクター関数の「プロトタイプ」プロパティは、関数のすべてのインスタンスが継承されるオブジェクトです。このプロトタイプオブジェクトにプロパティとメソッドを追加することにより、関数のすべてのインスタンスでそれらを使用できるようにすることができます。プロトタイプチェーンとコンストラクターチェーンの間の混乱。メソッドがオブジェクトで呼び出されると、JavaScriptはコンストラクターチェーンではなく、プロトタイプチェーンを検索します。別の落とし穴は、子コンストラクターの親コンストラクターを呼び出すことを忘れていることです。これは、予期しない結果につながる可能性があります。最後に、JavaScriptはプロトタイプの継承を使用しているため、インスタンスを変更することを意図したときにプロトタイプを誤って変更することができます。

以上がJavaScriptによる単純な継承の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。