js继承的7种方式

突然发现自己好久没有更新博客，今天刚好研究js的继承，感觉挺有意思的，特拿来给大家分享一下。

第一 通过原型和原型链实现继承

<script type="text/javascript">
	Grand.prototype.lastName = 'lin'; 
	function Grand(){
		
	}
	var grand = new Grand();
	Father.prototype = grand;
    function Father(){
    	this.name = 'hehe';
    }
    var father = new Father();
    Son.prototype = father;
	function Son(){
		
	}
	var son = new Son();
    console.log(son.lastName);
</script>

打印结果

这种方式的缺点是：

1、后代不想继承某些属性，也会被链式的继承来。降低了开发效率。

2、子类可以重写父类的上的方法（导致其它的实例也受到影响）。

3、父类中私有或者公有的属性方法，最后都会变为子类中公有的属性和方法。

第二 借用构造函数的call/apply方法

1.使用call方法
<script type="text/javascript">
	function Person(name,age){
		this.name = name;
		this.age = age;
	}
Person.prototype.say = function(){}
	function Student(name,age,sex,score){
		Person.call(this,name,age);
		this.sex = sex;
		this.score = score;
	}
	
	var student = new Student('zhangsan',34,'male',98);
	console.log(student);
    student.say();//Uncaught TypeError: student.say is not a function
</script>
2.使用apply方法
<script type="text/javascript">
	function Person(name,age){
		this.name = name;
		this.age = age;
	}
    Person.prototype.say = function(){}
	function Student(name,age,sex,score){
		// 与call的区别是这里是数组实现的。
		Person.apply(this,[name,age]);
		this.sex = sex;
		this.score = score;
	}
	
	var student = new Student('zhangsan',34,'male',98);
	console.log(student);
    student.say();//Uncaught TypeError: student.say is not a function
</script>

打印结果

缺点：

1.不能继承借用构造函数的原型上的属性和方法 2.每次构造函数都要多执行一个函数，降低开发效率。

2、只能继承父类私有的属性或者方法（因为这样是把父类当作普通函数执行，和其原型上的属性和方法没有关系）。

3、父类私有的属性和方法变为子类私有的属性和方法。没有实现父类公有变为子类公有的属性和方法。

第三  共享原型

<script type="text/javascript">
	Person.prototype.hobby = "yin";
	function Person(){
		
	}
	function Student(){
		
	}
	function inherit(Target,Origin){
		Target.prototype = Origin.prototype;
	}
	inherit(Student,Person);
	var person = new Person();
	var student = new Student();
	Student.prototype.name = 'zhangsan';

	console.log(student.hobby);
	console.log(student.constructor);
	console.log(Person.prototype);
</script>

打印如下：

缺点：1.子代修改了原型的属性，将导致父代原型的修改；2.后代的constructor函数不再指向自己。

第四 圣杯模式

<script type="text/javascript">
	Person.prototype.hobby = "yin";
	function Person(){
		
	}
	function Student(){
		
	}
	 //定义一个实现继承的函数
	function inherit(Target,Origin){
		function F(){};
		F.prototype = Origin.prototype;
		Target.prototype = new F();
	}
	// 调用继承函数
	inherit(Student,Person);
	var person = new Person();
	var student = new Student();
	Student.prototype.name = 'zhangsan';

	console.log(student.hobby);
	console.log(student.constructor)
	console.log(Person.prototype);
</script>

打印如下：

从打印结果来看此模式改善了共享原型的第一个缺点，但是第二个缺点没有完善。下面拿出杀手锏进行完善圣杯模式

第五 完美圣杯模式

<script type="text/javascript">
	Person.prototype.hobby = "yin";
	function Person(){
		
	}
	function Student(){
		
	}
	 //定义一个实现继承的函数
//	function inherit(Target,Origin){
//		function F(){};
//		F.prototype = Origin.prototype;
//		Target.prototype = new F();
//	}
	// 利用闭包的私有属性改造函数让student.constructor指向自己
	var inherit = (function(){
		var F = function(){};
		return function(Target,Origin){
			F.prototype = Origin.prototype;
			Target.prototype = new F();	
			// 重点来了
			Target.prototype.constructor = Target;
			Target.prototype.uber = Origin.prototype;
		}
	}());
	// 调用继承函数
	inherit(Student,Person);
	var person = new Person();
	var student = new Student();
	Student.prototype.name = 'zhangsan';

	console.log(student.hobby);
	console.log(student.constructor)
	console.log(Person.prototype);
</script>

打印结果

六、寄生组合继承

function Person(name,age) {
    this.name = name;
    this.age = age;
}
Person.prototype.say = function() {
    console.log(`my name is ${this.name},my age is ${this.age}`)
}
function Student(name,age) {
    Person.call(this,name,age)
}

	var inherit = (function(){
		var F = function(){};
		return function(Target,Origin){
			F.prototype = Origin.prototype;
			Target.prototype = new F();	
			// 重点来了
			Target.prototype.constructor = Target;
			Target.prototype.uber = Origin.prototype;
		}
}

inhert(Student,Person)

七 es6的类实现

class Person {
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    say(){
        console.log(`my name is ${this.name},age is ${this.age}`)
    }
}

class Student extends Person {
    constructor(name,age,score) {
        super(name,age);
        this.score = score
    }
}

完美实现，太开心了。