ES 6のクラスのキーワードを解読します。

4307 ワード

クラスはes 6が導入する最も重要な特性の一つです。クラスがない前に、私たちはプロトタイプチェーンでクラスをシミュレートするしかないです。
1、紹介します 

  //   
  class Point {
   constructor(x, y) {
   this.x = x;
   this.y = y;
   }
   toString() {
   return '(' + this.x + ', ' + this.y + ')';
   }
  }
Point類は構造方法の他に、toString方法も定義されています。ただし、「クラス」を定義する方法は、前にFunctionというキーワードを追加する必要がなく、直接関数定義を入れてもいいです。また、方法間にはカンマ区切りは不要です。  

 //          ,          。    ,        new  ,            。
  class Bar {
   doStuff() {
   console.log('stuff');
   }
  }
  var b = new Bar();
  b.doStuff() // "stuff"
2、厳格モード
クラスやモジュールの内部は、デフォルトは厳しいモードですので、use strickを使って運転モードを指定する必要はありません。あなたのコードがクラスやモジュールに書いてある限り、厳格なモードだけが利用できます。
3、constructorの方法
constructorメソッドは、カテゴリのデフォルトの方法であり、newコマンドによりオブジェクトインスタンスを生成する場合、自動的に起動します。一つの種類にはconstructorの方法が必要で、明示的な定義がないと、空きのconstructorの方法がデフォルトで追加されます。    

class Point {
  }
  //    
  class Point {
   constructor() {}//constructor          ( this),              。
  }
  //  :     new  ,     。                 ,    new     。
4、クラスのインスタンスオブジェクト
クラスのインスタンスオブジェクトの書き方は、newコマンドを使用します。
例の属性は明示的に定義されていない限り(すなわち、thisオブジェクトに定義されている)、プロトタイプに定義されている(すなわち、クラスに定義されている)。    

 class Point {
   // ...
  }
  //   
  var point = Point(2, 3);
  //   
  var point = new Point(2, 3);
5、クラス表現
次のコードは、式を使ってクラスを定義します。注意したいのは、このクラスの名前はMyClassで、Meではなく、Classの内部コードだけで使用できます。現在のクラスを指します。      

 const MyClass = class Me {
   getClassName() {
   return Me.name;
   }
  };
  //   Class    ,          Class。
  var person = new class {
   constructor(name) {
   this.name = name;
   }
   sayName() {
   console.log(this.name);
   }
  }('  ');
  person.sayName(); // "  "
6、変数の昇格は存在しません。
クラスには変数のアップグレードが存在しません(hoist)
以下のコードの中で、Fooクラスは使用前に定義された後、このようにエラーが発生します。ES 6はクラスの声明をコードのヘッダにアップグレードしません。このような規定の原因は以下に述べる継承に関連しており、子類が親類の後に定義されることを保証しなければならない。

  new Foo(); // ReferenceError
  class Foo {} 
7、プライベート方法
プライベート方法は一般的な需要ですが、ES 6は提供されません。
プライベートメソッドを追加
①命名に区別をつける。
②Symbol値の一意性を利用して、プライベートメソッドの名前をSymbol値と命名する。      

 /*       */
  class Widget {
   //     
   foo (baz) {
   this._bar(baz);
   }
   //     
   _bar(baz) {
   return this.snaf = baz;
   }
   // ...
  }
  /*  Symbol*/
  const bar = Symbol('bar');
  const snaf = Symbol('snaf');
  
  export default class myClass{
   //     
   foo(baz) {
   this[bar](baz);
   }
   //     
   [bar](baz) {
   return this[snaf] = baz;
   }
   // ...
  };
8、プライベート属性
プライベート方法と同様に、ES 6はプライベート属性をサポートしていません。現在、クラスに私有属性を加えた提案があります。方法は属性名の前に、〓を使って表します。   

 class Point {
   #x;
   constructor(x = 0) {
   #x = +x; //    this.#x   
   }
   get x() { return #x }
   set x(value) { #x = +value }
  }
9、thisの指向
クラスのアプローチの内部にthisが含まれている場合は、クラスのデフォルトのインスタンスを指します。
この方法を単独で使うと、エラーが発生する可能性があります。     

 class Logger {
   printName(name = 'there') {
   this.print(`Hello ${name}`);
   }
  
   print(text) {
   console.log(text);
   }
  } 
  const logger = new Logger();
  const { printName } = logger;
  printName();
  //     ,printName    this,    Logger    。  ,               ,this              ,     print       。
  /*     ,        this,        print   。*/
  class Logger {
   constructor() {
   this.printName = this.printName.bind(this);
   }  
   // ...
  }
10、name属性
 本質的にはES 6のクラスはES 5のコンストラクタの1つの包装にすぎないので、関数の多くの特性はクラスに継承され、name属性を含む。
name属性は、常にクラスのキーワードの後に続くクラス名を返します。    

 class Point {}
  Point.name // "Point"
締め括りをつける
以上は小编が皆さんに绍介したES 6のクラスのキーワードです。皆さんに何かお聞きしたいことがあれば、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。