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

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