6种JavaScript继承方式及优缺点(小结)

温馨提示：想要更好的理解JS继承方式，须了解构造函数、原型对象、实例化对象、原型链等概念

第一种：原型链继承

利用原型链的特点进行继承

function Parent(){  this.name = 'web前端';  this.type = ['JS','HTML','CSS'];}Parent.prototype.Say=function(){  console.log(this.name);}function Son(){};Son.prototype = new Parent();son1 = new Son();son1.Say();

以上例子解释：

①创建一个叫做Parent的构造函数，暂且称为父构造函数，里面有两个属性name、type
②通过Parent构造函数的属性(即原型对象)设置Say方法，此时，Parent有2个属性和1个方法
③创建一个叫做Son的构造函数，暂且称为子构造函数
④设置Son的属性(即原型对象)值为父构造函数Parent的实例对象，即子构造函数Son继承了父构造函数Parent，此时Son也有2个属性和1个方法
⑤对Son构造函数进行实例化，结果赋值给变量son1，即son1为实例化对象，同样拥有2个属性和1个方法
⑥输出son1的Say方法，结果为"web前端"

优点：可以实现继承

缺点：
①因为Son.prototype(即原型对象)继承了Parent实例化对象，这就导致了所有Son实例化对象都一样，都共享有原型对象的属性及方法。代码如下：

son1 = new Son();son2 = new Son();son1.type.push('VUE');console.log(son1.type);//['JS','HTML','CSS','VUE']console.log(son2.type);//['JS','HTML','CSS','VUE']

结果son1、son2都是['JS','HTML','CSS','VUE']
②Son构造函数实例化对象无法进行参数的传递

第二种：构造函数继承

通过构造函数call方法进行继承，直接来看代码：

function Parent(){  this.name = 'web前端';  this.type = ['JS','HTML','CSS'];}function Son(){  Parent.call(this);}son1 = new Son();son1.type.push('VUE');console.log(son1.type);//['JS','HTML','CSS','VUE']son2 = new Son();console.log(son2.type);//['JS','HTML','CSS']

以上例子解释：
①创建父级构造函数Parent，有name、type两个属性
②创建子级构造函数Son，函数内部通过call方法调用父级构造函数Parent，实现继承
③分别创建构造函数Son的两个实例化对象son1、son2，对son1的type属性新增元素，son2没有新增，结果不一样，说明实现了独立

优点：
①实现实例化对象的独立性；
②还可以给实例化对象添加参数

function Parent(name){  this.name = name;}function Son(name){  Parent.call(this,name);}son1 = new Son('JS');console.log(son1);//JSson2 = new Son('HTML');console.log(son2);//HTML

缺点：
①方法都在构造函数中定义，每次实例化对象都得创建一遍方法，基本无法实现函数复用
②call方法仅仅调用了父级构造函数的属性及方法，没有办法调用父级构造函数原型对象的方法