前書き
JavaScriptはプロトタイプベースの言語であり、JavaScriptのすべてのオブジェクトには、オブジェクトのプロパティとメソッドを拡張するために使用できる[[Prototype]]と呼ばれる非表示の内部プロパティがあります。 プロトタイプの詳細については、Understanding Prototypes and Inheritance in JavaScriptチュートリアルをご覧ください。
最近まで、勤勉な開発者はconstructor functionsを使用してJavaScriptのオブジェクト指向デザインパターンを模倣していました。 ES6と呼ばれることが多い言語仕様ECMAScript 2015では、JavaScript言語にクラスが導入されました。 JavaScriptのクラスは、実際には追加の機能を提供しません。また、よりクリーンでエレガントな構文を提供するという点で、プロトタイプと継承よりも「構文糖」を提供すると言われます。 他のプログラミング言語はクラスを使用するため、JavaScriptのクラス構文により、開発者は言語間を簡単に移動できます。
クラスは関数です
JavaScriptクラスは関数の一種です。 クラスはclassキーワードで宣言されます。 関数を初期化するには関数式構文を使用し、クラスを初期化するにはクラス式構文を使用します。
// Initializing a function with a function expression
const x = function() {}// Initializing a class with a class expression
const y = class {}Object.getPrototypeOf() methodを使用して、オブジェクトの[[Prototype]]にアクセスできます。 これを使用して、作成した空のfunctionをテストしてみましょう。
Object.getPrototypeOf(x);Outputƒ () { [native code] }作成したばかりのclassでそのメソッドを使用することもできます。
Object.getPrototypeOf(y);Outputƒ () { [native code] }functionとclassで宣言されたコードは、どちらも関数[[Prototype]]を返します。 プロトタイプでは、newキーワードを使用して、任意の関数をコンストラクターインスタンスにすることができます。
const x = function() {}
// Initialize a constructor from a function
const constructorFromFunction = new x();
console.log(constructorFromFunction);Outputx {}
constructor: ƒ ()これはクラスにも当てはまります。
const y = class {}
// Initialize a constructor from a class
const constructorFromClass = new y();
console.log(constructorFromClass);Outputy {}
constructor: classこれらのプロトタイプコンストラクターの例は、それ以外は空ですが、構文の下で、両方のメソッドが同じ最終結果を達成していることがわかります。
クラスを定義する
prototypes and inheritance tutorialでは、テキストベースのロールプレイングゲームでのキャラクター作成に基づいた例を作成しました。 ここからその例を続けて、関数からクラスへ構文を更新します。
constructor functionは、関数自体を参照して、thisのプロパティとして割り当てられるいくつかのパラメーターで初期化されます。 識別子の最初の文字は慣例により大文字になります。
constructor.js
// Initializing a constructor function
function Hero(name, level) {
this.name = name;
this.level = level;
}これを以下に示すclass構文に変換すると、非常によく似た構造になっていることがわかります。
class.js
// Initializing a class definition
class Hero {
constructor(name, level) {
this.name = name;
this.level = level;
}
}コンストラクター関数は、イニシャライザーの最初の文字の大文字化（オプション）により、構文に精通していることにより、オブジェクトの設計図であることを知っています。 classキーワードは、関数の目的をより簡単に伝えます。
初期化の構文の唯一の違いは、functionの代わりにclassキーワードを使用し、constructor()メソッド内でプロパティを割り当てることです。
メソッドの定義
コンストラクター関数の一般的な方法は、以下のgreet()メソッドに示すように、初期化ではなく、メソッドをprototypeに直接割り当てることです。
constructor.js
function Hero(name, level) {
this.name = name;
this.level = level;
}
// Adding a method to the constructor
Hero.prototype.greet = function() {
return `${this.name} says hello.`;
}クラスを使用すると、この構文が簡素化され、メソッドをクラスに直接追加できます。 ES6で導入されたmethod definition shorthandを使用すると、メソッドの定義はさらに簡潔なプロセスになります。
class.js
class Hero {
constructor(name, level) {
this.name = name;
this.level = level;
}
// Adding a method to the constructor
greet() {
return `${this.name} says hello.`;
}
}これらのプロパティとメソッドの動作を見てみましょう。 newキーワードを使用してHeroの新しいインスタンスを作成し、いくつかの値を割り当てます。
const hero1 = new Hero('Varg', 1);console.log(hero1)を使用して新しいオブジェクトに関する詳細情報を出力すると、クラスの初期化で何が起こっているかについての詳細を確認できます。
OutputHero {name: "Varg", level: 1}
__proto__:
▶ constructor: class Hero
▶ greet: ƒ greet()出力では、constructor()およびgreet()関数が__proto__、またはhero1の[[Prototype]]に適用されており、のメソッドとして直接適用されていないことがわかります。 hero1オブジェクト。 コンストラクター関数を作成する場合、これは明らかですが、クラスを作成している間は明らかではありません。 クラスを使用すると、よりシンプルで簡潔な構文を使用できますが、プロセスの明確さを犠牲にします。
クラスを拡張する
コンストラクター関数とクラスの有利な機能は、親に基づいて新しいオブジェクトブループリントに拡張できることです。 これにより、類似しているが追加の機能またはより具体的な機能が必要なオブジェクトのコードの繰り返しが防止されます。
call()メソッドを使用して、親から新しいコンストラクター関数を作成できます。 以下の例では、Mageというより具体的な文字クラスを作成し、call()を使用してHeroのプロパティを割り当て、さらにプロパティを追加します。
constructor.js
// Creating a new constructor from the parent
function Mage(name, level, spell) {
// Chain constructor with call
Hero.call(this, name, level);
this.spell = spell;
}この時点で、Heroと同じプロパティを使用して、Mageの新しいインスタンスと、追加した新しいインスタンスを作成できます。
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クラスでは、親関数にアクセスするために、callの代わりにsuperキーワードが使用されます。 親クラスを参照するためにextendsを使用します。
class.js
// Creating a new class from the parent
class Mage extends Hero {
constructor(name, level, spell) {
// Chain constructor with super
super(name, level);
// Add a new property
this.spell = spell;
}
}これで、同じ方法で新しいMageインスタンスを作成できます。
const hero2 = new Mage('Lejon', 2, 'Magic Missile');hero2をコンソールに出力し、出力を表示します。
OutputMage {name: "Lejon", level: 2, spell: "Magic Missile"}
__proto__: Hero
▶ constructor: class Mageクラス構築で[[Prototype]]が親（この場合はHero）にリンクされていることを除いて、出力はほぼ同じです。
以下は、初期化、メソッドの追加、およびコンストラクター関数とクラスの継承のプロセス全体を並べて比較したものです。
constructor.js
function Hero(name, level) {
this.name = name;
this.level = level;
}
// Adding a method to the constructor
Hero.prototype.greet = function() {
return `${this.name} says hello.`;
}
// Creating a new constructor from the parent
function Mage(name, level, spell) {
// Chain constructor with call
Hero.call(this, name, level);
this.spell = spell;
}class.js
// Initializing a class
class Hero {
constructor(name, level) {
this.name = name;
this.level = level;
}
// Adding a method to the constructor
greet() {
return `${this.name} says hello.`;
}
}
// Creating a new class from the parent
class Mage extends Hero {
constructor(name, level, spell) {
// Chain constructor with super
super(name, level);
// Add a new property
this.spell = spell;
}
}構文はまったく異なりますが、基本的な結果は両方の方法でほぼ同じです。 クラスはオブジェクトの青写真をより簡潔に作成する方法を提供し、コンストラクター関数は内部で何が起こっているかをより正確に記述します。
結論
このチュートリアルでは、JavaScriptコンストラクター関数とES6クラスの類似点と相違点について学びました。 クラスとコンストラクターの両方は、プロトタイプベースの継承言語であるJavaScriptに対するオブジェクト指向の継承モデルを模倣しています。
プロトタイプの継承を理解することは、効果的なJavaScript開発者になるために最も重要です。 Reactなどの一般的なJavaScriptライブラリはclassの構文を頻繁に使用するため、クラスに精通していると非常に役立ちます。