js的继承方式

一、构造函数继承

改变this指向继承 
只能继承构造函数中this身上的属性和方法,不能继承原型身上的属性和方法

三种方法：
1、.call(this);
2、.apply(this);
3、.bind(this,n)();

function Parent(n){
    this.num = n;
    this.show = function(){
      console.log(this.num);
    }
   }
   
   Parent.prototype.init = function(){
     console.log(123);
   }
   
   function Child(n){
    //想在C中使用P的方法和属性
    //P的方法和属性加给谁了？this
    //P中的this是将来new出来的p
    
    //C中this是将来new出来的c
    //c要执行show 在C中的this要有show
    
    //没有,P的this有onshow
    //强行将P的this指向C的this
    
    //哪里能拿到C的this？在C中
    //这里是写在C中的 所以这里的this是C的this
    // Parent.call(this);
    // Parent.apply(this);
    Parent.bind(this,n)();
   }
   
   var p = new Parent(3.1415);
   p.show();
   p.init();
   
   var c = new Child(520);
   c.show();
   //不能继承原型身上的属性和方法
   // c.init();

二、原型对象继承

只能继承原型身上的属性和方法,不能继承构造函数中this的属性和方法
原型是一个对象，直接将原型作为一个对象复制，注意对象的深浅拷贝
// for(var i in Parent.prototype){
	Child.prototype[i] = 	Parent.prototype[i];
 }
//遍历进行深拷贝

function Parent(n){
    this.num = 123;
    this.show = function(){
     console.log(this.num);
    }
   }
   
   Parent.prototype.init = function(){
      console.log("hello");
   }
   
   function Child(n){}
   
   //原型是一个对象
   //直接将原型作为一个对象复制
   //注意对象的深浅拷贝
   // Child.prototype = Parent.prototype;
   //遍历进行深拷贝
   for(var i in Parent.prototype){
      Child.prototype[i] = Parent.prototype[i];
   }
   
   Child.prototype.init = function(){
      console.log("html");
   }
   
   var p = new Parent(3.1415);
   p.init();
   console.log(p.num);
   
   var c = new Child(520);
   c.init();
   console.log(c.num);

三、原型继承–原型链

既能继承原型的属性和方法,又能继承构造函数的属性和方法
缺点：不方便传参

function Parent(n){
    this.num = n;
   }
   
   Parent.prototype.init = function(){
      console.log("hello");
   }
   
   function Child(n){}
   //c的父级 等于Parent的儿子 p(降了两级)
   //参数要在这里传
   //这里new的实例 才是c的父级 它和上面实例的p不是一个
   Child.prototype = new Parent(520);
   
   //这是深复制 改写不影响P
   Child.prototype.init = function(){
      console.log("html");
   }
   
   
   var p = new Parent(3.1415);
   p.init();
   console.log(p.num);
   
   var c = new Child();
   c.init();
   console.log(c.num);
   
   console.log(p);
   console.log(c);

四、混合继承

混合继承 ： 常用的继承方式之一
	构造函数继承 + 原型对象继承

function Parent(n){
    this.num = n;
   }
   
   Parent.prototype.init = function(){
      console.log("hello");
   }
   
   function Child(n){
      Parent.call(this,n)
   }
   
   for(var i in Parent.prototype){
      Child.prototype[i] = Parent.prototype;
   }
   
   Child.prototype.init = function(){
      console.log("html");
   }
   
   
   var p = new Parent(3.1415);
   p.init();
   console.log(p.num);
   
   var c = new Child(123);
   c.init();
   console.log(c.num);

五、es6的继承

原理：封装改变this指向继承和原型链继承
优点：方便简单
缺点:没有普遍浏览器的支持

class Parent{
    constructor(n){
       this.name = n;
    }
    show(){
       console.log(this.name + "执行了show");
    }
   }
   
   class Child extends Parent{
      constructor(n){
     //加超级函数传参
         super(n);
    }
      show(){
         console.log(123);
    }
   }
   
   var p = new Parent("zhangsan");
   p.show();
   
   var c = new Child("lisi");
   c.show();