类的概念
虽然 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
