クラスはes5ですかes6ですか?

クラスはes6の新機能です。 ES6 では、クラス (クラス) がオブジェクトのテンプレートとして導入され、class キーワードを通じてクラスを定義できるようになりました。新しいクラス記述方法により、オブジェクト プロトタイプの記述がより明確になり、オブジェクト指向プログラミングの構文に似たものになります。理解できる。クラスは ECMAScript の新しい基本的な糖衣構文構造です。ES6 クラスは正式なオブジェクト指向プログラミングをサポートしているように見えますが、実際には依然としてプロトタイプとその背後にあるコンストラクターの概念を使用しており、オブジェクト プロトタイプの記述方法が明確になっています。

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

クラスはes6の新機能です。 ES6ではオブジェクトのテンプレートとしてclass(クラス)が導入され、classキーワードを通じてクラスを定義できるようになりました。

ES6 は従来の言語に近い記述方法を提供しており、新たに導入された class キーワードはクラスを形式的に定義する機能を備えています。クラスは ECMAScript の新しい基本的な糖衣構文構造です。ECMAScript 6 クラスは正式なオブジェクト指向プログラミングをサポートしているように見えますが、実際には、依然としてプロトタイプとその背後にあるコンストラクターの概念を使用しており、オブジェクト プロトタイプの記述方法がより明確になり、より多くのことを実現できます。オブジェクト指向プログラミングの構文のようなものです。

1. クラスの概要

従来の 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;

2. 静的メソッドと静的プロパティ

静的メソッドと静的プロパティは、static キーワード

#を使用するプロパティとメソッドです。

##2.1 静的メソッド

static classMethod(){
		console.log('123456')
	}

静的メソッドはサブクラスに継承されず、サブクラスはこの中で
• 静的メソッドを呼び出すことはできませんクラスのインスタンスではなく、クラスを指します。したがって、
• 静的メソッドは、インスタンスを通じてではなく、クラス名を通じてのみ 呼び出すことができます。

let p = new Point();
p.classMethod();  // 报错

2.2 静的プロパティ

static prop = 1 ;  // 静态属性

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

class は extends キーワードを使用して

ES6 継承を継承できますが、サブクラス コンストラクターでは super() を使用する必要があります。 ES6 の継承では、最初に親クラスのインスタンス オブジェクトの属性とメソッドが this に追加され、次にサブクラスのコンストラクターを呼び出してこれを変更するためです。
• サブクラスがコンストラクター メソッドを定義していない場合、super() はデフォルト
• サブクラスを追加すると、親クラスのメソッドとプロパティが継承されますが、静的メソッドとプロパティは、サブクラス

• import classtest from "./classtest";  //先引入父类
  class Man extends classtest{
      constructor(x,y){   //构造函数尽量与父类参数保持一致
          super();   //利用super()关键字，这个必须放在子类构造函数中的第一位置
          this.x = x;
          this.y = y;
      }
  }
  export default  Man;

• のクラス名を通じて呼び出す必要があります。 4. クラス 値関数 getter と値格納関数 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]

5. 注意事項:

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

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

[推奨学習:

JavaScript 上級チュートリアル

]

以上がクラスはes5ですかes6ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。