目次
クラスの紹介
静的メソッドと静的プロパティ
static prop = 1 ;  // 静态属性
ログイン後にコピー
" >静的プロパティ
static prop = 1 ;  // 静态属性
ログイン後にコピー
ホームページ ウェブフロントエンド jsチュートリアル ES6 でクラスの知識ポイントを要約して整理する

ES6 でクラスの知識ポイントを要約して整理する

Aug 08, 2022 pm 03:09 PM
es6

この記事では、javascript に関する関連知識を提供します。主にクラス class に関する関連問題を紹介します。ES6 ではクラス class の概念が導入され、クラスは class キーワードを通じて定義できます。これはオブジェクトです私たちが通常理解しているものにより近い、 - 指向の言語です。見てみましょう。皆さんのお役に立てれば幸いです。

ES6 でクラスの知識ポイントを要約して整理する

[関連する推奨事項: 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')
	}
ログイン後にコピー

    静的メソッドはサブクラスに継承されず、サブクラスは呼び出すことができません
  • 静的メソッドのこれは、インスタンスではなくクラス クラスを指しますクラスの。したがって、
  • 静的メソッドは、インスタンスではなく、クラス名を通じてのみ 呼び出すことができます。
  • let p = new Point();
    p.classMethod();  // 报错
    ログイン後にコピー

静的プロパティ
static prop = 1 ;  // 静态属性
ログイン後にコピー

    静的プロパティをサブクラスに継承することはできず、サブクラスから静的プロパティを呼び出すこともできません
  • 静的プロパティは、クラスのインスタンスではなく、クラス名を通じてのみ呼び出すことができます
クラスInherit extends

    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;
    ログイン後にコピー
class 値ストアド関数 setter

getter および setter は、値を読み取ってクラスの属性に転送するために使用されます。

値関数ゲッターとストレージ関数セッターは、割り当てと値の動作をカスタマイズできます。プロパティにゲッターのみがあり、セッターがない場合、プロパティは読み取り専用プロパティとなり、値を割り当てることも、値を割り当てることもできません。初めて初期化することはできますか?

変数がプライベートとして定義されている場合 (クラスの中括弧の外側で定義されている場合)、セッターなしでゲッターのみを使用できます。

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]
ログイン後にコピー
注:

1. クラス内でメソッドを定義する場合、関数キーワードをメソッドに追加することはできません。これは、JS のコンストラクターが 2 つで区切られた関数によって定義されているためです。

2. すべてのメソッドをカンマで区切らないでください。カンマで区切ると、エラーが報告されます。

【関連する推奨事項:

JavaScript ビデオ チュートリアル Web フロントエンド ]

以上がES6 でクラスの知識ポイントを要約して整理するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

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

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

ES6 で配列を反転する方法 ES6 で配列を反転する方法 Oct 26, 2022 pm 06:19 PM

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

非同期は es6 または es7 用ですか? 非同期は es6 または es7 用ですか? Jan 29, 2023 pm 05:36 PM

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

es6 の 2 つの配列で異なる項目を見つける方法 es6 の 2 つの配列で異なる項目を見つける方法 Nov 01, 2022 pm 06:07 PM

手順: 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 を es5 に変換する必要があるのはなぜですか? ミニ プログラムで es6 を es5 に変換する必要があるのはなぜですか? Nov 21, 2022 pm 06:15 PM

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

es5 および es6 で配列重複排除を実装する方法 es5 および es6 で配列重複排除を実装する方法 Jan 16, 2023 pm 05:09 PM

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 の一時的なデッドゾーンとは何を意味しますか? es6 の一時的なデッドゾーンとは何を意味しますか? Jan 03, 2023 pm 03:56 PM

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

es6 構文が必要ですか? es6 構文が必要ですか? Oct 21, 2022 pm 04:09 PM

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

es6 マップは注文されていますか? es6 マップは注文されていますか? Nov 03, 2022 pm 07:05 PM

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

See all articles