类

类的概念

虽然 JavaScript 中有类的概念，但是可能大多数 JavaScript 程序员并不是非常熟悉类，这里对类相关的概念做一个简单的介绍。

• 类(Class)：定义了一件事物的抽象特点，包含它的属性和方法
• 对象（Object）：类的实例，通过 new 生成
• 面向对象（OOP）的三大特性：封装、继承、多态
• 封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据
• 继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性
• 多态（Polymorphism）：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal，但是分别实现了自己的 eat 方法。此时针对某一个实例，我们无需了解它是 Cat 还是 Dog，就可以直接调用 eat 方法，程序会自动判断出来应该如何执行 eat
• 存取器（getter & setter）：用以改变属性的读取和赋值行为
• 修饰符（Modifiers）：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法
• 抽象类（Abstract Class）：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现
• 接口（Interfaces）：不同类之间公有的属性或方法，可以抽象成一个接口。接口可以被类实现（implements）。一个类只能继承自另一个类，但是可以实现多个接口

ES5 类的写法

function Person(name) {
    this.name = name;
    this.age = 0;
}

Person.prototype.addAge = function () {
    this.age++;
    console.log(this,this.name, this.age);
};

let person1 = new Person("Nick");
person1.addAge(); // Person { name: 'Nick', age: 1 } 'Nick' 1

let person2 = new Person("Ming");
person2.addAge(); // Person { name: 'Ming', age: 1 } 'Ming' 1

ES6 类的写法

class Person {
    static single = null;

    constructor(name) {
        this.name = name;
        this.age = 0;
    }

    addAge() {
        this.age++;
        console.log(this, this.name, this.age);
    }

    static getInstance() {
        if (this.single === null) {
            this.single = new Person("Hi");
        }
        return this.single;
    }
}

let person1 = new Person("Nick");
person1.addAge(); // Person { name: 'Nick', age: 1 } 'Nick' 1

let person2 = new Person("Ming");
person2.addAge(); // Person { name: 'Ming', age: 1 } 'Ming' 1

Person.getInstance().addAge(); // Person { name: 'Hi', age: 1 } 'Hi' 1

ES5 类的继承

/**
 * js 类的实现
 * @type {Base}
 */
var Base = (function () {
    function Base(name) {
        this.name = name;
    }

    Base.prototype.getName = function () {
        console.log(this.name);
    }
    return Base;
})();

let base = new Base("Nick");
base.getName(); // Nick

var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({__proto__: []} instanceof Array && function (d, b) {
            d.__proto__ = b;
        }) ||
        function (d, b) {
            for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
        };
    return function (d, b) {
        extendStatics(d, b);

        function __() {
            this.constructor = d;
        }

        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();

/**
 * js 继承
 * @type {function(*=): (*|Device)}
 */
var Device = (function (_super) {
    __extends(Device, _super);

    function Device(name) {
        return _super.call(this, name) || this;
    }

    return Device;
})(Base);

let device = new Device("Jack");
device.getName(); //Jack

ES6 类的继承

使用 extends 关键字实现继承，子类中使用 super 关键字来调用父类的构造函数和方法。

class Base {
    constructor(name) {
        this.name = name;
    }

    getName() {
        console.log(this.name);
    }
}

let base = new Base('Nick');
base.getName(); // Nick

class Device extends Base {
    constructor(name) {
        super(name);
    }
}
let device = new Device('Jack');
device.getName(); //Jack

ES5 多态

function study(person) {
    person.study();
};

function Teacher(name) {
    this.name = name
};

Teacher.prototype.study = function () {
    console.log(` Teacher ${this.name} do something!`);
};

function Student(name) {
    this.name = name;
}

Student.prototype.study = function () {
    console.log(` Student ${this.name} do something!`);
};

let teacher = new Teacher("Nick");
study(teacher);
let student = new Student("Jack");
study(student);

ES6 多态

abstract class PersonDao {
    abstract study(): string;
}

class Student extends PersonDao {
    name: string;

    constructor(name) {
        super();
        this.name = name;
    }

    study(): string {
        return `Student ${this.name} do something!`;
    }
}

class Teacher extends PersonDao {
    name: string;

    constructor(name) {
        super();
        this.name = name;
    }

    study(): string {
        return `Teacher ${this.name} do something!`;
    }

}

let teacher: PersonDao = new Teacher("Nick");

console.log(teacher.study());

let student: PersonDao = new Student("Jack");
console.log(student.study());

存取器

使用 getter 和 setter 可以改变属性的赋值和读取行为：

class Animal {
    constructor(name) {
        this.name = name;
    }
    get name() {
        return 'Jack';
    }
    set name(value) {
        console.log('setter: ' + value);
    }
}

let a = new Animal('Kitty'); // setter: Kitty
a.name = 'Tom'; // setter: Tom
console.log(a.name); // Jack

ES7 静态属性和方法

class Animal {
 static name='Hi';
    static isAnimal(a) {
        return a instanceof Animal;
    }
}

let a = new Animal('Jack');
console.log(Animal.name); // Hi
Animal.isAnimal(a); // true
a.isAnimal(a); // TypeError: a.isAnimal is not a function