继承及ES6继承

一.继承的概念

<script>
      面向对象的三大特点：多态、继承、封装
      继承：一个类型的对象能够访问另外一个类型的属性和方法
      (函数)类与类之间的关系 类就是众多实例共有的属性和方法的一个抽象
      原型对象中的this指向实例
      function Person() {
        this.name = "zhangsan";
        this.age = 20;
      }
      var person = new Person();//person只是一个实例
      console.log(person.age);
    </script>

二.call、apply 继承

call在给fn传递参数的时候，是一个个的传递值的，
而apply不是一个个传，而是把要给fn函数传递的参数值统一的放在一个数组中进行操作->
但是也相当于一个个给fn的形参赋值，call跟apply的惟一区别。
bind这个方法在IE6~8下不兼容->和call/apply类似，都是用来改变this关键字的。
call改变this和执行fn函数一起都完成了，而bind只改变，并没有执行。

<script>
      function Person(name, age) {
        this.name = name;
        this.age = age;
        this.sayHello = function () {
          console.log(this.name);
        };
      }
      function Male(name, age) {
        Person.call(this, name, age);
        this.hj = "yes";
      }
      function Female(name, age) {
        Person.call(this, name, age);
        this.getBaby = function () {};
      }
      let male = new Male("zhangsan", 20);
      male.sayHello();
    </script>

三.原型继承

<script>
      //原型：原型对象

      //每一个函数都有一个prototype属性，我们把这个属性叫做原型或者原型对象，原型对象里的属性和方法能被实例所访问。

      function Person() {}

      Person.prototype.name = "john";
      Person.prototype.age = 20;
      Person.prototype.sayHello = function () {
        console.log(this.name);
      };

      /* let person = new Person();
      console.log(person.__proto__ == Person.prototype);  -> true */

      function Male() {}
      //通过代码实现继承*************

      Male.prototype = new Person();

      console.log(Male.prototype.__proto__ === Person.prototype); //  -> true

      let male = new Male();

      console.log(male.__proto__ === Male.prototype);

      male.sayHello();

      //首先访问实例属性和方法
    </script>

四.组合继承

<script>
      //属性放到构造函数里，方法放到原型对象上
      function Person(name, age) {
        this.name = name;
        this.age = age;
      }
      Person.prototype.sayHello = function () {
        console.log(this.name);
      };

      function Male(name, age) {
        Person.call(this, name, age);
      }

      //Male.prototype = Person.prototype; 指向一样

      for (let i in Person.prototype) {
        Male.prototype[i] = Person.prototype[i];
      }

      Male.prototype.sayHi = function () {
        console.log("sayHi");
      };

      var male = new Male("sunguikang", 20);

      male.sayHello();
      male.sayHi();

      var person = new Person("john", 21);
      person.sayHi();  // 报错
      /* 
      var obj1 = { a: 1 };
      var obj2 = {};
      for(var i in obj1){
          obj2[i] = obj1[i];
      }

      console.log(obj2); */
    </script>

五.寄生式继承

<script>
      function Person(name, age) {
        this.name = name;
        this.age = age;
      }
      Person.prototype.sayHello = function () {
        console.log(this.name);
      };

      function Male(name, age) {
        Person.call(this, name, age);
      }

      Male.prototype = Object.create(Person.prototype);
      Male.prototype.constructor = Male;

      var male = new Male("john", 20);
      male.sayHello();

      //Object.create()
      /*  var obj1 = { a: 1 };
      var obj2 = { b: 2 };

      obj2 = Object.create(obj1);

      console.log(obj2.__proto__ == obj1); */

      //Male  prototype  constructor
      //male __proto__
      //Male.prototype.constructor === Male
      //male.__proto__.constructor === Male
    </script>

六.ES6继承

<script>
    //语法糖
    class Person {
      constructor(name, age) {
        //属性
        this.name = name;
        this.age = age;
      }
      //方法
      sayHello() {
        console.log(this.name);
      }
      static foo() {
        console.log("静态方法，或者类方法");
      }
    }

    // extends 继承
    class Male extends Person {
      constructor(name, age) {
        super(name, age); //1.创建this对象2.指向父类的构造函数
        this.sexy = "male";
      }
      sayHi() {
        //在子类的原型方法里，需要用到父类的原型方法
        console.log("hi"); // →  hi
        //super.sayHello();//super指向父类的原型对象
        this.sayHello(); // →  john
        console.log(this); //  →  Male{age: 20 name: "john" sexy: "male" __proto__: Person}

      }
      static bar() {
        //super.foo(); //指向父类
        this.foo();
      }
    }

    let male = new Male("john", 20);
    //male.sayHello();
    //console.log(male.sexy);
    male.sayHi();
    Male.bar();  //  →  静态方法，或者类方法
  </script>