理解js继承的几种方式

理解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() 函数又实例一次,函数内部变量又重复实例一次,大程序时候会很耗性能。

其实实现继承的方法还有很多,并没有介绍完,有兴趣的可以在网上查阅资料,在网上找到此篇文章觉得写得不错,可以去看看.

猜你喜欢

转载自blog.csdn.net/weixin_46995731/article/details/121746884