js 繼承的幾種方式

JS繼承的實現方式：

既然要實現繼承，那麼首先我們得有一個父類，代碼如下：

function Animal(name) {
      // 屬性
      this.name = name || '小白';
      // 實例方法
      this.sleep = function () {
        console.log(this.name + '正在睡懶覺！');
      }
      //實例引用屬性
      this.features = ['11', '22'];
    }
    // 原型方法
    Animal.prototype.eat = function (food) {
      console.log(this.name + '正在吃：' + food);
    };

1、原型鏈繼承

核心： 將父類的實例作為子類的原型

  　function Cat(name) {}
    //把Cat的原型指向Animal
    Cat.prototype = new Animal();
    var tom = new Cat('Tom');
    var kissy = new Cat('Kissy');

    console.log(tom.name); // "小白"
    console.log(kissy.name); // "小白"
    console.log(tom.features); // ["11", "22"]
    console.log(kissy.features); // ["11", "22"]

    tom.name = '小黑';
    tom.features.push('33');

    //針對父類實例值類型成員的更改，不影響
    console.log(tom.name); // "小黑"
    console.log(kissy.name); // "小白"
    //針對父類實例引用類型成員的更改，會通過影響其他子類實例
    console.log(tom.features); // ["11", "22", "33"]
    console.log(kissy.features); // ["11", "22", "33"]

2、構造繼承

核心：使用父類的構造函數來增強子類實例，等於是複製父類的實例屬性給子類（沒用到原型）

function Cat(name) {
      Animal.call(this);
      this.name = name || '小黑';
    }
    var cat = new Cat();
    var animl = new Animal();
    console.log(cat.name);//小黑
    cat.sleep();//小黑正在睡懶覺
    console.log(animl.name);//小白
    animl.name = '大黃';
    console.log(animl.name);//大黃
    cat.sleep();//小黑正在睡懶覺！
    console.log(cat.name);//小黑
    console.log(cat instanceof Animal); // false
    console.log(cat instanceof Cat); // true

3、實例繼承

核心：為父類實例添加新特性，作為子類實例返回

function Cat(name) {
      var instance = new Animal();
      instance.name = name || '小黑';
      return instance;
    }
    var cat = new Cat();
    console.log(cat.name);//小黑
    cat.sleep();//小黑正在睡懶覺！
    cat.features.push('33')
    console.log(cat.features);//["11", "22", "33"]
    console.log(cat instanceof Animal); // true
    console.log(cat instanceof Cat); // false

4、拷貝繼承

核心：通過for迴圈去拷貝父類的每一個對象

//通過迴圈去copy父類的每一項
    function Cat(name) {
      var animal = new Animal();
      for (var p in animal) {
        Cat.prototype[p] = animal[p];
      }
      Cat.prototype.name = name || '小黑';
    }

    var cat = new Cat();
    console.log(cat.name);//小黑
    cat.sleep();//小黑正在睡懶覺！
    console.log(cat instanceof Animal); // false
    console.log(cat instanceof Cat); // true

5、組合繼承

核心：通過調用父類構造，繼承父類的屬性並保留傳參的優點，然後通過將父類實例作為子類原型，實現函數復用

function Person(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
        Person.prototype.sayHi = function () {
            console.log("我是Person的方法");
        };
        function Student(name, age, sex, score) {
            //借用構造函數:屬性值重覆的問題
            Person.call(this, name, age, sex);
            this.score = score;
        }
        //改變原型指向----繼承
        Student.prototype = new Person(); //不傳值
        //把原型的指向改回原來
        Student.prototype.constructor = Student;
        Student.prototype.eat = function () {
            console.log("我是Student的方法");
        };
        var stu = new Student("小黑", 20, "男", "100分");
        console.log(stu.name, stu.age, stu.sex, stu.score);//小黑 20 男 100分
        stu.sayHi();//我是Person的方法
        stu.eat();//我是Student的方法