我们都知道，Javascript中是没有"类"这个概念的。但是在诸多环境中，有时又需要我们手动去实现类似java中的类和继承。下面我们来探索一下，如何才能完美实现js中的类和继承。
创建类
我们可以很简单的通过构造函数来实现一个类
// 创建类
function Animal(name, sex) {
this.name = name;
this.sex = sex;
}
Animal.prototype.say = function() {
console.log('i m animal');
}
可以直接new出实现这个类的对象。
// 创建对象
var cat = new Animal('cat', 'man');
console.log(cat.name)
console.log(cat.sex)
console.log(cat.say())
实现继承
下面我们来谈谈js中类的继承。
- 原型链继承
第一种方式就是我们经常听到的原型链继承。
function Cat(name, sex) {
Animal.call(this, name, sex);
}
Cat.prototype = new Animal;
var maoxian = new Cat('maoxian', 'nv');
maoxian.say();
console.log(cat.name)
console.log(cat.sex)
console.log(cat.say())
介绍：在这里我们可以看到new了一个空对象,这个空对象指向Animal并且Cat.prototype指向了这个空对象，这种就是基于原型链的继承。
特点：基于原型链，既是父类的实例，也是子类的实例
缺点：无法实现多态继承
- 构造继承
function Cat(name) {
Animal.call(this)
}
var maoxian = new Cat('maoxian');
console.log(maoxian.name);
console.log(maoxian.sex);
maoxian.say()
特点：可以实现多继承
缺点：只能继承父类实例的属性和方法，不能继承原型上的属性和方法。
- 组合继承
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true
特点：可以继承实例属性/方法，也可以继承原型属性/方法
缺点：调用了两次父类构造函数，生成了两份实例
- 寄生组合式继承
上面的组合继承
借用构造函数实现了继承独享属性和方法
借用原型链继承实现了继承原型链上的属性和方法
但是仔细会发现调用了两次类构造函数。
寄生继承就是不用实例化父类了，直接实例化一个临时副本实现了相同的原型链继承。（即子类的原型指向父类副本的实例从而实现原型共享）
其实感觉意义不大。。。😓
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
(function(){
// 创建一个没有实例方法的类
var Super = function(){};
Super.prototype = Animal.prototype;
//将实例作为子类的原型
Cat.prototype = new Super();
})();
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true
es6中的Class和继承
es6中有了Class，实际也是基于prototype的语法糖。但无疑使js中实现类变得简单。
- 基本用法
class Animal {
constructor(name) {
this.speed = 0;
this.name = name;
}
run(speed) {
this.speed += speed;
alert(`${this.name} runs with speed ${this.speed}.`);
}
stop() {
this.speed = 0;
alert(`${this.name} stopped.`);
}
}
// Inherit from Animal
class Rabbit extends Animal {
hide() {
alert(`${this.name} hides!`);
}
}
let rabbit = new Rabbit("White Rabbit");
rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.hide(); // White Rabbit hides!
- 重写方法
通常我们不想完全替代父方法，而是在父方法的基础上调整或扩展其功能。我们进行一些操作，让它之前/之后或在过程中调用父方法。
Class 为此提供 super关键字。
使用 super.method(...) 调用父方法。
使用 super(...) 调用父构造函数（仅在 constructor 函数中）。
class Animal {
constructor(name) {
this.speed = 0;
this.name = name;
}
run(speed) {
this.speed += speed;
alert(`${this.name} runs with speed ${this.speed}.`);
}
stop() {
this.speed = 0;
alert(`${this.name} stopped.`);
}
}
class Rabbit extends Animal {
hide() {
alert(`${this.name} hides!`);
}
stop() {
super.stop(); // call parent stop
this.hide(); // and then hide
}
}
let rabbit = new Rabbit("White Rabbit");
rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.stop(); // White Rabbit stopped. White rabbit hides!
- 重写constructor
根据规范，如果一个类扩展了另一个类并且没有constructor，那么会自动生成如下constructor：
class Rabbit extends Animal {
// generated for extending classes without own constructors
constructor(...args) {
super(...args);
}
}
我们可以看到，它调用了父 constructor 传递所有参数。如果我们不自己写构造函数，就会发生这种情况。
现在我们将一个自定义构造函数添加到 Rabbit 中。除了name，我们还会设置 earLength：
class Animal {
constructor(name) {
this.speed = 0;
this.name = name;
}
// ...
}
class Rabbit extends Animal {
constructor(name, earLength) {
this.speed = 0;
this.name = name;
this.earLength = earLength;
}
// ...
}
// Doesn't work!
let rabbit = new Rabbit("White Rabbit", 10); // Error: this is not defined.
需要注意的地方是，在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，基于父类实例，只有super方法才能调用父类实例。
对于 Rabbit 来说，我们需要在使用 this 之前调用 super()，如下所示：
class Animal {
constructor(name) {
this.speed = 0;
this.name = name;
}
// ...
}
class Rabbit extends Animal {
constructor(name, earLength) {
super(name);
this.earLength = earLength;
}
// ...
}
// now fine
let rabbit = new Rabbit("White Rabbit", 10);
alert(rabbit.name); // White Rabbit
alert(rabbit.earLength); // 10
就是这些啦，其实类和继承在实战中用的很少，js毕竟不是基于类的语言，只是面试中有时会问到。有帮助的话给点个赞呗~~
参考文章: https://segmentfault.com/a/1190000015565616#articleHeader0
