前言

js 的继承老生常谈了，网上也总结了很多继承方法，有原型继承、原型链继承、寄生继承、构造函数继承、组合继承等，各种方法各有利弊，现在ES6提出了新的继承机制，完美摆平了这乱七八糟的局面，但是ES6还没能兼容所有浏览器，所以笔者分别用ES5和ES6写出2种完整继承的方法，学会这2个即可。

实例代码

具体看代码和注释，不明的地方百度即可，可以把代码拷贝到本地运行，看效果：

//ES5组合继承
~function(){
//定义父类
function Father(name){
this.name=name;
}
Father.prototype.speak=function(str){
console.log(str);
}

//定义子类
function Son(name,age){
Father.call(this,name);
this.age=age;
}
Son.prototype = Object.create(Father.prototype); //创建新的原型对象
Son.prototype.constructor = Son; //构造器重新指定

//子类继承并扩展父类同名方法
Son.prototype.speak = function(str){
str="儿子说：我的名字叫"+this.name;
Father.prototype.speak.call(this,str);//继承父亲的speak方法
}

//创建子类实例
let son = new Son("ES5",5);
console.log("ES5继承效果");
console.log(son);
son.speak("这是ES5继承方法");
}()

console.log("----------------------------");

//ES6继承
~function(){
//定义父类
class Father{
constructor(name){
this.name=name;
}
speak(str){
console.log(str);
}
}
//定义子类
class Son extends Father{
constructor(name,age){
super(name); //必须在this前使用super调用父类的构造函数
this.age=age;
}
//子类继承并扩展父类同名方法
speak(str){
str="儿子说：我的名字叫"+this.name;
super.speak(str);//使用super调用/继承父类的speak方法
}
}

//创建子类实例
let son = new Son("Es6",5);
console.log("ES6继承效果");
console.log(son);
son.speak("这是ES6继承方法");
}()

运行效果

看输出效果，2者原型链是完整的，整体基本一致，区别地方有：

• 构造函数constructor类别不同，ES5是function，ES6是class。
• 部分对象例如speak，2者着色不一样，ES5的是高光，ES6是暗光，按道理，暗光代表隐式属性。

总结

以后需要用到继承的时候，按需要复制使用其中一个作为基础即可。