前端JavaScript的继承方式及其优缺点汇总

第一种原型链方式

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

1.首先在方法Son的原型上添加 parent

2.接着获取parent原型上面的数值，即可得到继承

优点：可以实现继承

缺点：

①因为Son.prototype(即原型对象)继承了Parent实例化对象，这就导致了所有Son实例化对象都一样，都共享有原型对

结果son1、son2都是['JS','HTML','CSS','VUE']

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']

②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);//JS
		son2 = new Son('HTML');
		console.log(son2);//HTML

缺点：

①方法都在构造函数中定义，每次实例化对象都得创建一遍方法，基本无法实现函数复用

②call方法仅仅调用了父级构造函数的属性及方法，没有办法调用父级构造函数原型对象的方法

第二种：组合继承

		function Parent(name){
		    this.name = name;
		    this.type = ['JS','HTML','CSS'];
		}
		Parent.prototype.Say=function(){
		    console.log(this.name);
		}
		function Son(name){
		    Parent.call(this,name);
		}
		Son.prototype = new Parent();
		son1 = new Son('张三');
		son2 = new Son('李四');
		son1.type.push('VUE');
		son2.type.push('PHP');
		console.log(son1.type);//['JS','HTML','CSS','VUE']
		console.log(son2.type);//['JS','HTML','CSS','PHP']
		son1.Say();//张三
		son2.Say();//李四

①创建一个叫做Parent的构造函数，里面有两个属性name、type

②通过Parent构造函数的属性(即原型对象)设置Say方法，此时，Parent有2个属性和1个方法

③创建子级构造函数Son，函数内部通过call方法调用父级构造函数Parent，实现继承

④子构造函数Son继承了父构造函数Parent，此时Son也有2个属性和1个方法

⑤分别创建构造函数Son的两个实例化对象son1、son2，传不同参数、给type属性新增不同元素、调用原型对象Say方法

优点：

①利用原型链继承，实现原型对象方法的继承

②利用构造函数继承，实现属性的继承，而且可以有参数

组合函数基本满足了JS的继承，比较常用

缺点：

无论什么情况下，都会调用两次父级构造函数：一次是在创建子级原型的时候，另一次是在子级构造函数内部