クラスはes5ですかes6ですか?-フロントエンドQ&A-php.cn

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

青灯夜游

リリース： 2022-11-16 19:28:05

オリジナル

1740 人が閲覧しました

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

クラスはes5ですか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(&#39;123456&#39;)
	}

ログイン後にコピー

静的メソッドは、インスタンスを通じてではなく、クラス名を通じてのみ 呼び出すことができます。

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

ログイン後にコピー

2.2 静的プロパティ

static prop = 1 ;  // 静态属性

ログイン後にコピー

#静的プロパティはクラスのインスタンスではなく、クラス名を通じてのみ呼び出すことができます

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

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

ログイン後にコピー

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

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

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

let data=[1,2,3,4];  //放在类外面，属于私有变量，可以只读取
class Person{
    // 构造函数
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    get x(){
        console.log(&#39;获得name&#39;);
        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(&#39;haha&#39;,&#39;18&#39;);
  test.x="haha3";   //改变了实例化时候的x的值
  test.todoSome();  //输出：haha3的年龄是18岁。这里就已经不是实例化时候的haha了
  console.log(test.data);   //结果：打印[1,2,3,4]

ログイン後にコピー

5. 注意事項: