梳理一下JS中的继承方法

JS中的继承

什么是继承？

继承可以在一个对象中去访问另一个对象的方法或者属性，提高代码自由度。

方法

一、通过call继承

1.解决引用类型继承问题
例：

// 父类
      function Parent(name) {
          this.name = name;
          this.color = ['pink', 'red'];
      }
  
      // 子类
      function Child() {
          Parent.call(this);
         // 定义自己的属性
         this.value = 'test';
     }
     var child1 = new Child();
     var child2 = new Child(); 
     // 先输出child1和child2种color的值
     console.log(child1.color); // ["pink", "red"]
     console.log(child2.color); // ["pink", "red"]

     // 在child1的color数组添加white
     child1.color.push('white');
     console.log(child1.color); // ["pink", "red", "white"]
     // child1上的改动，child2并没有受到影响
     console.log(child2.color); // ["pink", "red"]

2.解决传参数问题
例：

	// 父类
    function Parent(name) {
        this.name = name;
        this.color = ['pink', 'red'];
    }
    // 子类
    function Child(name) {
        Parent.call(this, name);
        // 定义自己的属性
        this.value = 'test';
    }
    var child = new Child('小明');
    // 将'小明'传递给Parent
    console.log(child.name); // 小明

在这里，我们借用call函数可以改变函数作用域的特性，在子类中调用父类构造函数，复制父类的属性。此时没调用一次子类，复制一次。此时，每个实例都有自己的属性，不共享。同时我们可以通过call函数给父类传递参数。
弊端：共享的方法都在构造函数中定义，无法达到函数复用的效果。

二、通过原型链继承

例：

	// 父类
    function Parent() {
        this.value = 'value';
    }
    Parent.prototype.sayHi = function() {
            console.log('Hi');
        }
    // 子类
    function Child() {
    // 改变子类的prototype属性为父类的实例
    Child.prototype = new Parent();
    var child = new Child();
    // 首先现在child实例上进行查找，未找到，
    // 然后找到原型对象（Parent类的一个实例），在进行查找，未找到，
    // 在根据__proto__进行找到原型，发现sayHi方法。
    // 实现了Child继承
    child.sayHi();

弊端：实例化子类的时候，无法给父类传参。

三、借用构造函数继承

例：

function People(name, age) {
    this.name = name;
    this.age = age;
    this.books=['格林童话'],
    this.sayHello=function() {
      console.log(
        "hello,my name is " + this.name + ",I am " + this.age + " years old"
      );
    }
  }
  People.prototype = {
    constructor: People,
  };
  function Student(stuNo,...rets) {
    this.stuNo = stuNo;
    People.apply(this,rets)
  }
  Student.prototype={
    constructor:Student,
    sayStudentNo:function(){
      console.log(`大家好，我是${this.name},我的学号是${this.stuNo}`);
    }
  }
  const s1 = new Student("202000001",'小明',18);
  s1.sayHello(); //父类的方法
  s1.sayStudentNo() //子类自己的方法
  const s2=new Student("202000002");
  s2.books.push('灰姑凉')
  s1.books.push("哈利波特")
  console.log(s1.books,s2.books)

在子类的构造函数中调用父类的构造函数，并绑定当前子类的this。这就会把父类构造函数中的所有属性和方法添加到子类的构造函数中，使得子类可以拥有父类中的属性和方法。

弊端：子类不能访问到父类原型中的方法和属性，导致只能把父类的所有属性和方法都写在子类的构造函数中，从而函数的复用也就无从谈起了。

四、组合继承

例：

  function inherit(Sup, Sub) {
    let obj = Object.create(Sup.prototype);
    obj.constructor = Sub;
    return obj;
  }
  function People(name, age) {
    this.name = name;
    this.age = age;
    this.books = ["格林童话"];
  }
  People.prototype = {
    constructor: People,
    sayHello: function () {
      console.log(
        "hello,my name is " + this.name + ",I am " + this.age + " years old"
      );
    },
  };
  function Student(stuNo, ...rets) {
    this.stuNo = stuNo;
    People.apply(this, rets);
  }
  Student.prototype=inherit(People,Student)
  Student.prototype.sayStudentNo = function () {
    console.log(`大家好，我是${this.name},我的学号是${this.stuNo}`);
  };
  const s1 = new Student("202000001", "小明", 18);
  s1.sayHello();
  s1.sayStudentNo();
  const s2 = new Student("202000002", "飞飞", 19);
  s2.sayHello();
  s2.sayStudentNo();
  s2.books.push("灰姑凉");
  s1.books.push("哈利波特");
  console.log(s1.books, s2.books);

实际上，我们在组合使用原型和借用构造函数继承的时候，子类去继承父类的原型中的方法时，没有必要让子类的原型对象等于父类的实例（会造成属性的冗余），我们需要的是一个对象，他的proto指向父类的prototype即可，这样我们就可以通过原型链去访问到父类原型中的方法，又不会造成属性的冗余。可以使用Object.create()来创建这个对象。

五、ES6中的Class的继承

在ES6中可以通过class来创建类，class可以使用extends关键字来实现继承。
例：

class People {
    constructor(name, age) {
      this.name = name;
      this.age = age;
      this.books = ["格林童话"];
    }
    sayHello() {
      console.log(
        "hello,my name is " + this.name + ",I am " + this.age + " years old"
      );
    }
  }
  class Student extends People {
    constructor(name, age, stuNo) {
      super(name, age);
      this.stuNo = stuNo;
    }
    sayStudentNo() {
      console.log(`大家好，我是${this.name},我的学号是${this.stuNo}`);
    }
  }
  const s1 = new Student( "小明", 18,"202000001");
  s1.sayHello();
  s1.sayStudentNo();
  const s2 = new Student( "飞飞", 19,"202000002");
  s2.sayHello();
  s2.sayStudentNo();
  s2.books.push("灰姑凉");
  s1.books.push("哈利波特");
  console.log(s1.books, s2.books);