ES5、ES6 如何实现继承
相关问题
关于 ES5 和 ES6 的继承问题
原型链概念
回答关键点
原型链继承构造函数继承ES6 类继承
继承是指子类型具备父类型的属性和行为,使代码得以复用,做到设计上的分离。JavaScript 中的继承主要通过原型链和构造函数来实现。常见的继承方法有:ES6 中 class 的继承、原型链继承、寄生组合式继承等。
知识点深入
1. 原型链
原型链的本质是拓展原型搜索机制。每个实例对象都有一个私有属性 __proto__。该属性指向它的构造函数的原型对象 prototype。该原型对象的 __proto__ 也可以指向其他构造函数的 prototype。依次层层向上,直到一个对象的 __proto__ 指向 null。根据定义,null 没有原型,并作为这个原型链中的最后一个环节。
当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或直到这个链表结束(Object.prototype.__proto__ === null)。
2. 原型链继承
原型链继承的思想:一个引用类型继承另一个引用类型的属性和方法。
functionSuperType(){
this.b=[1,2,3];
}
functionSubType(){}
SubType.prototype=newSuperType();
SubType.prototype.constructor=SubType;
varsub1=newSubType();
varsub2=newSubType();
//这里对引用类型的数据进行操作
sub1.b.push(4);
console.log(sub1.b);//[1,2,3,4]
console.log(sub2.b);//[1,2,3,4]
console.log(sub1instanceofSuperType);//true
优点:
父类新增原型方法/原型属性,子类都能访问到。
简单、易于实现。
缺点:
无法实现多继承。
由于原型中的引用值被共享,导致实例上的修改会直接影响到原型。
创建子类实例时,无法向父类构造函数传参。
3. 构造函数继承
构造函数继承的思想:子类型构造函数中调用父类的构造函数,使所有需要继承的属性都定义在实例对象上。
functionSuperType(name){
this.name=name;
this.b=[1,2,3];
}
SuperType.prototype.say=function(){
console.log("HZFE");
};
functionSubType(name){
SuperType.call(this,name);
}
varsub1=newSubType();
varsub2=newSubType();
//传递参数
varsub3=newSubType("Hzfe");
sub1.say();//使用构造函数继承并没有访问到原型链,say方法不能调用
console.log(sub3.name);//Hzfe
sub1.b.push(4);
//解决了原型链继承中子类实例共享父类引用属性的问题
console.log(sub1.b);//[1,2,3,4]
console.log(sub2.b);//[1,2,3]
console.log(sub1instanceofSuperType);//false
优点:
解决了原型链继承中子类实例共享父类引用属性的问题。
可以在子类型构造函数中向父类构造函数传递参数。
可以实现多继承(call 多个父类对象)。
缺点:
实例并不是父类的实例,只是子类的实例。
只能继承父类的实例属性和方法,不能继承原型属性和方法。
无法实现函数复用,每个子类都有父类实例函数的副本,影响性能。
4. 组合继承(伪经典继承)
组合继承的思想:使用原型链实现对原型属性和方法的继承,借用构造函数实现对实例属性的继承。
functionSuperType(name){
this.name=name;
this.a="HZFE";
this.b=[1,2,3,4];
}
SuperType.prototype.say=function(){
console.log("HZFE");
};
functionSubType(name){
SuperType.call(this,name);//第二次调用SuperType
}
SubType.prototype=newSuperType();//第一次调用SuperType
SubType.prototype.constructor=SubType;
优点:
可以继承实例属性/方法,也可以继承原型属性/方法。
不存在引用属性共享问题。
可传参
函数可复用
缺点:
调用了两次父类构造函数(耗内存),生成了两份实例。
5. 寄生组合式继承
寄生组合式继承的思想:借用构造函数来继承属性,使用混合式原型链继承方法。
//在函数内部,第一步创建父类原型的一个副本,第二部是为创建的副本添加constructor属性,
//从而弥补因重写而失去的默认的 constructor 属性。最后一步,将新创建的对象(即副本)赋值给予类型的原型。
functioninheritPrototype(subType,superType){
varprototype=Object.create(superType.prototype);//创建对象
prototype.constructor=subType;//增强对象
subType.prototype=prototype;//指定对象
}
functionSuperType(name){
this.name=name;
}
SuperType.prototype.sayName=function(){
console.log(this.name);
};
functionSubType(name,num){
SuperType.call(this,name);
this.num=num;
}
inheritPrototype(SubType,SuperType);
SubType.prototype.sayNum=function(){
console.log(this.num);
};
优点:
只调用了一次 SuperType 构造函数,手机游戏卖号平台避免了在 SubType.prototype 上创建不必要的属性。
能够正常使用 instanceof 和 isPrototypeOf()。
缺点:
实现较为复杂
6. ES6 中 class 的继承
ES6 中引入了 class 关键字, class 可以通过 extends 关键字实现继承,还可以通过 static 关键字定义类的静态方法,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。需要注意的是:class 关键字只是原型的语法糖, JavaScript 继承仍然是基于原型实现的。
classPet{
constructor(name,age){
this.name=name;
this.age=age;
}
showName(){
console.log("调用父类的方法");
console.log(this.name,this.age);
}
}
//定义一个子类
classDogextendsPet{
constructor(name,age,color){
super(name,age);//通过super调用父类的构造方法
this.color=color;
}
showName(){
console.log("调用子类的方法");
console.log(this.name,this.age,this.color);
}
}
优点:
清晰方便
缺点:
不是所有的浏览器都支持 class。
参考资料
JS 实现继承的几种方式
阮一峰 ES6 入门之 class 的继承
《JavaScript 高级程序设计》
《你不知道的 JavaScript》
更多相关文章
- Vue组件为什么data必须是一个函数呢?本文案例详解
- 08-11 作业 面对对象和自动加载 封装 继承 多态
- 补0812:类
- opp基础:类与对象的 类的继承和调用 构造器 静态成员等
- php面向对象之对象成员,静态成员,继承
- 实例演示作用域与闭包; 2. 实例演示类与类的继承
- dom(Document Object Model )初
- 先从_proto_下手理解原型--原型学习(一)
- (1)pyqt5教程--->fristwindow(代码结构)