理解js继承的几种方式
前言
JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一。再头一次接触继承是感觉把自己搞得晕头转向,一直不想去碰触这一块,闲暇的时候决定把继承的知识点记录一下,方便自己以后查阅,个人觉得一些自己理解不了的东西何不先把它记下来.
JS继承的实现方式
想要继承,就必须要提供个父类(继承谁,提供继承的属性)
// 父类 (构造函数)
function Persion(name,age){
this.name = name;
this.age = age;
}
// 父类(构造函数)的原型对象属性
Persion.prototype.id = 10;
可以看出构造函数本质就是个函数,在函数中引用this并设置其属性值.
下边咱们就展示几种继承的方式.
1、原型继承
核心:将父类的实例作为子类的原型
// 子类 (其实子类也是一个含有this的函数)
function Boy(sex){
this.sex = sex;
}
// 继承实现 (父类的实例作为子类的原型)
Boy.prototype = new Persion('c5',27);
var b = new Boy();
alert(b.name)// c5
alert(b.id)//10
特点:
1、实例可继承的属性有:实例的构造函数的属性,父类构造函数属性,父类原型的属性。(新实例不会继承父类实例的属性!)
缺点:
1、新实例无法向父类构造函数传参。
2、继承单一。
3、所有新实例都会共享父类实例的属性。(原型上的属性是共享的,一个实例修改了原型属性,另一个实例的原型属性也会被修改!)
2、借用构造函数继承(类继承)
核心:用.call()和.apply()将父类构造函数引入子类函数(在子类函数中做了父类函数的自执行(复制))
// 子类 ()
function Boy(name,age,sex){
//call apply 实现继承
Persion.call(this,name,age);
this.sex = sex;
}
var b = new Boy('c5',27,'男');
alert(b.name)// c5
alert(b.id)//undinfind 父类的原型对象并没有继承
特点:
1、只继承了父类构造函数的属性,没有继承父类原型的属性。
2、解决了原型链继承缺点1、2、3。
3、可以继承多个构造函数属性(call多个)。
4、在子实例中可向父实例传参。
缺点:
1、只能继承父类构造函数的属性。
2、无法实现构造函数的复用。(每次用每次都要重新调用)
3、每个新实例都有父类构造函数的副本,臃肿。
3、混合继承(原型继承和类继承)
核心:原型继承和类继承的混合使用
// 子类
function Boy(name,age,sex){
//call apply 实现继承
Persion.call(this,name,age);
this.sex = sex;
}
// 原型继承实现 参数为空 代表 父类的实例和父类的原型对象的关系了
Boy.prototype = new Persion();
var b = new Boy('c5',27,'男');
alert(b.name)// c5
alert(b.id)//10
优点:方便了子类实例传参,
缺点:就是Boy.pertotype = new Persion() 函数又实例一次,函数内部变量又重复实例一次,大程序时候会很耗性能。
其实实现继承的方法还有很多,并没有介绍完,有兴趣的可以在网上查阅资料,在网上找到此篇文章觉得写得不错,可以去看看.