はじめに
JavaScriptはプロトタイプベースの言語であり、JavaScriptのすべてのオブジェクトには]という隠された内部プロパティがあり、オブジェクトのプロパティとメソッドを拡張するために使用できます。 につなげていくかを学びます試作品レベルで理解する上で、試作品や相続JavaScriptのチュートリアルです。
最近まで、勤勉な開発者はJavaScriptのオブジェクト指向のデザインパターンを模倣するためにコンストラクタ関数を使用していました。, 言語仕様ECMAScript2015は、しばしばES6と呼ばれ、JavaScript言語にクラスを導入しました。 JavaScriptのクラスは実際には追加の機能を提供せず、よりクリーンでエレガントな構文を提供するという点で、プロトタイプや継承よりも”構文的な砂糖”を提供するとしてよく説明されます。 でその他のプログラミング言語用のクラス構文をJavaScriptでストレート開発者の間を移動します。
クラスは関数です
JavaScriptクラスは関数の一種です。, クラスは、classキーワードで宣言されます。 関数を初期化するには関数式構文を使用し、クラスを初期化するにはクラス式構文を使用します。
// Initializing a function with a function expressionconst x = function() {}// Initializing a class with a class expressionconst y = class {}]Object.getPrototypeOf()メソッドを使用してオブジェクトのObject.getPrototypeOf()にアクセスできます。 これを使用して、作成した空の関数をテストしましょう。
Object.getPrototypeOf(x);Outputƒ () { }作成したクラスでこのメソッドを使用することもできます。,
Object.getPrototypeOf(y);Outputƒ () { }functionおよびclassどちらも関数]で宣言されたコード。 プロトタイプでは、newキーワードを使用して、任意の関数をコンストラクタインスタンスにすることができます。
Outputx {}constructor: ƒ ()これはクラスにも適用されます。
Outputy {}constructor: classこれらのプロトタイプコンストラクタの例は空ですが、構文の下で両方のメソッドが同じ最終結果を達成していることがわかります。,
クラスの定義
プロトタイプと継承チュートリアルでは、テキストベースのロールプレイングゲームでのキャラクター作成に基づいた例を作成しました。 関数からクラスに構文を更新するために、ここでこの例を続けてみましょう。
コンストラクタ関数は、関数自体を参照するthisのプロパティとして割り当てられる多数のパラメータで初期化されます。 識別子の最初の文字は慣例により大文字になります。
// Initializing a constructor functionfunction Hero(name, level) { this.name = name; this.level = level;}これを以下に示すクラス構文に変換すると、非常によく似た構造になっていることがわかります。
// Initializing a class definitionclass Hero { constructor(name, level) { this.name = name; this.level = level; }}コンストラクタ関数は、初期化子の最初の文字の大文字（オプション）と構文に精通していることによって、オブジェクトブループリント classキーワードは、関数の目的をより簡単に伝えます。,
初期化の構文の唯一の違いは、classキーワードの代わりにfunctionを使用し、constructor()メソッド内のプロパティを割り当てることです。
メソッドの定義
コンストラクタ関数の一般的な方法は、以下のprototypeメソッドに見られるように、初期化ではなくgreet()メソッドに直接メソッドを割り当てることです。
クラスでは、この構文は単純化されており、メソッドはクラスに直接追加できます。, ES6で導入されたメソッド定義の短縮形を使用すると、メソッドを定義することはさらに簡潔なプロセスです。
これらのプロパティとメソッドを実際に見てみましょう。 Heroの新しいインスタンスを作成しますnewキーワードを使用して、いくつかの値を割り当てます。
const hero1 = new Hero('Varg', 1);console.log(hero1)で新しいオブジェクトに関する詳細情報を出力すると、クラスの初期化で何が起こっているかについての詳細を見ることができます。,
OutputHero {name: "Varg", level: 1}__proto__: ▶ constructor: class Hero ▶ greet: ƒ greet()出力では、constructor()およびgreet()関数が__proto__、または]のiv id=”8a6cbda569″hero1オブジェクトのメソッドとして直接ではありません。 が明らかである場合のコンストラクタの機能ではないことが明らかではないことながら作ります。 クラスはよりシンプルで簡潔な構文を可能にしますが、プロセスの明快さを犠牲にします。,
クラスの拡張
コンストラクタ関数とクラスの有利な特徴は、親に基づいて新しいオブジェクトブループリントに拡張できることです。 この繰り返しコードのためのオブジェクトが”似て非なるもの”である必要があるための具体的な特徴です。
新しいコンストラクタ関数は、call()メソッドを使用して親から作成できます。, 以下の例では、Mageというより具体的な文字クラスを作成し、Heroのプロパティをcall()を使用して割り当て
この時点で、Mageの新しいインスタンスを作成できますHeroと同じプロパティを使用して、追加した新しいインスタ,
const hero2 = new Mage('Lejon', 2, 'Magic Missile');hero2をコンソールに送信すると、コンストラクタに基づいて新しいMageが作成されていることがわかります。
OutputMage {name: "Lejon", level: 2, spell: "Magic Missile"}__proto__: ▶ constructor: ƒ Mage(name, level, spell)ES6クラスでは、superキーワードをcallの代わりに使用して親関数にアクセスします。 親クラスを参照するには、extendsを使用します。
これで、同じ方法で新しいMageインスタンスを作成できます。,
const hero2 = new Mage('Lejon', 2, 'Magic Missile');出力しますhero2コンソールに出力し、出力を表示します。
OutputMage {name: "Lejon", level: 2, spell: "Magic Missile"}__proto__: Hero ▶ constructor: class Mage出力は、クラス構築で]が親にリンクされていることを除いて、ほぼまったく同じです。Hero。
以下は、初期化、メソッドの追加、およびコンストラクタ関数とクラスの継承のプロセス全体のサイドバイサイド比較です。
構文はかなり異なりますが、基礎となる結果は両方のメソッドでほぼ同じです。 クラスはオブジェクトブループリントを作成するより簡潔な方法を提供し、コンストラクタ関数は内部で何が起こっているのかをより正確に記述
まとめ
このチュートリアルでは、JavaScriptコンストラクタ関数とES6クラスの類似点と相違点について学びました。 両クラスとコンストラクタは真似のオブジェクト指向の継承モデルをJavaScriptでは、試作に基づく継承す。,
プロトタイプの継承を理解することは、効果的なJavaScript開発者であることにとって最も重要です。 Reactのような人気のあるJavaScriptライブラリはclass構文を頻繁に使用するため、クラスに精通していることは非常に役立ちます。