ES6 でクラスの知識ポイントを要約して整理する
この記事では、javascript に関する関連知識を提供します。主にクラス class に関する関連問題を紹介します。ES6 ではクラス class の概念が導入され、クラスは class キーワードを通じて定義できます。これはオブジェクトです私たちが通常理解しているものにより近い、 - 指向の言語です。見てみましょう。皆さんのお役に立てれば幸いです。
[関連する推奨事項: JavaScript ビデオ チュートリアル、Web フロントエンド]
クラスの紹介
従来の JS には、クラスではなくオブジェクトの概念しかありません。これは、JS がプロトタイプに基づくオブジェクト指向言語であり、プロトタイプ オブジェクトの特性がすべてのプロパティを新しいオブジェクトと共有することであるためです。
ES6 では、クラスの概念が導入されています。クラスは、class キーワードを通じて定義できます。これは、私たちが通常理解しているものにより近いオブジェクト指向言語です。
class Person{ //定义一个名为Person的类 // 构造函数,用来接受参数 constructor(x,y){ this.x = x; //this代表的是实例对象 this.y = y; } todoSome(){ //这是个类的方法,不需要加function,有多个方法也不用逗号隔开 alert(this.x + "的年龄是" +this.y+"岁"); } } export default Person;
静的メソッドと静的プロパティ
静的メソッドと静的プロパティは、static キーワードを使用するプロパティとメソッドです
# #静的メソッドstatic classMethod(){
console.log('123456')
}
ログイン後にコピー
static classMethod(){ console.log('123456') }
- 静的メソッドはサブクラスに継承されず、サブクラスは呼び出すことができません静的メソッドのこれは、インスタンスではなくクラス クラスを指しますクラスの。したがって、
- 静的メソッドは、インスタンスではなく、クラス名を通じてのみ 呼び出すことができます。
let p = new Point(); p.classMethod(); // 报错
静的プロパティstatic prop = 1 ; // 静态属性
ログイン後にコピー
static prop = 1 ; // 静态属性
- 静的プロパティをサブクラスに継承することはできず、サブクラスから静的プロパティを呼び出すこともできません静的プロパティは、クラスのインスタンスではなく、クラス名を通じてのみ呼び出すことができます
- class は extends キーワードを使用してES6 継承を継承できます。また、サブクラス コンストラクターで super() を使用する必要があります。 ES6 の継承では、最初に親クラスのインスタンス オブジェクトの属性とメソッドが this に追加され、次にサブクラスのコンストラクターを呼び出してこれを変更するためです。サブクラスがコンストラクター メソッドを定義していない場合、super() はデフォルト サブクラスを追加すると、親クラスのメソッドとプロパティが継承されますが、値関数 getter と を呼び出すには、サブクラスのクラス名を通じて静的メソッドとプロパティを呼び出す必要があります。
import classtest from "./classtest"; //先引入父类 class Man extends classtest{ constructor(x,y){ //构造函数尽量与父类参数保持一致 super(); //利用super()关键字,这个必须放在子类构造函数中的第一位置 this.x = x; this.y = y; } } export default Man;
let data=[1,2,3,4]; //放在类外面,属于私有变量,可以只读取 class Person{ // 构造函数 constructor(x,y){ this.x = x; this.y = y; } get x(){ console.log('获得name'); return this._name; //get读取属性 } set x(x){ console.log("设置name"); this._name=x; //set给属性赋值 } get data(){ return data; //只读属性,属性返回的值只能是私有变量 } todoSome(){ alert(this.x + "的年龄是" +this.y+"岁"); } static dayin(){ alert("dayin"); } } export default Person;
使用方法:
var test= new this.$myutils.classtest('haha','18'); test.x="haha3"; //改变了实例化时候的x的值 test.todoSome(); //输出:haha3的年龄是18岁。这里就已经不是实例化时候的haha了 console.log(test.data); //结果:打印[1,2,3,4]
JavaScript ビデオ チュートリアル 、Web フロントエンド ]
以上がES6 でクラスの知識ポイントを要約して整理するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック

ES6 では、配列オブジェクトの reverse() メソッドを使用して、配列の反転を実現できます。このメソッドは、配列内の要素の順序を逆にして、最後の要素を最初に、最初の要素を最後に配置するために使用されます。構文「array」 。逆行する()"。 reverse() メソッドは元の配列を変更します。変更したくない場合は、拡張演算子 "..." とともに使用する必要があり、構文は "[...array].reverse() 」。

非同期はes7です。 async と await は ES7 に新しく追加されたもので、非同期操作のソリューションです。async/await は co モジュールとジェネレーター関数の糖衣構文と言え、より明確なセマンティクスで JS 非同期コードを解決します。名前が示すように、async は「非同期」を意味します。async は関数が非同期であることを宣言するために使用されます。async と await の間には厳密な規則があります。両方を互いに分離することはできず、await は async 関数内でのみ記述できます。

手順: 1. 構文 "newA=new Set(a); newB=new Set(b);" を使用して、2 つの配列をそれぞれセット型に変換します; 2. has() と filter() を使用して差分セットを検索します、構文 " new Set([...newA].filter(x =>!newB.has(x)))" では、差分セット要素がセット コレクションに含まれて返されます。 3. 配列を使用します。 from セットを配列に変換するタイプ、構文は「Array.from(collection)」です。

ブラウザの互換性のため。 ES6 は JS の新しい仕様として、多くの新しい構文と API を追加していますが、最新のブラウザーは ES6 の新機能を高度にサポートしていないため、ES6 コードを ES5 コードに変換する必要があります。 WeChat Web 開発者ツールでは、デフォルトで babel が使用され、開発者の ES6 構文コードを 3 つの端末すべてで適切にサポートされる ES5 コードに変換し、開発者がさまざまな環境によって引き起こされる開発上の問題を解決できるようにします。プロジェクト内でのみ設定して確認するだけです。 「ES6~ES5」オプション。

es5 では、for ステートメントと IndexOf() 関数を使用して配列の重複排除を実現できます。構文 "for(i=0;i<配列長;i++){a=newArr.indexOf(arr[i]);if( a== -1){...}}」。 es6 では、スプレッド演算子 Array.from() および Set を使用して重複を削除できます。まず配列を Set オブジェクトに変換して重複を削除してから、スプレッド演算子または Array.from() 関数を使用する必要があります。 Set オブジェクトを配列に変換してグループ化するだけです。

es6 では、一時的なデッド ゾーンは構文エラーであり、ブロックを閉じたスコープにする let および const コマンドを指します。コード ブロック内では、let/const コマンドを使用して変数が宣言される前に、変数は使用できず、変数が宣言される前は変数の「デッド ゾーン」に属します。これは構文上「一時デッド ゾーン」と呼ばれます。 ES6 では、一時的なデッド ゾーンや let ステートメントや const ステートメントでは変数のプロモーションが発生しないことを規定しています。これは主に実行時エラーを減らし、変数が宣言される前に使用されて予期しない動作が発生するのを防ぐためです。

いいえ、require は CommonJS 仕様のモジュール構文であり、es6 仕様のモジュール構文は import です。 require は実行時にロードされ、import はコンパイル時にロードされます。require はコード内のどこにでも記述できます。import はファイルの先頭にのみ記述でき、条件文や関数スコープでは使用できません。モジュール属性は導入されるだけです。 require を実行した場合、そのためパフォーマンスは比較的低くなりますが、インポート コンパイル中に導入されたモジュールのプロパティのパフォーマンスはわずかに高くなります。

地図は注文済みです。 ES6 のマップ タイプは、多くのキーと値のペアを格納する順序付きリストです。キー名と対応する値はすべてのデータ型をサポートします。キー名の等価性は、「Objext.is()」メソッドを呼び出すことによって決定されます。 , したがって、数字の 5 と文字列「5」は 2 つのタイプとして判断され、プログラム内で 2 つの独立したキーとして現れることができます。
