概要
ES6ではオブジェクト指向（注：JavaScriptは本来オブジェクトベースの言語です）言語に近い書き方を提供しており、オブジェクトのテンプレートとしてクラス（class）が導入されており、クラスはclassキーワードによって定義されています。
クラスの本質は機能です。
これは糖衣構文とみなすことができ、オブジェクト プロトタイプの記述をより明確にし、オブジェクト指向プログラミングの構文に近づけます。ほとんどの機能は ES5 で実現できますが、新しいクラスの記述方法は、オブジェクトのプロトタイプの記述方法をより明確にし、オブジェクト指向プログラミングの構文に近づけるだけです。
クラスの基本構文
// 定义类
class Baby {
constructor(name, age) {
this.name = name;
this.age = age;
}
kill() {
return `${
this .name} like smile`
}
}
//创建对象
var bobi = new Baby("bobi", 1);
console.log(bobi);
// 调用方法
console.log(bobi.kill());
- 上記のコードは「クラス」を定義しており、その中にコンストラクター メソッド (コンストラクター メソッド) があり、 this キーワードがインスタンス オブジェクトを表していることがわかります。つまり、ES5 のコンストラクター Baby は、ES6 Baby クラスのコンストラクター メソッドに対応します。
- 上記の Baby クラスでは、構築メソッドに加えて、kill メソッドも定義されていることがわかります。クラスのメソッドを定義するときに、キーワード関数を追加する必要はありません。定義を入れるだけです。メソッド間にカンマを追加しないでください。エラーが報告されます。
ご覧のとおり、エディターはここでエラーを直接報告します。 - クラスを使用するには新しいメソッドを使用する必要があることにも注意してください。これは ES5 より前とは異なります。
var bobi = new Baby("bobi", 1);//这里正常
var lilm = Baby("lilm", 2)// Uncaught TypeError: Class constructor Baby cannot be invoked without 'new'
プロジェクトで新しいメソッドを使用しない場合は、クラスの使用を避けるように注意する必要があります;
4. もう 1 つの注意点は、クラスを繰り返し宣言しないことです。そうしないと、エラーが報告されます。
class MM {
}
class MM {
}
重複した宣言は許可されません
。 5. クラス定義は昇格されません。つまり、アクセスする前にクラスを定義する必要があります。定義しないとエラーが報告されます。
6. クラスは列挙可能ではありません
for (var key in Baby) {
console.log(key); // 没有任何内容打印出来
}
constructor 方法
コンストラクター メソッドはクラスのデフォルト メソッドであり、このオブジェクトを作成した配列関数への参照を返します。クラスにはコンストラクター メソッドが必要です。明示的に定義されていない場合は、デフォルトで空のコンストラクター メソッドが追加されます。
コンストラクター メソッドはデフォルトでインスタンス オブジェクトを返しますが、コンストラクター メソッドが複合型を返す場合はこれを変更できます。
// 定义类
class Baby {
constructor(name, age) {
this.name = name;
this.age = age;
// return 111; //返回Baby {name: "bobi", age: 1}
// return "asdfasd"; //返回Baby {name: "bobi", age: 1}
// return false; //返回Baby {name: "bobi", age: 1}
// return [1, 2] //返回[1,2]
// return {
// name: "111"
// } //返回{name:"111"}
return function fn() {
console.log(11);
} //返回函数
}
kill() {
return `${
this .name} like smile`
}
}
//创建对象
var bobi = new Baby("bobi", 1);
console.log(bobi);
コンストラクターと通常のコンストラクターの違い: クラスのコンストラクターは new を使用せずに呼び出すことはできず、エラーが報告されます。これは、new なしで実行できる通常のコンストラクターとの大きな違いです。
上にはデモがありますが、ここにはありません。
静的キーワード
クラスは、static キーワードを使用して静的メソッドを定義します。静的メソッドはクラスのインスタンスで呼び出すことはできませんが、クラス自体を通じて呼び出す必要があります。
class Baby {
constructor(name, age) {
this.name = name;
this.age = age;
}
kill() {
return `${
this .name} like smile`
}
static mama = "lucy"
}
//创建对象
var bobi = new Baby("bobi", 1);
console.log(Baby.mama);
console.log(bobi.mama);
これはクラス自体が呼び出される場合にのみ使用でき、new から呼び出されるインスタンス化されたオブジェクトは定義されません。
- 静的メソッドは、 this キーワードを使用して、同じクラス内の他の静的メソッドを呼び出します。
// 定义类
class Baby {
constructor(name, age) {
this.name = name;
this.age = age;
}
kill() {
return `${
this .name} like smile`
}
static mama = "lucy";
static father = this.mama + " honey"
}
console.log(Baby.father);//lucy honey
- 非静的メソッドでは、this キーワードを直接使用して静的メソッドにアクセスすることはできません。代わりに、呼び出すクラス名を使用してください。
class Baby {
constructor(name, age) {
this.name = name;
this.age = age;
console.log(Baby.mama);
console.log(this.constructor.father);
//this指向新new出来的对象 this.constructor指向类
console.log(this.constructor);
}
kill() {
return `${
this .name} like smile`
}
static mama = "lucy";
static father = this.mama + " honey"
}
var boby = new Baby("boby", 1)
要約する
この記事はここで終わります。追加がある場合は、コメント欄に追加してください。役に立った場合は、いいねしてください〜