クラス class は es6 構文ですか?

クラス class は es6 構文であり、es6 の新機能です。 ES6 では、「クラス」をすばやく定義するために class キーワードが導入されましたが、クラスの本質は関数です。これは構文糖衣とみなすことができ、オブジェクト プロトタイプの記述をより明確にし、オブジェクト指向プログラミングの構文に近づけます。 。 class を使用して、クラス メソッド「class Person{//クラス宣言}」または「const Person=class{//クラス式}」を定義します。

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

クラス class は es6 構文であり、es6 の新機能です。

ES6 では、「クラス」をすばやく定義するために class キーワードが導入されました。

JS では、「クラス」の本質は糖衣構文とみなすことができる関数であり、オブジェクト プロトタイプの記述方法をより簡潔かつ明確にし、オブジェクト指向プログラミングの構文に近づけます。

クラス定義 class

前述のコンストラクター形式に従って class を作成することは、通常のクラスを作成することとあまりにも似ているだけではないことがわかります。 function であり、コードは理解するのが簡単ではありません。

ES6 の新しい標準 (ECMAScript2015) では、class キーワードを使用してクラスを直接定義します; しかし、クラスは依然として本質的には前述のコンストラクターとプロトタイプ チェーンの構文糖です。 ;したがって、前のコンストラクターとプロトタイプ チェーンを学ぶことは、クラスの概念と継承関係を理解するのに役立ちます;

それでは、クラスを使用してクラスを定義する方法は何でしょうか? –クラスを宣言するには、クラス宣言とクラス式という 2 つの方法を使用できます。

class Person{
    //类声明
}

const Person=class{
    //类表达式
}

クラスとコンストラクターの類似点と相違点

見てみましょうクラスのいくつかの特性を調べてください。実際にコンストラクターの特性と一致していることがわかります。

console.log(Person.prototype)
console.log(Person.prototype.__proto__)//Object null 
console.log(Person.prototype.constructor)//Person
console.log(typeof Person) // function

var p = new Person()
console.log(p.__proto__ === Person.prototype) // true

クラスのコンストラクター

必要な場合 いつオブジェクトを作成するとき、いくつかのパラメータをクラスに渡しますが、このとき何をすべきでしょうか?

• 各クラスは独自のコンストラクター (メソッド) を持つことができます。このメソッドの名前は固定コンストラクターです。
• 新しいシンボルを使用して操作する場合、クラスを操作すると、このクラスのコンストラクター コンストラクターが呼び出されます。
• 各クラスはコンストラクターを 1 つだけ持つことができます、複数のコンストラクターが含まれる場合、例外がスローされます ;

new キーワードでクラスを操作すると、このコンストラクター関数が呼び出され、次の操作が実行されます:

#1. メモリ内に新しいオブジェクトを作成します (空のオブジェクト) );
• 2. このオブジェクト内の [[prototype]] 属性は、クラスのプロトタイプ属性に割り当てられます;
• 3. コンストラクター内のこれは、作成された新しいオブジェクトを指します;
• 4. コンストラクターの内部コード (関数本体コード) を実行します;
• 5. コンストラクターが null 以外のオブジェクトを返さない場合は、作成された新しいオブジェクトが返されます ;

クラスのインスタンス メソッド

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
    this._address = "广州市"
  }

  // 普通的实例方法
  // 创建出来的对象进行访问
  // var p = new Person()
  // p.eating()
  eating() {
    console.log(this.name + " eating~")
  }

  running() {
    console.log(this.name + " running~")
  }
}

Accessor メソッドクラスの

前にオブジェクトのプロパティ記述子について説明したとき、オブジェクトはセッター関数とゲッター関数を追加できると述べましたが、クラスも可能です:

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
    this._address = "广州市"
  }

  // 类的访问器方法
  get address() {
    console.log("拦截访问操作")
    return this._address
  }

  set address(newAddress) {
    console.log("拦截设置操作")
    this._address = newAddress
  }
}

ログイン後にコピー

クラスの静的メソッド

静的メソッドは、通常、クラスを使用して直接実行されるメソッドを定義するために使用されます。クラスのインスタンスは必要ありません。次を定義するには、static キーワードを使用します。

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
    this._address = "广州市"
  }
  // 类的静态方法(类方法)
  // Person.createPerson()
  static randomPerson() {
    var nameIndex = Math.floor(Math.random() * names.length)
    var name = names[nameIndex]
    var age = Math.floor(Math.random() * 100)
    return new Person(name, age)
  }
}

ログイン後にコピー

ES6 クラスの継承 - extends

ES5 での継承の実装については、多くの時間を費やして議論しました。最終的には比較的満足のいく継承メカニズムが実現しましたが、そのプロセスはまだ非常に面倒でした。 ES6 では、継承の実装に簡単に役立つ extends キーワードが追加されました。

class Person{
    
}

class Student extends Person{
    
}

上記で見つかります。コードでは、スーパー キーワードを使用しました。このスーパー キーワードにはさまざまな使用方法があります: 注: これを子 (派生) クラスのコンストラクターで使用する前、またはデフォルト オブジェクトを返す前に、最初に super を渡す必要があります。親クラス！

#スーパーを使用できる場所は 3 つあります: サブクラスのコンストラクター、インスタンス メソッド、および静的メソッドです。

#組み込みクラスの継承

配列などの組み込みクラスからクラスを継承させることもできます:

class HYArray extends Array {
  firstItem() {
    return this[0]
  }

  lastItem() {
    return this[this.length-1]
  }
}

var arr = new HYArray(1, 2, 3)
console.log(arr.firstItem())
console.log(arr.lastItem())

ログイン後にコピー

JavaScript クラスは単一継承のみをサポートします。つまり、存在できる親クラスは 1 つだけです。では、開発中に同様の関数をクラスにさらに追加する必要がある場合、どうすればよいでしょうか?現時点では、mixin を使用できます;

JavaScript中的多态

// 多态: 当对不同的数据类型执行同一个操作时, 如果表现出来的行为(形态)不一样, 那么就是多态的体现.
function calcArea(foo) {
  console.log(foo.getArea())
}

var obj1 = {
  name: "why",
  getArea: function() {
    return 1000
  }
}

class Person {
  getArea() {
    return 100
  }
}

var p = new Person()

calcArea(obj1)
calcArea(p)

// 也是多态的体现
function sum(m, n) {
  return m + n
}

sum(20, 30)
sum("abc", "cba")

// 传统的面向对象多态是有三个前提:
// 1> 必须有继承(是多态的前提)
// 2> 必须有重写(子类重写父类的方法)
// 3> 必须有父类引用指向子类对象

// Shape形状
class Shape {
  getArea() {}
}

class Rectangle extends Shape {
  getArea() {
    return 100
  }
}

class Circle extends Shape {
  getArea() {
    return 200
  }
}

var r = new Rectangle()
var c = new Circle()

// 多态: 当对不同的数据类型执行同一个操作时, 如果表现出来的行为(形态)不一样, 那么就是多态的体现.
function calcArea(shape: Shape) {
  console.log(shape.getArea())
}

calcArea(r)
calcArea(c)

export {}

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