JavaScriptのクラスと継承

一、ECMAScript 5標準中のクラス
1、原型類を定義する

/*   Calcula  */
var Calcula = function (x, y) {
    this.x = x;
    this.y = y;
}
/*      Object.defineProperties   Calcula.prototype    ， 
 *       ES6-Class            ，         
 */
Object.defineProperties(Calcula.prototype,  {
    add: {
        configurable: false,
        enumerable: false,
        value: function () {
            return this.x + this.y;
        },
        writable: false
    },
    sub: {
        configurable: false,
        enumerable: false,
        value: function () {
            let x = this.x;
            let y = this.y;
            if (x > y) {
                return x - y;
            } else if (x < y) {
                return y - x;
            } else {
                return 0;
            }
        },
        writable: false
    }
});
const calcula = new Calcula(100, 900);
console.log(calcula.sub());

2、原型類の継承
以下は典型的な原型継承に関するコードです.

/*   Foo    Constructor   */
var Foo = function (name) {
    this.name = name;
}

/*  Foo     prototype  */
Foo.prototype = {
    myName: function () {
        console.log(this.name);
        return this.name;
    };
};

/*   Bar    Constructor  ，  this     Foo ，  Bar        Foo       */
var Bar = function (name, label) {
    Foo.call(this, name);
    this.label = label;
}

/*   Bar    Foo.prototype        Bar  prototype   */
Bar.prototype = Object.create(Foo.prototype);

/*  Bar     */
Bar.prototype = {
    myLabel: function () {
        console.log(this.label);
        return this.label;
    };
};

const a = new Bar("    JavaScript", "         ");
a.myName();
a.myLabel();

3、静態類
クラスの静的方法を起動するには、クラスの例が必要ではない.このクラスの例は、クラスのいずれかの静的方法を呼び出すことができない.これも this ， を意味する.静的方法は、通常、アプリケーションのためのツール関数を作成するために使用されます.

var Point = function (x, y) {
    this.x = x;
    this.y = y;
};

Point.distance = function (a, b) {
    const x = a - b;
    const y = a + b;
    return Math.hypot(x, y);
};

console.log(p1.distance(10, 10));   //            ，        
console.log(Point.distance(p1, p2));

4、プロトタイプ拡張-従来のオブジェクトの継承
プロトタイプが従来のオブジェクトを継承する場合は、オブジェクトをプロトタイプのプロトタイプオブジェクトに設定することができます.

/*   1：       （JSON）*/
var Animal = {
    hobby: ["  ", "  "],
    speak() {
        console.log(this.name + ' can speak English!');
        console.log(this.hobby);
    }
};
var Person = function (name) {
    this.name = name;
};
Person.prototype = Animal;
var p = new Person("  ");
p.speak();

二、ECMAScript 6標準中のクラス
1、クラス

/*   Greeter ，   Constructor    greet    */
class Greeter {
    constructor(message) {
        this.greeting = message;
    }
    greet() {
        return "  ，" + this.greeting;
    }
}
let greeter = new Greeter("world");
console.log(greeter.greet());

       Greerのクラスを声明しました.クラスの属性、クラスのコンストラクタ、クラスの方法があります.
       newキーワードを使ってClassを実装すると、まず自分のコンストラクタ内の方法を実行します.
2、クラス引継ぎ
       extendsキーワードは、クラス宣言またはクラス表現において、他のクラスに続くサブクラスを作成するために使用されます.

class Animal { 
    constructor(name) {
        this.name = name;
    }
    eat() {
        console.log(this.name + '    ');
    }
}

class Dog extends Animal {
    constructor() {
        super();
    }
}

var d = new Dog(' A'); 
d.eat();

       サブクラスにコンストラクタがある場合は、「this」を使用する前に、まずsuper()を呼び出す必要があります.
3、静態類
       staticのキーワードは、クラスの静的方法を定義するために用いられ、クラスの例は必要ではない.このような例は、クラスのいずれかの静的方法を呼び出すことができない.これも this ， を意味する.静的方法は、通常、アプリケーションのためのツール関数を作成するために使用されます.

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.hypot(dx, dy);
    }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);

console.log(p1.distance(10, 10));   //            ，        
console.log(Point.distance(p1, p2));

4、クラス拡張-クラスは、従来のオブジェクトを継承します.
       クラスは、従来のオブジェクト(構造不可能／非構造)を拡張できませんので、注意してください.従来のオブジェクトを継承する場合は、Object.setPrototypeOf()に変更できます.

/*   1：       （JSON）*/
const Animal = {
    hobby: ["  ", "  "],
    speak() {
        console.log(this.name + ' can speak English!');
        console.log(this.hobby);
    }
};
class Person {
    constructor(name) {
        this.name = name;
    }
}
//  Animal    Person      
Object.setPrototypeOf(Person.prototype, Animal);
const d = new Person("  ");
d.speak();

/*   2：       （Array）*/
const methods = [
    "  ",
    "  ",
    {
        name: "  ",
        hobby: [
            "  ", "LOL"
        ]
    }
];
class Methods {
    constructor(name) {
        this.name = name;
    }
}
Object.setPrototypeOf(Methods.prototype, methods);
const methodsItem = new Methods("  ");
console.log(methodsItem[2]);