Js クラスの構築と継承のケースの詳細な説明

Js クラスの構築と継承のケースの詳細な説明

JS のクラスの定義や継承は本当に多様なので、別のノートブックを開いて記録しておきます。

意味

オブジェクトから派生したメソッド

1.新しいオブジェクト: オブジェクトを作成した後、プロパティとメソッドを動的に定義します。var Car = new Object;
車の色 = "赤";
Car.showColor = 関数(){
	コンソールにログ出力します。
}
//継承する場合は、まず空のオブジェクトを作成し、次に__proto__プロトタイプチェーンを使用して継承する必要があります。var Car1 = new Object; //または = {}
Car1.__proto__ = 車;

関数構造の使用

1. ファクトリ関数: 関数内でクラスを生成します。利点は、空のオブジェクトを構築したり、プロトタイプチェーンを継承したりする必要がなく、コンストラクター関数 createCar(){ と同様に、オブジェクトのコピーを直接返すことです // この関数にパラメータ creatCar(color) を渡すこともできます
	車 = 新しいオブジェクト;
	car.color = "red"; // パラメータを渡す: car.color = color
	car.showColor = 関数(){
		コンソールにログ出力します。
	}
	車を返却する;
}

var newCar = createCar(); // パラメータを渡す: createCar("red")
//ただし、ファクトリ関数を使用すると、関数を構築するたびに showColor メソッドを構築することになり、コスト効率が悪くなります。 //したがって、クラスのファクトリ関数の前に、すべてのクラスの継承メソッドを定義できます。 function showColor(){
	コンソールにログ出力します。
}
関数createCar(){
...
	car.showColor = showColor;
...
}

2. コンストラクター メソッド: ファクトリー関数メソッドと同様に、コンストラクター メソッドを使用します。違いは、コンストラクタ内の属性はthis.attrのみであることです。
関数Car(色,数値){
	this.color = 色;
	this.num = num;
	this.showColor = 関数(){
		コンソールにログ出力します。
	}
	this.drivers = 新しい配列("mike");
}
var car1 = new Car("red",1); //Car 自体のプロパティとメソッドには現時点ではアクセスできないことに注意してください。インスタンス化後にのみアクセスできます。 //例: console.log(new Car("red",1).color)
					 //これは、コンストラクターがインスタンス化されたオブジェクトではなく、実際にはクラスのようなコンストラクターであり、js には関数オブジェクトだけでなく従来の意味でのオブジェクトもあることを意味します。//方法 1 と同様に、Car クラスの showColor 関数は構築されるたびに構築され、不要なスペースを占有します。var car2 = new Car("green",1);
car1.drivers.push("キキ");
console.log(car2.drivers); //同じ配列を参照する現象はありません 3. プロトタイプ方式: オブジェクトの派生と同様に、オブジェクトに基づいてプロトタイプ チェーンを形成し、メソッドとプロパティをバインドします function Car(){};
Car.prototype.color = "赤";
Car.prototype.showColor = 関数(){
		コンソールにログ出力します。
}
//Car.prototyoe = { // 複数のバインドされた関数を匿名クラスに入れて記述します // mathod1:function(){...};
// mathod2:function(){...};
//
Car.prototype.drivers = 新しい配列("mike","jhon");
var car1 = new Car(); //プロパティにアクセスするためのメソッドを呼び出すにはインスタンスを作成する必要があります var car2 = new Car();
car1.drivers.push("請求書");
コンソールにログ出力します。
コンソールにログ出力します。
//このように、バインドされた配列のすべての属性は同じ配列オブジェクトを指し、参照になります。 1 つのインスタンスの色を変更すると、すべての色が同時に変更されます。

ハイブリッドアプローチ:

1. コンストラクタ + プロトタイプ: コンストラクタはプロパティとクラス内配列のみを構築し、プロトタイプを使用してクラス内関数を宣言します。function Car(color){
	this.color = 色;
	this.drivers = 新しい配列("mike");
}
Car.prototype.showColor = 関数(){
	コンソールにログ出力します。
}
var car1 = new Car(); //プロパティにアクセスするためのメソッドを呼び出すにはインスタンスを作成する必要があります var car2 = new Car();
car1.drivers.push("請求書");
console.log(car2.drivers); //プロトタイプ メソッド 2 の欠点を回避します。クラス キーワードを使用してクラスを定義します。クラスの外部でプロパティを直接定義することはできず、クラス外部の関数オブジェクトをバインドするにはプロトタイプ メソッドを使用する必要があります。
クラスCar{
           コンストラクタ(色) {
                this.color = 色;
           }
           ドライバー = 新しい配列 ("mike","jhon");
           こんにちは = 関数(){
           		"Di Di"+ this.color を返します。 
           }
           
        }

Car.prototype.hello = function (){ //クラスバインディングメソッドの外側 return "Di Di";
}

var car1 = 新しい車("赤");
var car2 = new Car("green");
car1.drivers.push("キキ");
コンソールにログ出力します。
コンソールにログ出力します。

要約すると、クラス内で変数が定義されている場合、インスタンスが構築されるときにコンストラクターが呼び出されますが、クラス外部にバインドされたメソッドとプロパティは参照形式になり、構築には参加せず、直接呼び出されます。同時に、機密性を保ち、情報を隠すのにも便利です。

継承する

1. 継承を装う: クラスを新しいクラスのコンストラクターとして継承します。これは少し魔法のようです。js では、クラスは関数オブジェクトの奇妙なプロパティと見なすことができます。function Car1(color){
	this.color = 色;
	this.showColor = 関数(){
		console.log("この車は "+this.color);
	}
	this.drivers = 新しい配列("mike");
}

関数Car2(){
	this.makeSound = 関数(){
		console.log("ディディ");
	}
}

関数Car3(色){
	this.newConstruct = Car1; // コンストラクターとして渡す this.newConstruct(color); // コンストラクターを呼び出す delete this.newConstruct;
	this.newConstruct2 = Car2; // 多重継承ですが、クロージャ メカニズムのため、異なるコンストラクタ名を使用する必要があります this.newConstruct2(); 
	this.newConstruct2 を削除します。
}//同様に、偽の継承でも .prototype を使用してコンストラクターをバインドできます var car1 = new Car3("red");
var car2 = new Car3("緑");
car1.drivers.push("キキ");
コンソールにログ出力します。
car1.showColor();
car1.makeSound();
コンソールにログ出力します。

2. 親クラスのメソッド呼び出しを使用して、関数Car1(color){を継承します。
	this.color = 色;
	this.showColor = 関数(){
		console.log("この車は"+this.color);
	}
}
関数Car2(数値){
	this.num = num;
	this.makeSound = 関数(){
		console.log("ディディ");
	}
}

関数Car3(色,数値){
	Car1.call(これ、色);
	Car2.apply(this, augments); //augmentsは必要なパラメータを含む配列です}

var car1 = new Car3("赤",1);
var car2 = new Car3("green",2);
コンソールにログ出力します。
console.log(車2の番号);
car1.showColor();
car1.makeSound();

// .apply と .call をクラスの外に書くこともできますが、これらはインスタンスに対してのみ動作し、クラスの構築には使用できません。 3. 継承にプロトタイプ チェーンを使用する: __proto__ と .prototype を使用してプロトタイプ チェーンを構築します。欠点は、多重継承が実現できないことです。多重継承は、コンストラクターにバインドするか、複数のクラスを作成して連鎖的に継承することによってのみ実現できます。 function Car1(color){
	this.color = 色;
	this.showColor = 関数(){
		console.log("この車は"+this.color);
	}
}
関数 Car3(){};
Car3.プロトタイプ = 新しい Car1();

4. class...extends... を使用すると継承も実装できますが、多重継承は実装できません。プロトタイプチェーンのように複数のクラスをノードとして使用することでのみ多重継承を実装できます。これは ES6 の機能です。 ES6ではlet、public、private、protectedキーワードも導入されましたが、多重継承を実装できず、パッケージの概念もありません。これもかなり奇妙です。class Car2 extends Car1{
           コンストラクタ(色) {
                super(); //Java と同様に、super 自体が親クラスを表すことができます。ここでは、親クラスを表すために使用されます。//コンストラクター this.color = color;
           }
           ドライバー = 新しい配列 ("mike","jhon");
           こんにちは = 関数(){
           		"Di Di"+ this.color を返します。 
           }  
        }

5. 変数パラメータのカプセル化関数 extend (自分で実装する必要があります) を使用して、複数のクラスの連鎖継承を順番に実装します。 extend(A,B,C)、B ノードは A を継承し、C は B を継承します (実際にはチェーン メソッドのままですが、わかりやすくするためにカプセル化されています。これは、Zhihu のボス Xiaohong と csdn のボス Yuben からの回答です。 https://blog.csdn.net/sysuzhyupeng/article/details/54846949 Zhihu の書き方は理解しにくいです)。重要なのは、クラスの特性を関数や戻り値として使うことです

したがって、通常の状況では、クラスまたはコンストラクター + プロトタイプを使用してクラスを作成し、 class...extends...を使用してクラスを継承するか、メソッドcall 。ファクトリメソッドと継承について学びます。

オーバーロードについては、クラスと同様に不完全であり、augmentations.length を使用して自分で実装することしかできないため、詳しく説明しません。

Js クラスの構築と継承のケースに関するこの記事はこれで終わりです。Js クラスの構築と継承に関する詳細な内容については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript クラス継承の複数の実装方法
  • js クラスの継承定義と使用法の分析
  • JS 継承の分類、原則、使用法について深く理解するには 15 分かかります。
  • JavaScript のコンストラクター、プロトタイプ、プロトタイプ チェーン、new についてどれくらい知っていますか?
  • JS 関数とコンストラクタを簡単に理解する
  • JavaScript の知識: コンストラクタも関数である
  • JavaScript のクラス、継承、コンストラクタの詳細な説明

<<:  Linuxでディレクトリを効率的に切り替える方法

>>:  MySQLのイベントスケジューラEVENTを理解する

推薦する

Vue3 ベースのフルスクリーン ドラッグ アップロード コンポーネント

この記事は主に、みんなで共有できるVue3ベースのフルスクリーンドラッグアップロードコンポーネントを...

Flexレイアウトを使用してヘッドの固定コンテンツ領域のスクロールを実現する方法

ページ ヘッダーの固定レイアウトは、以前は position:fixed を使用して実装されていまし...

MySQL の concat 関数についての簡単な説明。MySQL でフィールドの前または後に文字列を追加する方法

MySQL で concat 関数を使用する方法: CONCAT(文字列1、文字列2、…)戻り値は、...

Linux環境でOpenSSL証明書を生成する

1. 環境: CentOS7、OpenSSL1.1.1k。 2. コンセプト:ルート証明書: サーバ...

画像を読み込むための JavaScript キャンバス

この記事では、画像を読み込むためのJavaScriptキャンバスの具体的なコードを参考までに紹介しま...

経験者のHTMLの書き方と理由の分析

1. ナビゲーション: 順序なしリストとその他のラベル要素ナビゲーションを記述するために最も一般的に...

MySQL テーブルにはどのくらいの量のデータを保存できますか?

プログラマーは MySQL を扱う機会が多く、毎日触れているとも言えますが、MySQL テーブルには...

モバイル開発におけるHTML5開発の現状を深く理解する

「私たちは次の一連のモバイル製品を HTML5 で作成しています。」 「ええ、最近は多くの人が Ap...

CentOS7 環境で gcc (バージョン 10.2.0) をアップグレードする詳細な手順

目次簡単な紹介1. 現在のgccバージョンを確認する2. gccインストールパッケージ(バージョン1...

jQuery ベースのカレンダー効果

この記事では、カレンダー効果を実現するためのjQueryの具体的なコードを例として紹介します。具体的...

vue3+threejs を使用して iView 公式サイトのビッグウェーブ特殊効果の例を模倣する

目次序文1. レンダリング2. コード3. 背景画像素材要約する序文Threejs は、Web ベー...

MySQL の文字セットの不一致によって発生する異常な接続テーブルの解決方法

目次1. 解決策2. MySQLの文字セット文字セット検証ルール次のように簡単なテーブルクエリを実行...

Vue3 の動的コンポーネントはどのように機能しますか?

目次1. コンポーネントの登録1.1 グローバル登録1.2 グローバルコンポーネントの登録プロセス1...

MySQL 5.0.96 for Windows x86 32 ビット グリーン簡易版インストール チュートリアル

MySQL 5.0 は、いくつかの「高度な機能」があるため定番となっています。これは、Windows...

Linux で SpringBoot jar プログラム デプロイメント シェル スクリプトを起動および停止する方法

では早速、コードをお見せしましょう。具体的なコードは次のとおりです。 #!/bin/bash cd ...