JavaScript的继承

JavaScript的继承

一.ES6 class 继承：
1.class继承实际上是构造函数的继承和原型链继承的综合封装
2.class继承优点是操作简单， 即可以继承原型又可以继承 构造函数
2.实现的方法：关键字extend和super
3.实例：

constructor(n){
					this.name=n;
					
				}
				say(){
					console.log('我是'+this.name);
				}
				
			}
			class Child extends Parent{//继承的实现方式
				constructor(n){
					super(n);
					
				}
			}
			var p1=new Parent('张钦');
			p1.say();
			var p2=new Child('李四');
			p2.say();
			

二.构造函数继承

1.构造函数与构造函数之间的继承，实质是改变函数的this指向，利用blind

2.优点：简单易操作可以实现多继承

缺点：只能继承构造函数中的内容，不能继承原型上的内容；

4.实例:

function Parent(n){
				this.name=n;
				this.say=function(){
					console.log('你好'+this.name);
				}
			}
			Parent.prototype.show=function(){
				console.log('欢迎您的到来')
			}
			function Child(n){
				Parent.bind(this,n)();//改变构造函数的this为child
				//Parent.call(this,n);//call与this作用一样，但他是自执行
				//Parent.apply(this,[n]);//apply与this的功能一样，但是形参必须放在数组中
			}
			var p1=new Parent('张钦');
			var p2=new Child('李四')
			p1.say();
			p1.show();
			p2.say();
			p2.show();// 报错

三：原型继承

1.利用函数的prototype相等去实现;

2.优点:

缺点:可以继承到构造函数和原型上的东西，但是不方便传参

3.bug版：对象的浅拷贝引起的

function Parent(n){
				this.name=n;
				this.say=function(){
					console.log('你好'+this.name);
				}
			}
			Parent.prototype.show=function(){
				console.log('欢迎您的到来')
			}
			function Child(n){
			}
			Child.prototype=Parent.prototype;
			Child.prototype.show=function(){//对象的引用传递会使Parent的show也发生变化
				console.log('欢迎下次光临');
			}
			var p1=new Parent('张钦');
			var p2=new Child('李四')
			p1.say();
			p1.show();//
			//p2.say();// 报错，但是不能继承构造函数上的内容
			p2.show();//继承了原型上的内容

4.完整版：解决方式：1.原型方式2.对象方式（1.for in2.json对象转化）

function Parent(n){
				this.name=n;
				
			}
			Parent.prototype.show=function(){
				console.log('欢迎您的到来')
			}
			function Child(n){
			}
		    Child.prototype=new Parent();//将Parent的实例作为Child.prototype的父，这样Child.prototype就能沿着实例Parent找到他的父Parent的父Parent.prototype;
			var p1=new Parent('张钦');
			var p2=new Child('李四')
			console.log(p1);
			console.log(p2);
			p1.show();
			p2.show();

四：混合继承

混合继承：将构造函数继承和原型继承结合

实例：最终完整版（案例实战版）

function Parent(n){
				this.name=n;
				this.say=function(){
					console.log('你好'+this.name);
				}
			}
			Parent.prototype.show=function(){
				console.log('欢迎您的到来')
			}
			
			function Child(n){
				Parent.bind(this,n)();
			}
			Child.prototype=new Parent();//一原型的方式二以对象的方式（未写）
			Child.prototype.show=function(){//注意要写自己方法或属性时要写在继承的后面
				console.log('欢迎下次光临');
			}
			var p1=new Parent('张钦');
			var p2=new Child('李四');
			p1.say();
			p1.show();
			p2.say();
			p2.show();