前言
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是暗光,按道理,暗光代表隐式属性。
总结
以后需要用到继承的时候,按需要复制使用其中一个作为基础即可。