ES 6--Class、Moduleおよび一般的な特性

十八、Class

例:ES 5

function Point(x, y) {
  this.x = x;
  this.y = y;
}
Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);

例:ES 6の等価表記

class Point{
  constructor(x, y){

    this.x = x;
    this.y = y;
  }
  toString(){
    return '(' + this.x + ', ' + this.y + ')';
  }
}
var p = new Point(1, 2);

実際、クラスのすべての方法はクラスのprototype属性の上に定義されています.クラスのインスタンス上でメソッドを呼び出すのは、実際にはプロトタイプ上のメソッドを呼び出すことです.p.constructor === Point.prototype.constructor; // true注意:クラスで定義されたメソッドは、矢印関数ではなく、役割ドメインを持つ一般的な関数です.
もちろん属性名は式をサポートします

let methodName = "toString";
class Point{
  constructor(x, y){
    this.x = x;
    this.y = y;
  }
  [methodName](){
    return '(' + this.x + ', ' + this.y + ')';
  }
}
var p = new Point(1, 2);

constructorメソッド

constructorメソッドはクラスのデフォルトメソッドであり、newコマンドでオブジェクトインスタンスを生成すると自動的に呼び出されます.クラスにはconstructorメソッドが必要です.明示的に定義されていない場合は、空のconstructorメソッドがデフォルトで追加されます.

class Ponit{}
new Ponit();

クラスのインスタンスオブジェクト

newで呼び出さなければなりません.そうしないと、エラーが発生します.

var point = Point(2, 3); //  
var point = new Point(2, 3); //  

変数リフトは存在しません

/* function */
new Foo();
function Foo(){}

/* class */
new Bar();  // Unexpected identifier
Class Bar{};  

class式

関数と同様にclassは式の形式で定義できます.エクスプレッションにより、直ちに実行されるclassを実現できます.

let person = new class{
  constructor(name){
    this.name = name;
  }
  sayName(){
    console.log(this.name);
  }
}('ligang');
person.sayName();

継承

class Point2D{
  constructor(x, y){
    this.x = x;
    this.y = y;
  }
}
class Point3D extends Point2D{
  constructor(x, y, z){
    super(x, y);
    this.z = z;
  }
  toString() {
    return `$(this.x}, $(this.y}, $(this.z}`;
  }
}
console.log(new Point3D(1, 2, 3));  // Point3D { x: 1, y: 2, z: 3 }

注意:サブクラスが親クラスを継承する場合は、サブクラスのconstructorでsuperを使用して親クラス構築関数を呼び出す必要があります.

class Point2D{}
class Point3D extends Point2D{
  constructor(x, y, z){
    // super();
    this.x = x;
    this.y = y;
    this.z = z;
  }
  toString() {
    return `$(this.x}, $(this.y}, $(this.z}`;
  }
}
console.log(new Point3D(1, 2, 3));  //  ：this is not defined

取値関数(getter)と存値関数(setter)

Classの内部でgetキーとsetキーを使用して、ある属性に値関数と値関数を設定し、その属性のアクセス動作をブロックできます.

class Person{
  constructor(name){
    this.name = name;
  }
  set username(newName){
    this.name = newName;
  }
  get username(){
    return this.name;
  }
};
var p = new Person('x');
console.log(p.username);  // 'x'
p.username = "ligang";
console.log(p.username);  // 'ligang'

プライベートメソッド

ES 6ではサポートされていませんが、関数名の増加などのネーミングによる区別がいくつかの約束によって実現できます.方法2:Symbol値による一意性

const method = Symbol('sayName');
class Person{
  constructor(name){
   this.name = name;
  }
  [method](){
     console.log(this.name);
  }
  say(){
   this[method]();
  }
};
var p = new Person('ligang');
p.say();  // 'ligang'
p.sayName();  // p.sayName is not a function

スタティツクメソッド

メソッドにstaticキーを付けると、そのメソッドはインスタンスに継承されず、直接クラスで呼び出されることを「静的メソッド」と呼びます.

class Person{
 constructor(name){
   this.username = name;
 }
 static sayHello(){
   return 'hello';
 }
 static sayName(){
   return this.username;
 }
};
console.log(Person.sayHello()); // 'hello'
console.log(Person.sayName());  // undefined

注意:静的メソッドでは、thisの指向問題!!

に質問

(1)プライベート属性はサポートされておらず,いくつかの約定でしか実現できない(2)インスタンス属性はサポートされておらず,Getter/Setterでしか実現できない(3)多重継承はサポートされていない

十九、Module

ES 6モジュールの設計思想は,コンパイル時にモジュールの依存関係,および入出力の変数を決定できるように,できるだけ静的化することである.CommonJSとAMDモジュールは、実行時にしか確認できません.ES 6のモジュールは自動的に厳格なモードを採用し、モジュールの頭部に「use strict」を加えたかどうかにかかわらず.モジュール機能は主に2つのコマンドで構成されています.exportとimportです.exportコマンドはモジュールの対外インタフェースを規定し、importコマンドは他のモジュールが提供する機能を入力するために使用されます.

モジュールのエクスポート

モジュールは独立したファイルです.このファイル内のすべての変数は、外部では取得できません.モジュール内の変数を外部で読み込むには、exportキーワードを使用して変数を出力する必要があります.(1)単一インタフェースSybtax:export <statement>のエクスポート

// module.js
export function method(){}
export class Foo{}

// app.js
import {method, Foo} from 'module.js'

export文には、宣言部分と付与部分が必要です.

const foo = 'bar';
export foo; // Error

(2)書き出しモジュールデフォルトインタフェースSybtax:export default <value>

// module.js
export default function() {}

// app.js
import customName from 'module.js'
customName();

(3)書き出しインタフェース文の混合

// module.js
export default class Client{}
export const foo = 'bar'

// app.js
import Client, {foo} from 'module.js'

(4)モジュールをエクスポートするすべてのインタフェースSybtax:export * from 'module-name'

// module.js
export function foo(){}

// app.js
export * from 'module.js'

(5)モジュールのインタフェースの一部をエクスポートするSybtax:export {member} from 'module-name'

export {foo, bar} from 'my_module';

//  
import {foo, bar} from 'my_moudle';
export {foo, bar};

(6)モジュールのデフォルトインタフェースSybtax:export {default} from 'module'をエクスポートする

export {es6 ad default} from 'my_module';

//  
import {es6} from 'my_module';
export default es6;

導入モジュール

(1)デフォルトモジュールの導入

import namespace from 'module-name'
import http from 'http'

(2)モジュール部分インタフェースの導入

import {member1, member2} from 'module-name'
import {isEmpty} from 'lodash'

(3)指定したネーミングスペースへのすべてのインタフェースの導入

import * as namespace from 'module-name'
import * as lib from 'module'

(4)導入デフォルトインタフェースとネーミングインタフェースの混在

import {default as <default name>, method1} from 'module-name'
import {default as Client, utils} from 'module'
import <default name>, {<named modules>} from 'module-name' import Client, {utils} from 'module'

(5)インタフェースを導入せず、モジュールコードのみを実行

import 'module-name'

ES 6で提供されるモジュールメカニズムは、「モジュールコンテンツの選択的導入」が可能であり、Rollupおよびwebpack 2によってES 6モジュール化メカニズムを利用して必要なコードのみを圧縮することができ、JavaScript参照のボリュームを最大限に簡素化し、高価なネットワーク帯域幅と遅いページロード速度を回避できることを意味する.

まとめ:

ここまで書くと、ES 6のすべての文法は基本的にすべて記述されており、彩卵もあり、単純な文法糖もある.中の多くの文法もES 5でshim(Proxyを除く)することができます.Node 6+以上では、ほとんどのES 6構文がサポートされており、フロントエンドはBabel 6ツールで変換できます.ES 6を使用する過程で、いくつかの爽やかな小さな特性があり、以下のように整理されています.

オブジェクト変数のキー値を設定する構文

ES 6の前に、オブジェクトの字面量に変数キー値を設定することはできません.オブジェクトの初期化後にキー/値を増やす必要があります.

var myKey = 'name';
var person = {
  'age': 25
};
person[myKey] = 'ligang';

ES 6には[]方式が追加され、完璧に解決されました.

let myKey = 'name';
let person = {
  [myKey]: 'ligang',
  'age': 25
};

テンプレート文字列

ES 6の前に複数行の文字列を作成するには、\をコネクタとして使用する必要があります.テンプレート文字列の出現により、文字列の接合が簡単にメンテナンス可能になります.

let person = { name: 'ligang', age: 26 };
console.log(`My name is ${person.name}.
My age is ${person.age}.`);
/*  ： My name is ligang. My age is 26. */

### find/findIndex
JavaScriptは、配列内の要素のインデックスを取得するためのArray.prototype.indexOfメソッドを提供しますが、indexOfは正確な値を検索するためにのみ使用でき、クエリー条件を指定することはできません.findおよびfindIndexは、クエリ条件を設定し、配列内で最初の条件を満たす値を検索することができる.ループ処理を回避!

let ages = [12, 19, 6, 4];

let firstAdult = ages.find(age => age >= 18); // 19
let firstAdultIndex = ages.findIndex(age => age >= 18); // 1

拡張演算子:...

拡張演算子は、配列または反復可能なオブジェクトが、1回の呼び出しで独立したパラメータに分割できることを示します.

//   arguments
//   Function.prototype.apply()
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1

//  
let divsArray = [...document.querySelectorAll('div')];

//  
let argsArray = [...arguments];

反復可能なオブジェクト(NodeList、argumentsなど)を真の配列に変換することができ、Array.fromまたはArray.prototype.slice.call()メソッドを使用する必要はありません.

既定のパラメータ値

function greet(name = 'ligang', callback = function(){}) {
  console.log(`Hello ${name}!`);
  //  “callback && typeof callback === 'function'” 
  callback();
}