JavaScript にはクラスを定義する方法がありますか?-フロントエンドQ&A-php.cn

JavaScript にはクラスを定義する方法がありますか?

WBOY

リリース： 2022-06-16 17:16:28

オリジナル

1895 人が閲覧しました

JavaScript にはクラスを定義するメソッドがあります。方法: 1. コンストラクターを使用してクラスを定義します。構文は "function name() {this.name = "...";}"; 2. "Object.create()" メソッドを使用してクラスを定義します。、構文は "var name = Object.create(...);"; 3. クラスでコンストラクターを定義し、関数でインスタンスオブジェクトを定義してから、関数を再度呼び出してクラスを定義します。

JavaScript にはクラスを定義する方法がありますか?

このチュートリアルの動作環境: Windows 10 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript にはクラスを定義する方法がありますか?

JavaScript にはクラスを定義する方法があります

#JavaScript にはクラスを定義する方法が 3 つあります。 Javascript でクラスを定義する #オブジェクト指向プログラミングでは、クラスはオブジェクトのテンプレートであり、同じオブジェクトのグループ (「インスタンス」とも呼ばれます) に共通のプロパティとメソッドを定義します。

JavaScript 言語は「クラス」をサポートしていませんが、いくつかの回避策を使用して「クラス」をシミュレートできます。

1. コンストラクターメソッドこれは古典的なメソッドであり、教科書で必ず教えるべきメソッドです。コンストラクターを使用して「クラス」をシミュレートし、内部で this キーワードを使用してインスタンスオブジェクトを参照します。

　　function Cat() {
　　　　this.name = "大毛";
　　}

ログイン後にコピー

インスタンスを生成するときは、new キーワードを使用します。

　　var cat1 = new Cat();
　　alert(cat1.name); // 大毛

ログイン後にコピー

クラスの属性とメソッドは、コンストラクターのプロトタイプオブジェクトで定義することもできます。

　　Cat.prototype.makeSound = function(){
　　　　alert("喵喵喵");
　　}

ログイン後にコピー

その主な欠点は、比較的複雑で、これとプロトタイプを使用し、書くのも読むのも非常に手間がかかることです。

2. Object.create() メソッド「コンストラクターメソッド」の欠点を解決し、より便利にオブジェクトを生成するために、 Javascript 国際標準 ECMAScript の第 5 版では、新しいメソッド Object.create() が提案されています。

このメソッドを使用すると、「クラス」は関数ではなくオブジェクトになります。

　　var Cat = {
　　　　name: "大毛",
　　　　makeSound: function(){ alert("喵喵喵"); }
　　};

ログイン後にコピー

次に、new を使用せずに、Object.create() を使用してインスタンスを直接生成します。

　　var cat1 = Object.create(Cat);
　　alert(cat1.name); // 大毛
　　cat1.makeSound(); // 喵喵喵

ログイン後にコピー

現在、すべての主要ブラウザ (IE9 を含む) の最新バージョンがこのメソッドを導入しています。古いブラウザを使用している場合は、次のコードを使用して自分でデプロイできます。

　　if (!Object.create) {
　　　　Object.create = function (o) {
　　　　　　 function F() {}
　　　　　　F.prototype = o;
　　　　　　return new F();
　　　　};
　　}

ログイン後にコピー

このメソッドは「コンストラクターメソッド」よりも単純ですが、プライベートプロパティやプライベートメソッドを実装できず、インスタンスオブジェクト間でデータを共有することもできず、「クラス」のシミュレーションは十分に包括的ではありません。

3. ミニマリストメソッドオランダのプログラマー、Gabor de Mooij は、Object.create() メソッドよりも優れた新しいメソッドを提案しました。いわゆる「ミニマリストアプローチ」。これも私がオススメする方法です。

3.1 カプセル化

このメソッドは this とプロトタイプを使用せず、コードのデプロイが非常に簡単であるため、おそらく「ミニマリストメソッド」と呼ばれています。。

まず、「クラス」をシミュレートするためにオブジェクトも使用します。このクラスでは、インスタンスを生成するためのコンストラクター createNew() を定義します。

　　var Cat = {
　　　　createNew: function(){
　　　　　　// some code here
　　　　}
　　};

ログイン後にコピー

次に、createNew() でインスタンスオブジェクトを定義し、このインスタンスオブジェクトを戻り値として使用します。

　　var Cat = {
　　　　createNew: function(){
　　　　　　var cat = {};
　　　　　　cat.name = "大毛";
　　　　　　cat.makeSound = function(){ alert("喵喵喵"); };
　　　　　　return cat;
　　　　}
　　};

ログイン後にコピー

使用する場合は、createNew() メソッドを呼び出してインスタンスオブジェクトを取得します。

　　var cat1 = Cat.createNew();
　　cat1.makeSound(); // 喵喵喵

ログイン後にコピー

この方法の利点は、理解しやすく、明確で洗練された構造を持ち、従来の「オブジェクト指向プログラミング」構造に準拠しているため、次の機能を簡単に導入できることです。

3.2 継承

あるクラスに別のクラスを継承させると、実装が非常に便利になります。前者の createNew() メソッド内で後者の createNew() メソッドを呼び出すだけです。

まず、Animal クラスを定義します。

　　var Animal = {
　　　　createNew: function(){
　　　　　　var animal = {};
　　　　　　animal.sleep = function(){ alert("睡懒觉"); };
　　　　　　return animal;
　　　　}
　　};

ログイン後にコピー

次に、Cat の createNew() メソッドで、Animal の createNew() メソッドを呼び出します。

　　var Cat = {
　　　　createNew: function(){
　　　　　　var cat = Animal.createNew();
　　　　　　cat.name = "大毛";
　　　　　　cat.makeSound = function(){ alert("喵喵喵"); };
　　　　　　return cat;
　　　　}
　　};

ログイン後にコピー

この方法で取得した Cat インスタンスは、Cat クラスと Animal クラスの両方を継承します。

　　var cat1 = Cat.createNew();
　　cat1.sleep(); // 睡懒觉

ログイン後にコピー

3.3 プライベートプロパティとプライベートメソッド

createNew() メソッドでは、メソッドとプロパティが cat オブジェクトで定義されていない限り、プライベートです。。

　　var Cat = {
　　　　createNew: function(){
　　　　　　var cat = {};
　　　　　　var sound = "喵喵喵";
　　　　　　cat.makeSound = function(){ alert(sound); };
　　　　　　return cat;
　　　　}
　　}

ログイン後にコピー

上の例の内部変数 sound は外部から読み込むことができず、cat の public メソッド makeSound() を介してのみ読み込むことができます。

　　var cat1 = Cat.createNew();
　　alert(cat1.sound); // undefined

ログイン後にコピー

3.4 データ共有

すべてのインスタンスオブジェクトが同じ内部データを読み書きできるようにする必要がある場合があります。この時点では、内部データをクラスオブジェクト内および createNew() メソッドの外にカプセル化するだけです。

　　var Cat = {
　　　　sound : "喵喵喵",
　　　　createNew: function(){
　　　　　　var cat = {};
　　　　　　cat.makeSound = function(){ alert(Cat.sound); };
　　　　　　cat.changeSound = function(x){ Cat.sound = x; };
　　　　　　return cat;
　　　　}
　　};

ログイン後にコピー

次に、2 つのインスタンスオブジェクトが生成されます。

　　var cat1 = Cat.createNew();
　　var cat2 = Cat.createNew();
　　cat1.makeSound(); // 喵喵喵

ログイン後にコピー

このとき、一方のインスタンスオブジェクトが共有データを変更すると、もう一方のインスタンスオブジェクトも影響を受けます。

　　cat2.changeSound("啦啦啦");
　　cat1.makeSound(); // 啦啦啦

ログイン後にコピー

【関連する推奨事項:

JavaScript ビデオチュートリアル

、Web フロントエンド ]

以上がJavaScript にはクラスを定義する方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。