ES6 はクラスをどのように定義しますか?

ES6ではオブジェクトのテンプレートとしてclass(クラス)が導入され、「class」キーワードでクラスを定義できるようになりました。クラスの本質は関数であり、糖衣構文とみなすことができ、オブジェクト プロトタイプの記述をより明確にし、オブジェクト指向プログラミングの構文に近づけます。

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

ES6 クラス

ES6 では、クラス (class) がオブジェクトのテンプレートとして導入され、「class」キーワードを通じて定義できます。親切。

クラスの本質は関数です。

基本的に、ES6 クラスは単なる構文上の糖衣と見なすことができます。その機能のほとんどは ES5 で実現できます。新しいクラスの記述方法は、オブジェクト プロトタイプの記述方法をより明確かつオブジェクト指向にするだけです。単なるプログラミング構文です。

#基本的な使用法

クラス定義

クラス式は匿名または名前を付けることができます。

// 匿名类
let Example = class {
    constructor(a) {
        this.a = a;
    }
}
// 命名类
let Example = class Example {
    constructor(a) {
        this.a = a;
    }
}

クラス宣言

class Example {
    constructor(a) {
        this.a = a;
    }
}

注: 反復可能な宣言は許可されません。

class Example{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been 
// declared
 
let Example1 = class{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been 
// declared

注:

クラス定義は昇格されません。つまり、アクセスする前にクラスを定義する必要があります。そうしないと、エラーが報告されます。

クラス内のメソッドには function キーワードは必要ありません。

メソッド間にセミコロンを追加することはできません。

new Example(); 
class Example {}

クラスの本体

属性

プロトタイプ

ES6 Medium 、プロトタイプはまだ存在します。メソッドはクラスから直接定義できますが、実際にはメソッドはまだプロトタイプで定義されています。初期化中にメソッドをオーバーライド/メソッドを追加

Example.prototype={
    //methods
}

メソッドを追加

Object.assign(Example.prototype,{
    //methods
})

静的属性

静的属性: クラス自体の属性、つまりクラス内で直接定義された属性 ( Class.propname )、インスタンス化は必要ありません。 ES6 では、クラス内には静的メソッドのみが存在し、静的属性は存在しないと規定されています。

class Example {
// 新提案
    static a = 2;
}
// 目前可行写法
Example.b = 2;

パブリック プロパティ

class Example{}
Example.prototype.a = 2;

インスタンス プロパティ

インスタンス プロパティ: インスタンス オブジェクト (これ) で定義されたプロパティ。

class Example {
    a = 2;
    constructor () {
        console.log(this.a);
    }
}

name 属性

クラス (存在する場合) に続くクラス名を返します。

let Example=class Exam {
    constructor(a) {
        this.a = a;
    }
}
console.log(Example.name); // Exam
 
let Example=class {
    constructor(a) {
        this.a = a;
    }
}
console.log(Example.name); // Example

メソッド

コンストラクター メソッド

コンストラクター メソッドは、クラスのデフォルトのメソッドであり、クラスのインスタンス化されたオブジェクトを作成するときに呼び出されます。

class Example{
    constructor(){
      console.log('我是constructor');
    }
}
new Example(); // 我是constructor

戻りオブジェクト

class Test {
    constructor(){
        // 默认返回实例对象 this
    }
}
console.log(new Test() instanceof Test); // true
 
class Example {
    constructor(){
        // 指定返回对象
        return new Test();
    }
}
console.log(new Example() instanceof Example); // false

静的メソッド

class Example{
    static sum(a, b) {
        console.log(a+b);
    }
}
Example.sum(1, 2); // 3

プロトタイプ メソッド

class Example {
    sum(a, b) {
        console.log(a + b);
    }
}
let exam = new Example();
exam.sum(1, 2); // 3

インスタンス メソッド

class Example {
    constructor() {
        this.sum = (a, b) => {
            console.log(a + b);
        }
    }
}

クラス

#new

#クラスのインスタンス化は、new キーワードを使用してインスタンス化する必要があります。

class Example {}
 
let exam1 = Example(); 
// Class constructor Example cannot be invoked without 'new'

インスタンス化されたオブジェクト

共有プロトタイプ オブジェクト

class Example {
    constructor(a, b) {
        this.a = a;
        this.b = b;
        console.log('Example');
    }
    sum() {
        return this.a + this.b;
    }
}
let exam1 = new Example(2, 1);
let exam2 = new Example(3, 1);
 
// __proto__ 已废弃，不建议使用
// console.log(exam1.__proto__ == exam2.__proto__); 
 
console.log(Object.getPrototypeOf(exam1) === Object.getPrototypeOf(exam2));// true
 
Object.getPrototypeOf(exam1).sub = function() {
    return this.a - this.b;
}
console.log(exam1.sub()); // 1
console.log(exam2.sub()); // 2

[関連する推奨事項:

JavaScript ビデオ チュートリアル

、Web フロント終わり＃＃＃】＃＃＃

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