1. クラスクラスはオブジェクトを作成するためのテンプレートです。 関数 Point(x, y) { this.x = x; y = y; } Point.prototype.toString = 関数 () { '(' + this.x + ', ' + this.y + ')' を返します。 }; var p = 新しいポイント(1, 1);
次のように: クラス Point { コンストラクタ(x, y) { this.x = x; y = y; } 文字列を渡す '(' + this.x + ', ' + this.y + ')' を返します。 } } クラスのデータ型は関数であり、それ自体は関数を指すコンストラクターです。 // ES5 関数宣言 function Point() { //... } // ES6 クラス宣言 class Point { //.... コンストラクタ() { } } typeof Point // "関数" Point === Point.prototype.constructor // true クラスで定義されたメソッドは クラス Point { コンストラクタ(x, y) { this.x = x; y = y; } 文字列を渡す '(' + this.x + ', ' + this.y + ')' を返します。 } } ポイント.プロトタイプ = { //.... 文字列を変換する() } var p = 新しいポイント(1, 1); p.toString() // (1,1) クラスを定義する別の方法はクラス式を使うことである。 // 名前のない/匿名クラス let Point = class { コンストラクタ(x, y) { this.x = x; y = y; } }; Point.name // ポイント 関数宣言とクラス宣言には重要な違いがあります。関数宣言はホイストされますが、クラス宣言はホイストされません。 > let p = new Point(); // 昇格してもエラーは報告されません> function Point() {} > > let p = new Point(); // エラー、ReferenceError > クラス Point {} > 1.1 コンストラクタ() クラスには クラス Point { } // クラス Point を自動的に追加します { コンストラクタ() {} } 1.2 ゲッターとセッター
クラスユーザー{ コンストラクタ(名前) { this.name = 名前; } 名前を取得する() { this.name を返します。 } 名前(値)を設定する{ this.name = 値; } } 1.3 これクラス メソッド内の クラスユーザー{ コンストラクタ(名前) { this.name = 名前; } プリント名(){ console.log('名前は' + this.nameです) } } 定数ユーザー = 新しいユーザー('jack') user.printName() // 名前はjackです const { printName } = ユーザー; printName() // エラー 未定義のプロパティを読み取ることができません (読み取り 'name') エラーなしで個別に呼び出す場合、1 つの方法はコンストラクターで クラスユーザー{ コンストラクタ(名前) { this.name = 名前; this.printName = this.printName.bind(this); } プリント名(){ console.log('名前は' + this.nameです) } } 定数ユーザー = 新しいユーザー('jack') const { printName } = ユーザー; printName() // 名前はジャック
さらに、矢印関数内の this は常にそれが定義されているオブジェクトを参照するため、矢印関数を使用することもできます。 クラスユーザー{ コンストラクタ(名前) { this.name = 名前; } プリント名 = () => { console.log('名前は' + this.nameです) } } 定数ユーザー = 新しいユーザー('jack') const { printName } = ユーザー; printName() // 名前はジャック 1.4 静的プロパティ静的プロパティは、インスタンス オブジェクト クラスユーザー{ } ユーザー.prop = 1; ユーザー.prop // 1 1.5 静的メソッドクラス内に静的メソッドを定義できます。メソッドはオブジェクト インスタンスによって継承されず、クラスを通じて直接呼び出されます。 クラス Utils { 静的printInfo() { this.info(); } 静的情報() { コンソールにログ出力します。 } } Utils.printInfo() // こんにちは メソッドの呼び出しスコープの制限(private や public など)については、 2. 継承
継承する場合、サブクラスは クラスPoint3DはPointを拡張します{ コンストラクタ(x, y, z) { super(x, y); // 親クラスのコンストラクター(x, y)を呼び出す this.z = z; } 文字列を渡す return super.toString() + ' ' + this.z; // 親クラスのtoString()を呼び出す } } 親クラスの静的メソッドは子クラスにも継承されます。 クラス親{ 静的情報() { console.log('こんにちは世界'); } } クラスChildはParentを拡張します{ } Child.info() // こんにちは世界 2.1 スーパーキーワード
クラス 親 {} クラスChildはParentを拡張します{ コンストラクタ() { 素晴らしい(); } } サブクラスの通常のメソッドで クラス親{ コンストラクタ() { 1.x = 1; を出力します。 これ.y = 10 } 親を印刷する(){ コンソールにログ出力します。 } 印刷(){ コンソールにログ出力します。 } } クラスChildはParentを拡張します{ コンストラクタ() { 素晴らしい(); 2 を 0 にします。 } m() { スーパープリント(); } } c = new Child(); c.printParent() // 10 センチメートル() // 2 2.2 _proto_ とプロトタイプ初めて
以下はプロトタイプを持つ組み込みオブジェクトの一部です。 上記の説明に従って、次のコードを見てください var obj = {} // var obj = new Object() と同等 // obj.__proto__ は Object コンストラクタのプロトタイプを指します obj.__proto__ === Object.prototype // true // obj.toString は Object.prototype から継承されたメソッドを呼び出します obj.toString === obj.__proto__.toString // true // 配列 var arr = [] arr.__proto__ === Array.prototype // true
関数 Foo(){} var f = new Foo(); f.__proto__ === Foo.prototype // 真 Foo.__proto__ === Function.prototype // true 2.3 継承における__proto__コンストラクター関数の構文糖衣として、クラスには
クラス親{ } クラスChildはParentを拡張します{ } Child.__proto__ === Parent // true Child.prototype.__proto__ === Parent.prototype // true 2.4 継承されたインスタンス内の__proto__サブクラス インスタンスの サブクラス インスタンスの クラス親{ } クラスChildはParentを拡張します{ } var p = 新しい親(); var c = 新しい子(); c.__proto__ === p.__proto__ // 偽 c.__proto__ === Child.prototype // true c.__proto__.__proto__ === p.__proto__ // 真 3. まとめフロントエンド 以下もご興味があるかもしれません:
|
<<: docker を使用して Redis マスター/スレーブを構築する方法
クエリ書き換えプラグインMySQL 5.7.6 以降、MySQL Server は、サーバーが実行す...
いわゆる才能(左脳と右脳)つまり、芸術的な才能があるかどうかは、人間の左脳と右脳の分業によって主に決...
#mysql -uroot -pパスワードを入力してくださいmysql> show full...
Docker には 3 つの基本概念が含まれています。イメージ: Docker イメージはルート フ...
1. 新機能MySQL 5.7 はエキサイティングなマイルストーンです。デフォルトの InnoDB ...
1.v-bind(略称:)コンポーネント プロパティのデータで定義されたデータ変数を使用するか、コン...
クイックリーディングSQL ステートメントを監視する必要があるのはなぜか、監視方法と監視手段について...
Windows フォームと同様の効果を得るには、中央をドラッグして div の位置を変更し、端をド...
インストール環境: CentOS7 64ビット、MySQL5.7 1. YUMソースを設定するMyS...
以下にリストされているすべてのブログはオリジナルであり、独自にデザインされています。これらは、他者が...
Web デザインと開発は大変な作業なので、少数の人だけを対象に設計しないでください。これは外国人が...
スタイルシートの最も重要な機能の 1 つは、ページ、画面、電子シンセサイザーなどの複数のメディアに適...
Vue foreach配列を記述し、jsで配列をトラバースする方法シナリオVueでAxiosを使用し...
1. ダウンロード参考: https://www.jb51.net/softs/451120.ht...
Linux バージョンに関する情報を表示および解釈するのは、見た目よりも少し複雑です。単純なバージョ...