JavaScript类与继承

一、ECMAScript 5标准中的类

1、定义原型类

/* 定义Calcula类 */

var Calcula = function (x, y) {
    this.x = x;
    this.y = y;
}
Calcula.prototype = {
    add: function () {
        return this.x + this.y;
    },
    sub: 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;
        }
    }
};
const calcula = new Calcula(100, 900);
console.log(calcula.sub());

2、原型类继承

下面是一典型的关于原型继承的代码。

/* 创建Foo原型类的Constructor函数 */
var Foo = function (name) {
    this.name = name;
}

/* 为Foo原型类添加方法*/
Foo.prototype = {
    myName: function () {
        console.log(this.name);
        return this.name;
    };
};

/* 创建Bar原型类的Constructor函数，并使之继承Foo类*/
var Bar = function (name, label) {
    Foo.call(this, name);
    this.label = label;
}

/* 创建Bar类并使用Foo.prototype对象作为新创建的Bar类的prototyped对象，通俗的说就是使得新创建的Bar类继承于Foo类 */
Bar.prototype = Object.create(Foo.prototype);

/* 为Bar类添加myLabel方法*/
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;

    this.distance = function (a, b) {
        const dx = a.x - b.x;
        const dy = a.y - b.y;
        return Math.hypot(dx, dy);
    };
};

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

console.log(p1.distance(10, 10));   // 因实例无法调用静态方法，所以浏览器会报错
console.log(Point.distance(p1, p2));

4、原型类扩展-类继承常规对象

如果原型类要继承一个常规对象，则可以将对象设置为原型类的protypee对象。

/* 实例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标准中的Class

1、类

/* 定义Greeter类，并添加Constructor构造器和greet方法  */
class Greeter {
    constructor(message) {
        this.greeting = message;
    }
    greet() {
        return "你好，" + this.greeting;
    }
}
let greeter = new Greeter("world");
console.log(greeter.greet());

       声明了一个Greeter的类，它有3个成员：类的属性（greeting）、类的构造器（Constructor）、类的方法（greet）。

       在Greeter类的内部，this指针永远指向Greeter类自身。

       当我们使用new关键字实例化Class的时候，首先会执行自己的构造器中的方法。

2、类继承（extends创建子类）

       extends关键字在类声明或类表达式中用于创建一个继承于另一个类的子类。

class Animal { 
    constructor(name) {
        this.name = name;
    }
  
    speak() {
        console.log(this.name + ' makes a noise.');
    }
}

class Dog extends Animal {

    constructor() {
        super();
    }
}

var d = new Dog('Mitzie'); 
d.speak();

       如果子类中存在构造函数，则需要在使用“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("Wangchangcheng");
console.log(methodsItem[2]);