JavaScript面向对象轻松入门之继承(demo by ES5、ES6)

　　继承是面向对象很重要的一个概念，分为接口继承和实现继承，接口继承即为继承某个对象的方法，实现继承即为继承某个对象的属性。JavvaScript通过原型链来实现接口继承、call()或apply()来实现实现继承。

　　接口继承的实现在ES5中是比较麻烦，在其它OOP语言中一个extends关键字就可以实现，但在ES5中要通过原型链去模拟，非常难理解，对初学者很不友好，并且有好几种接口继承的方式。本文为了对初学者更友好，并不打算让读者了解接口继承的原理，而是直接把接口继承实现方法封装成一个函数，大家只要把这个函数拿过去用就可以了。

　　相关概念：父类（超类）即为被继承者，子类（派生类）即继承者

接口继承函数extend():

function extend(subClass, superClass) {
    function o() {
        this.constructor = subClass;
    }
    o.prototype = superClass.prototype;
    subClass.prototype = new o();
    return subClass.prototype;
}
/*
subClass是子类，superClass是父类，extend函数让subClass继承superClass的原型方法，并返回subClass的原型；
这种继承方式也是用的最多的，并且ES6的extends也是通过这种方式实现的,可以说是比较权威的用法；
*/

ES5继承DEMO：

function Animal(shoutVoice,speed){
    this._shoutVoice = shoutVoice;//string
    this._speed = speed;//string
}
Animal.prototype.getSpeed = function(){
    return this._speed;
};
Animal.prototype.shout = function(){
    console.log(this._shoutVoice);
};
Animal.prototype.run = function(){
    console.log('嘿嘿，吃我灰吧！我的速度可是有'+this._speed);
};

function Dog(){
    Animal.call(this,'汪汪汪！','10m/s');
    //实现继承：调用Animal的构造函数，继承Animal类的属性，第一个参数必须是this；
}
//接口继承：extends函数让Dog类继承Animal类的的原型方法并返回Dog的新的原型prototype;
var DogP = extend(Dog,Animal);
/*可以继续给的Dog类的prototype添加方法*/
DogP.gnawBone = function() {
    console.log('这是本狗最幸福的时候');
}
/*也可以把父类的方法覆盖掉*/
DogP.run = function(){
    console.log('这是Dog类上的run方法，不是Animal类的');
    /*虽然覆盖掉了，但实际上Animal类的run方法还在，也可以通过这种方式访问父类的方法,
    对原理有兴趣的同学可以了解一下原型链*/
    Animal.prototype.run.call(this);
}
var dog = new Dog();
console.log(dog.getSpeed());//log: '10m/s'
dog.shout();//log: '汪汪汪！'
dog.run();
/*log:
'这是Dog类上的run方法，不是Animal类的'
'嘿嘿，吃我灰吧！我的速度可是有10m/s'
*/
dog.gnawBone();//log: '这是本狗最幸福的时候'42 /*其它类继承Animal类*/
function Snake(){
    Animal.call(this,'嘶！嘶！嘶！','5m/s');
}
var SnakeP = extend(Snake,Animal);
/*Dog类也可以继续被继承*/
function PoodleDog(){
    Dog.call(this);
    this._breed = 'poodle';
}
var PoodleDogP = extend(PoodleDog,Dog);
/*理论上讲可以无限继承下去，如浏览器DOM对象就继承了很多个对象，组成了一个长长的原型链
如一个div标签对象的类继承顺序：
HTMLDivElement<HTMLElement<Element<Node<EventTarget<Object
但我们的项目中最好别超过3次，否则就不太好控制了；*/

注意事项：

　　*继承的次数不应过多，否则子类一不小心就把父类的属性方法给覆盖了；
　　*我们可以把继承的对象作为成员属性，即组合,尽量少用继承，多用组合；
　　*父类的属性和方法最好别太多，过多也容易被子类覆盖，可以抽象成一个对象来管理过多的属性和方法。
　　*继承增加了耦合，所以父类封装性一定要好，尽量降低与子类的耦合，
　　*父类的设计要有前瞻性，具备一定的扩展能力，你也不希望今后修改父类的时候，再去修改所有的子类吧？

　　*父类尽量只定义方法，不定义属性，即构造函数最好是空函数；

ES6继承DEMO：

　　ES6实现继承就方便很多了，由于TypeScript实现继承和ES6差不多，所以这章就不贴出TypeScript的Demo了

class Animal{
    constructor(shoutVoice,speed){
        this._shoutVoice = shoutVoice;//string
        this._speed = speed;//string
    }
    get speed(){
        return this._speed;
    }
    shout(){
        console.log(this._shoutVoice);
    }
    run(){
        console.log('嘿嘿，吃我灰吧！我的速度可是有'+this._speed);
    }
}
class Dog extends Animal{
    constructor(){
        super('汪汪汪！','10m/s');//相当于Animal.call(this,'汪汪汪！','10m/s');
    }
    gnawBone() {
        console.log('这是本狗最幸福的时候');
    }
    run(){
        console.log('这是Dog类上的run方法，不是Animal类的');
        super.run();//相当于Animal.prototype.run.call(this);
    }
}
class PoodleDog extends Dog{
    constructor(){
        super();
        this._breed = 'poodle';
    }
    get breed(){
        return this._breed;
    }
}
let poodleDog = new PoodleDog();
console.log(poodleDog.breed);//log: 'poodle'
console.log(poodleDog.speed);//log: '10m/s'
poodleDog.shout();//log: '汪汪汪！'
poodleDog.run();
/*log:
'这是Dog类上的run方法，不是Animal类的'
'嘿嘿，吃我灰吧！我的速度可是有10m/s'
*/
poodleDog.gnawBone();//log: '这是本狗最幸福的时候'

后话

　　js的继承与其它OOP语言有一些不同的地方，所以最终还是要深刻的理解原型、原型链才能灵活运用，希望大家有时间一定要把这部分知识补上；

　　如果你喜欢作者的文章，记得收藏，你的点赞是对作者最大的鼓励；

　　作者会尽量每周更新一章，下一章是讲多态；

　　大家有什么疑问可以留言或私信作者，作者尽量第一时间回复大家；

　　如果老司机们觉得那里可以有不恰当的，或可以表达的更好的，欢迎指出来，我会尽快修正、完善。