在上一篇博客中我们介绍了面向对象以及原型的一些概念,所以这次分享JS中面向对象的继承。
1.继承的概念:
让一个没有某个属性或方法的对象能够使用另一个具有某方法或属性的对象的属性或方法。
2.一种简单的继承
var obj1={
name:"zs",
show:function(){console.log(this.name);}
};
var obj2={name:"ls"};
obj.show.call(obj2);
3.原型对象继承
浅拷贝:Child.prototype=Parent.prototype;
深拷贝:for(var i in Parent.prototype){ Child.prototype[i]=Parent.prototype[i]; }
function Parent (){}
Parent.prototype.show=function(){
console.log("hello parent");
}
function Child(){
}
Child.prototype=Parent.prototype;//浅拷贝,如果修改了子元素的原型上的方法,父元素也会跟着修改
new Child().show();//hello parent
// 修改子元素原型上的方法
Child.prototype.show=function(){
console.log("hello child");
}
new Child().show();//hello child
new Parent().show();//hello child
原型对象继承的特点:只能继承原型上的方法和属性,不能继承构造函数内部的方法和属性。
4.原型链的继承
原型链继承:Child.prototype=new Parent();
function Parent (){}
Parent.prototype.show=function(){
console.log("hello parent");
}
function Child(){
}
Child.prototype=new Parent();
Child.prototype.show=function(){
console.log("hello child");
}
new Child().show();//hello child
new Parent().show();//hello parent
原型链继承的原理:
c.__ proto__ ==>Child.prototype==>Parent的实例p ==>p.__ proto__ ==>Parent.prototype
原型链继承的特点:
不仅可以继承原型上的方法和属性,还可以继承构造函数内部的方法和属性,但是不方便给继承以后的构造函数传参。
5.构造函数的继承
function Child(c){Parent.call(this,c);}
function Parent (s){
this.s=s;
}
Parent.prototype.show=function(){
console.log(this.s);
}
console.log(new Parent("parent").s); //parent
function Child(c){
Parent.call(this,c);
}
console.log(new Child("child").s)//child
new Child("child").show();//报错 show is not a function ,因为构造函数继承只能继承构造函数内的属性和方法.
构造函数继承的特点:
方便传参;还可以实现多继承。
缺点是只能继承构造函数内部的属性和方法,不能继承原型的属性和方法。
6.组合(混合继承)
function Child(c){ Parent.call(this,c); }
for(var i in Parent.prototype){ Child.prototype[i]=Parent.prototype[i]; }
function Parent (s){
this.s=s;
}
Parent.prototype.show=function(){
console.log(this.s);
}
console.log(new Parent("parent").s); //parent
function Child(c){
Parent.call(this,c);
}
for(var i in Parent.prototype){
Child.prototype[i]=Parent.prototype[i];
}
console.log(new Child("child").s)//child
new Child("child").show();//child
混合继承的特点:
既可以继承构造函数内的方法和属性,又可以继承原型上的方法和属性,但是原型链继承会存在一些隐患。
7.ES6的继承
class Child extends Parent{ constructor(c){ super(c);}
super必须在constructor中所有代码最前面
class Parent{
constructor(s){
this.s=s;
}
}
class Child extends Parent{
constructor(c){
super(c);//改变this指向并且传参,super必须在constructor中所有代码最前面
}
}
ES6继承的特点:
相当于构造函数继承+原型链继承
以上就是JS中几种常见的继承方式,不足之处请大家留言指正_