フロントエンドJavaScriptのクラス

関数 Point(x, y) {
  this.x = x;
  y = y;
}

Point.prototype.toString = 関数 () {
  '(' + this.x + ', ' + this.y + ')' を返します。
};

var p = 新しいポイント(1, 1);

クラス Point {
  コンストラクタ(x, y) {
    this.x = x;
    y = y;
  }

  文字列を渡す
    '(' + this.x + ', ' + this.y + ')' を返します。
  }
}

// ES5 関数宣言 function Point() {
 //...
}

// ES6 クラス宣言 class Point {
  //....
  コンストラクタ() {
  }
}
typeof Point // "関数"
Point === Point.prototype.constructor // true

クラス Point {
  コンストラクタ(x, y) {
    this.x = x;
    y = y;
  }

  文字列を渡す
    '(' + this.x + ', ' + this.y + ')' を返します。
  }
}

ポイント.プロトタイプ = {
  //....
  文字列を変換する()
}
var p = 新しいポイント(1, 1);
p.toString() // (1,1)

// 名前のない/匿名クラス let Point = class {
  コンストラクタ(x, y) {
    this.x = x;
    y = y;
  }
};
Point.name // ポイント

> let p = new Point(); // 昇格してもエラーは報告されません> function Point() {}
> 
> let p = new Point(); // エラー、ReferenceError
> クラス Point {}
>

クラス Point {
}

// クラス Point を自動的に追加します {
  コンストラクタ() {}
}

クラスユーザー{
  コンストラクタ(名前) {
    this.name = 名前;
  }

  名前を取得する() {
    this.name を返します。
  }

  名前(値)を設定する{
    this.name = 値;
  }
}

クラスユーザー{
  コンストラクタ(名前) {
    this.name = 名前;
  }
  プリント名(){
    console.log('名前は' + this.nameです)
  }
}
定数ユーザー = 新しいユーザー('jack')
user.printName() // 名前はjackです
const { printName } = ユーザー;
printName() // エラー 未定義のプロパティを読み取ることができません (読み取り 'name')

クラスユーザー{
  コンストラクタ(名前) {
    this.name = 名前;
    this.printName = this.printName.bind(this);
  }
  プリント名(){
    console.log('名前は' + this.nameです)
  }
}
定数ユーザー = 新しいユーザー('jack')
const { printName } = ユーザー;
printName() // 名前はジャック

クラスユーザー{
  コンストラクタ(名前) {
    this.name = 名前;
  }
  プリント名 = () => {
    console.log('名前は' + this.nameです)
  }
}
定数ユーザー = 新しいユーザー('jack')
const { printName } = ユーザー;
printName() // 名前はジャック

クラスユーザー{
}

ユーザー.prop = 1;
ユーザー.prop // 1

クラス Utils {
  静的printInfo() {
     this.info();
  }
  静的情報() {
     コンソールにログ出力します。
  }
}
Utils.printInfo() // こんにちは

クラスPoint3DはPointを拡張します{
  コンストラクタ(x, y, z) {
    super(x, y); // 親クラスのコンストラクター(x, y)を呼び出す
    this.z = z;
  }

  文字列を渡す
    return super.toString() + ' ' + this.z; // 親クラスのtoString()を呼び出す
  }
}

クラス親{
  静的情報() {
    console.log('こんにちは世界');
  }
}

クラスChildはParentを拡張します{
}

Child.info() // こんにちは世界

クラス 親 {}

クラスChildはParentを拡張します{
  コンストラクタ() {
    素晴らしい（）;
  }
}

クラス親{
  コンストラクタ() {
    1.x = 1; を出力します。
    これ.y = 10
  }
  親を印刷する（）{
    コンソールにログ出力します。
  }
  印刷（）{
    コンソールにログ出力します。
  }
}

クラスChildはParentを拡張します{
  コンストラクタ() {
    素晴らしい（）;
    2 を 0 にします。
  }
  m() {
    スーパープリント();
  }
}

c = new Child();
c.printParent() // 10
センチメートル() // 2

var obj = {} // var obj = new Object() と同等

// obj.__proto__ は Object コンストラクタのプロトタイプを指します
obj.__proto__ === Object.prototype // true 

// obj.toString は Object.prototype から継承されたメソッドを呼び出します obj.toString === obj.__proto__.toString // true

// 配列 var arr = []
arr.__proto__ === Array.prototype // true

関数 Foo(){}
var f = new Foo();
f.__proto__ === Foo.prototype // 真
Foo.__proto__ === Function.prototype // true

クラス親{
}

クラスChildはParentを拡張します{
}

Child.__proto__ === Parent // true
Child.prototype.__proto__ === Parent.prototype // true

クラス親{
}

クラスChildはParentを拡張します{
}

var p = 新しい親();
var c = 新しい子();

c.__proto__ === p.__proto__ // 偽
c.__proto__ === Child.prototype // true
c.__proto__.__proto__ === p.__proto__ // 真