JS的继承

（一）、call()方法

1.语法：call([ thisobj[ arg1 [ arg2 [ argN ] ] ] ])
2.定义：调用一个对象的一个方法，以另一个对象替换当前对象。
3.说明：
（1）call方法可以用来代替另一个对象调用一个方法。
（2）改变this的指向，从当前对象变为传入的thisobj。
（3）如果没有传入的thisobj，this将指向window。

（二）继承的几种方法

一、原型链继承

1.核心：将父类的实例作为子类的原型。

2.

<script type="text/javascript">
        function Animal(name){
            //属性
            this.name = name || 'animal';
            //实例的方法
            this.sleep = function(){
                alert(this.name + "正在睡觉");
            }
        }
        //原型的方法
        Animal.prototype.eat = function(food){
            alert(this.name + "正在吃" + food);
        }


        function Cat(){
        }
        Cat.prototype = new Animal();
        Cat.prototype.name = 'Tom'; 

        var cat1 = new Cat();
        console.log(cat1.name);                 //Tom
        console.log(cat1.sleep());
        console.log(cat1.eat("fish"));
        console.log(cat1 instanceof Animal);    //true
        console.log(cat1 instanceof Cat);       //true
    </script>

3.特点：

（1）非常纯粹的继承关系，实例既是子类的实例，又是父类的实例。
（2）父类新增的原型属性和方法，子类都能访问到。
（3）简单，易于实现

4.缺点：

（1）要想为子类添加方法，必须在Cat.prototype = new Animal();这样的语句之后进行，不能放在构造器中。
（2）无法实现多继承。
（3）来自原型的引用属性，是所有实例共享的。
（4）创建子类实例时，无法向父类构造函数传参。

二、构造函数继承

1.核心：在子类构造函数的内部调用父类构造函数，使用父类的构造函数来增强子类的实例，等于是复制父类的实际属性给子类。

2.

<script type="text/javascript">
        function Animal(name){
            //属性
            this.name = name || 'animal';
            //实例的方法
            this.sleep = function(){
                alert(this.name + "正在睡觉");
            }
        }
        //原型的方法
        Animal.prototype.eat = function(food){
            alert(this.name + "正在吃" + food);
        }
        function Cat(name){
            Animal.call(this);
            this.name = name || 'Tom';
        }

        var cat1 = new Cat('kity');
        console.log(cat1.name);                 //kity
        console.log(cat1.sleep());
        console.log(cat1.eat("fish"));          //报错
        console.log(cat1 instanceof Animal);    //false
        console.log(cat1 instanceof Cat);       //true
    </script>

3.特点：

（1）创建子类实例时，可以向父类传递参数。
（2）可以实现多重继承（call多个父类）。
（3）解决了多个子类引用父类的问题，每个子类都有一个副本。

4.缺点：

（1）只能继承父类实例的属性和方法，不能继承父类原型的属性和方法。
（2）实例并不是父类的实例，只是子类的实例。
（3）无法实现函数复用，每个实例都有父类函数的副本，影响性能。

三、组合继承

1.核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用。

2.

    <script type="text/javascript">
        function Animal(name){
            //属性
            this.name = name || 'animal';
            //实例的方法
            this.sleep = function(){
                alert(this.name + "正在睡觉");
            }
        }
        //原型的方法
        Animal.prototype.eat = function(food){
            alert(this.name + "正在吃" + food);
        }


        function Cat(name){
            Animal.call(this);
            this.name = name || 'Tom';
        }
        Cat.prototype = new Animal();

        var cat1 = new Cat();
        console.log(cat1.name);                 //Tom
        console.log(cat1.sleep());
        console.log(cat1.eat("fish"));
        console.log(cat1 instanceof Animal);    //true
        console.log(cat1 instanceof Cat);       //true
    </script>

3.特点：

（1）既可以继承父类实例的属性和方法，又可以继承父类原型的属性和方法。
（2）既是子类的实例，有事父类的实例。
（3）不存在引用共享问题。
（4）可以传参。
（5）函数可以复用。

4.缺点：

（1）调用了两次父类的构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）。

四、寄生式继承

1.核心：创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后返回对象。

2.

    <script type="text/javascript">
        function Animal(name){
            //属性
            this.name = name || 'animal';
            //实例的方法
            this.sleep = function(){
                alert(this.name + "正在睡觉");
            }
        }
        //原型的方法
        Animal.prototype.eat = function(food){
            alert(this.name + "正在吃" + food);
        }
        function Cat(name){
            var c = new Animal(name);
            c.say = function(){
                alert("Hi");
            }
            return c;
        }

        var cat1 = new Cat('Tom');
        console.log(cat1.name);                 //Tom
        console.log(cat1.sleep());
        console.log(cat1.eat("fish"));
        console.log(cat1 instanceof Animal);    //true
        console.log(cat1 instanceof Cat);       //false
    </script>

3.特点：

（1）不限制调用方式，不管是new 子类()还是子类(),返回的对象具有相同的效果。

4.缺点：

（1）实例是父类实例，不是子类实例。
（2）不支持多继承。

五、寄生组合式继承

1.核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点。

2.

    <script type="text/javascript">
        function Animal(name){
            //属性
            this.name = name || 'animal';
            //实例的方法
            this.sleep = function(){
                alert(this.name + "正在睡觉");
            }
        }
        //原型的方法
        Animal.prototype.eat = function(food){
            alert(this.name + "正在吃" + food);
        }

        function Cat(name){
            Animal.call(this);
            this.name = name || 'animal';
        }
        (function(){
            //创建一个没有方法的类
            var Super = function(){};
            Super.prototype = Animal.prototype;
            //将实例作为子类的原型
            Cat.prototype = Super.prototype;
        })();

        var cat1 = new Cat('Tom');
        console.log(cat1.name);                 //Tom
        console.log(cat1.sleep());
        console.log(cat1.eat("fish"));
        console.log(cat1 instanceof Animal);    //true
        console.log(cat1 instanceof Cat);       //true
    </script>

3.特点：

（1）堪称完美

4.缺点：

（1）实现复杂

六、ES6 class继承（extends）

class Animal{
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
}

class Cat extends Animal{
    constructor(x,y,color){
        super(x,y);             //调用父类的constructor(x,y)，先继承，否则没有子类this
        this.color = color;
    }
}

var c = new Cat(1,2,'red');
console.log(c);

• 在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，是基于对父类实例加工，只有super方法才能返回父类实例。