es6クラスは関数ですか?

es6 クラスは関数です。 es6 では、オブジェクトのテンプレートとしてクラス (class) が導入されました。クラスは、class キーワードを通じて定義できます。構文は「class クラス名 {...}」です。クラスの本質は関数 (関数) であり、構文シュガー。最下層は「コンストラクター」によって作成されます。

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

es6 クラスは関数です。

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

# #class の本質は関数です。

これは構文糖衣とみなすことができ、その最下層は

constructor

を通じて作成され、オブジェクト プロトタイプは、より明確に、オブジェクト指向プログラミングの構文に似て記述されています。<pre class="brush:php;toolbar:false">function Person(name, age) { this.name = name; this.age = age; } Person.prototype.sayName = function() { return this.name; } const xiaoming = new Person(&amp;#39;小明&amp;#39;, 18); console.log(xiaoming);</pre>上記のコードは、ES6 の

class

(次の <pre class="brush:php;toolbar:false">class Person { constructor(name, age) { this.name = name; this.age = age; } sayName() { return this.name; } } const xiaoming = new Person(&amp;#39;小明&amp;#39;, 18) console.log(xiaoming); // { name: &amp;#39;小明&amp;#39;, age: 18 } console.log((typeof Person)); // function console.log(Person === Person.prototype.constructor); // true</pre> コンストラクター) を使用して実装されています。メソッド、これはコンストラクター メソッドであり、this キーワードはインスタンス オブジェクトを表します。クラスのデータ型は関数であり、クラス自体はコンストラクターを指します。

クラスを定義するときは、関数を前に追加する必要はなく、メソッドをカンマで区切る必要もありません。追加するとエラーが報告されます。

クラスのすべてのメソッドは、クラスのプロトタイプ属性。

class A {
    constructor() {}
    toString() {}
    toValue() {}
}
// 等同于
function A () {
    // constructor
};
A.prototype.toString = function() {};
A.prototype.toValue = function() {};

クラスのインスタンスのメソッドを呼び出すことは、実際にはプロトタイプのメソッドを呼び出すことになります。

#

let a = new A();
a.constructor === A.prototype.constructor // true

クラスのインスタンス

インスタンスの属性がそれ自体で明示的に定義されていない限り (つまり、このオブジェクトで定義されていない限り)、それらはプロトタイプで定義されます (つまり、クラスで定義されています)。

注:

1. クラスの変数昇格はありません

new A(); // ReferenceError
class A {}

ES6 はクラス宣言をコードの先頭に昇格させないため、この規定の理由は継承に関連しているため、サブクラスは親クラスの後に定義されています。

{
  let A = class {};
  class B extends A {}
}

B が A を継承するとき、A にはすでに定義があるため、上記のコードはエラーを報告しません。ただし、クラスの昇格がある場合、上記のコードはエラーになります。クラスがコードの先頭に昇格されるため、「」が報告されますが、let コマンドは昇格されないため、B が A を継承する場合、Foo は定義されていません。には、デフォルトでクラスのインスタンスを指す this が含まれています。ただし、十分に注意する必要があります。このメソッドを単独で使用すると、エラーが報告される可能性があります。

クラスは extends キーワードを渡すことができます。継承の実装

class Animal {}
class Cat extends Animal { };

上記のコードは、extends キーワードを通じて Animal クラスのすべてのプロパティとメソッドを継承する Cat クラスを定義します。ただし、コードがデプロイされていないため、2 つのクラスはまったく同じであり、Animal クラスをコピーするのと同じです。次に、Cat 内にコードを追加します。

class Cat extends Animal {
    constructor(name, age, color) {
        // 调用父类的constructor(name, age)
        super(name, age);
        this.color = color;
    }
    toString() {
        return this.color + ' ' + super.toString(); // 调用父类的toString()
    }
}

super キーワードは、コンストラクター メソッドと toString メソッドの両方に表示されます。ここでは、親クラスのコンストラクターを表し、親クラスの新しい this オブジェクトを作成するために使用されます。 サブクラスはコンストラクター メソッドでスーパー メソッドを呼び出す必要があります。そうしないと、新しいインスタンスの作成時にエラーが報告されます。 これは、サブクラス独自の this オブジェクトが、親クラスと同じインスタンス属性とメソッドを取得するために、まず親クラスのコンストラクターによって整形され、その後処理されて、サブクラス独自のインスタンス属性とメソッドが追加されるためです。スーパー メソッドが呼び出されない場合、サブクラスはこのオブジェクトを取得しません。

class Animal { /* ... */ }

class Cat extends Animal {
  constructor() {
  }
}

let cp = new Cat();
// ReferenceError

Cat は親クラス Animal を継承しますが、そのコンストラクターがスーパー メソッドを呼び出さないため、新しいインスタンスがエラーを報告します。

サブクラスにコンストラクター メソッドが定義されていない場合、デフォルトでこのメソッドが追加されます。コードは次のとおりです。つまり、明示的に定義されているかどうかに関係なく、サブクラスにはコンストラクター メソッドがあります。

class Cat extends Animal {

}
// 等同于

class Cat extends Animal {
    constructor(...args) {
        super(...args);
    }
}

もう 1 つ注意すべき点は、es5 コンストラクターは親コンストラクターを呼び出す前にこれにアクセスできますが、es6 コンストラクターは親コンストラクター (つまりスーパー) を呼び出す前にこれにアクセスできないことです。

class A {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

class B extends A {
  constructor(x, y, name) {
    this.name = name; // ReferenceError
    super(x, y);
    this.name = name; // 正确
  }
}

上記のコードでは、サブクラスのコンストラクタメソッドが super を呼び出す前に this キーワードを使用しており、エラーが報告されていますが、super メソッドの後に置くのが正しいです。

親クラスの静的メソッドはサブクラスにも継承されます。

class A {
  static hello() {
    console.log('hello world');
  }
}

class B extends A {
}

B.hello()  // hello world

【関連する推奨事項:

JavaScript ビデオ チュートリアル

、

Web フロントエンド

]

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