s 6メモ7^_^クラス

　　ES6             ，   Class（ ）    ，       。  class   ，     。

　　    JavaScript ES6 class  、mozilla  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes

1.定義クラス

　　        ES5         。        Object.defineProperty  ，            。

function Vehicle1(make, year) {
    Object.defineProperty(this, 'make', {
        get: function() { return make; }
    });

    Object.defineProperty(this, 'year', {
        get: function() { return year; }
    });
}
Vehicle1.prototype.toString = function() {
    return this.make + ' ' + this.year;
}
var vehicle1 = new Vehicle1('Toyota Corolla', 2009);
console.log(vehicle1.make); // Toyota Corolla
vehicle1.make = 'Ford Mustang';
console.log(vehicle1.toString()) // Toyota Corolla 2009

　　   ，                    toString   Vehicle 。    ES6        ：

class Vehicle {
    constructor(make, year) {
        this._make = make;
        this._year = year;
    }
    get make() {
        return this._make;
    }
    get year() {
        return this._year;
    }
    toString() {
        return `${this.make} ${this.year}`;
    }
}
var vehicle = new Vehicle('Toyota Corolla', 2009);
console.log(vehicle.make); // Toyota Corolla
vehicle.make = 'Ford Mustang';
console.log(vehicle.toString()) // Toyota Corolla 2009

　　                   。        get       ，     make year         。            。                ，       defineProperty。

2.クラス声明

　　            ，      ，   class          （    Polygon），        。

class Polygon {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}

3.変数の昇格

　　              ，            ，      。
　　    ，       ，       ，        ReferenceError   ，     ：

var p = new Polygon(); // ReferenceError
class Polygon {}

4.クラス表現

               。      ，        。       ，                。

匿名の

var Polygon1 = class {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
};

名前付き

var Polygon2 = class Polygon {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
};

  :                    。

5.原型の方法

class Polygon3 {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
    get area() {
        return this.calcArea()
    }
    calcArea() {
        return this.height * this.width;
    }
}
const square = new Polygon3(10, 10);
console.log(square.area);// 100

6.静的方法

　　static              。                  ，              ，                     。              。

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    static distance(a, b) {
        const dx = a.x - b.x;
        const dy = a.y - b.y;

        return Math.sqrt(dx*dx + dy*dy);
    }
}
const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
console.log(Point.distance(p1, p2));

7.クラス引継ぎ

   extends     
　　extends                                。

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(this.name + ' makes a noise.');
    }
}
class Dog extends Animal {
    speak() {
        console.log(this.name + ' barks.');
    }
}
var d = new Dog('Mitzie');
d.speak();// 'Mitzie barks.'

//               “ ”：
function Animal2 (name) {
    this.name = name;
}
Animal2.prototype.speak = function () {
    console.log(this.name + ' makes a noise.');
}
class Dog2 extends Animal2 {
    speak() {
        super.speak();
        console.log(this.name + ' barks.');
    }
}
var d2 = new Dog2('Mitzie');
d2.speak();

//             （    ）  。                   ，     Object.setPrototypeOf()：
var Animal3 = {
    speak() {
        console.log(this.name + ' makes a noise.');
    }
};
class Dog3 {
    constructor(name) {
        this.name = name;
    }
    speak() {
        super.speak();
        console.log(this.name + ' barks.');
    }
}
Object.setPrototypeOf(Dog3.prototype, Animal3);
var d3 = new Dog3('Mitzie');
d3.speak();

8.Species

　　         MyArray      Array   。   species              。
　　  ，     map()                ，             Array   ，    MyArray   。Symbol.species    ：

class MyArray extends Array {
    // Overwrite species to the parent Array constructor
    static get [Symbol.species]() { return Array; }
}
var a = new MyArray(1,2,3);
var mapped = a.map(x => x * x);
console.log(mapped instanceof MyArray); // false
console.log(mapped instanceof Array);   // true

9.superキーワードは父のようなコンストラクタまたはクラスの方法を呼び出すために使用できます.

class Cat {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(this.name + ' makes a noise.');
    }
}
class Lion extends Cat {
    speak() {
        super.speak();
        console.log(this.name + ' roars.');
    }
}
new Lion('nick').speak();
//        
class Animal4 {
    constructor(){
        this.type = 'animal';
    }
    says(say){
        console.log(this.type + ' says ' + say);
    }
}
let animal4 = new Animal4();
animal4.says('hello') //animal says hello
class Cat4 extends Animal4 {
    constructor(){
        super();
        this.type = 'cat';
        // 1.    constructor;
        // 2.  super();
        // 3.this        cat4，  constructor this        this      
    }
}
let cat4 = new Cat4();
cat4.says('hello'); //cat says hello

上のコードはまずクラスで「クラス」を定義しています.中にはコンストラクションの方法があります.これは構造方法です.簡単に言えば、constructor内で定義されている方法と属性はインスタンスオブジェクト自身のものであり、constructor以外で定義されている方法と属性は全てのインスタンスオブジェクトが共有できるものである.Class間はextensのキーワードによって継承が可能であり、これはES 5のプロトタイプチェーンを修正することによって継承が可能であり、より明確で便利である.上では、1つのCatクラスを定義しています.このクラスは、extensキーワードを通じて、Animalクラスのすべての属性と方法を継承しています.superキーワードとは、親タイプの例(すなわち、親タイプのthisオブジェクト)を意味します.サブクラスはconstructorメソッドでsuperメソッドを呼び出す必要があります.そうでないと、新しいインスタンスを作成する時にエラーが発生します.これは、子類が自分のthisの対象ではなく、父類のthisの対象を継承して加工しているからです.superメソッドを起動しないと、サブクラスはthisオブジェクトを得られません.ES 6の継承メカニズムは、実質的には、親タイプのインスタンスオブジェクトthisを作成し(従って、最初にsuperメソッドを呼び出す必要があります)、その後、サブクラスの構造関数でthisを修正します.

es6