js 的继承

继承分为接口继承与实现继承

接口继承：继承方法签名

实现继承：继承实际的方法

ECMAScript 只支持实现继承，而其实现继承的主要是依靠原型链来实现的

 

继承：利用原型让一个引用类型继承另一个引用类型的属性和方法；

要实现理解继承，首先要理解原型链：

1.每个构造函数都有一个原型对象属性，这个属性指向构造函数的原型对象

2.每个函数的原型对象都有一个 constructor 属性，这个属性指向构造函数本身

3.每个实例（或对象）都有一个隐式原型属性(__proto__)，这个隐式原型属性指向构造函数的原型对象

4.构造函数原型对象上的隐式原型属性（__proto__）指向 Object.prototype 即所有函数的默认原型都是Object 对象的实例

5.Object.prototype 上的隐式原型指向null 

以上就是原型链的基础

 原型继承，实质上是通过原型链来继承的

 <script>
        function supertype() {
            this.supername = "huanying2015";
        }
        supertype.prototype.getsuperName = function() {
            return this.supername;
        }

        function subtype() {
            this.subname = "aluoha";
        }
        subtype.prototype = new supertype(); // 改变了原型链的指向
        subtype.prototype.getsubname = function() { // 在原型上添加方法
            return this.subname;
        }

        var instance = new subtype();
        console.log(instance.getsuperName());
        console.log(instance.getsubname());
    </script>

 

2. 借用构造函数继承（经典继承）

    <script>
        function supertype() {
            this.colors = ['red', 'gray', 'yellow'];
        }

        function subtype() {
            supertype.call(this);
        }
        var instance = new subtype();
        instance.colors.push("green");

        console.log(instance.colors);
        var instance1 = new subtype();
        console.log(instance1.colors);
    </script>

    <script>
        function supertype(name) {
            this.name = name;
            this.sayName = function() {
                return "你好，" + this.name + ",欢迎来到地球!";
            }
        }

        function subtype() {
            supertype.call(this, 'huanying2015'); // 借用构造函数，同时传递参数
            this.age = 25;
        }
        var instance = new subtype();
        console.log(instance.sayName());
        console.log(instance.age);
    </script>

备注：所有方法都在构造函数中，无法复用

 

3.组合继承（伪经典继承）：将原型链和借用构造函数组合到一起

   <script>
        function supertype(name) {
            this.name = name;
            this.colors = ['red', 'green', 'blue'];
        }
        supertype.prototype.sayName = function() {
            console.log(this.name);
        }

        function subtype(name, age) {
            supertype.call(this, name);
            this.age = age;
        }

        subtype.prototype = new supertype();
        subtype.prototype.constructor = subtype;
        subtype.prototype.sayAge = function() {
            console.log(this.age);
        }

        var instance = new subtype('huanying2015', 25);
        instance.colors.push("gray");
        console.log(instance.colors);
        instance.sayName();
        instance.sayAge();

        var instance1 = new subtype('aluoa', 27);
        console.log(instance1.colors);
        instance1.sayName();
        instance1.sayAge();
    </script>

4.原型式继承：

<script>
        function object(o) {
            function F() {};
            F.prototype = o;
            return new F();
        }

        var person = {
            name: "huanying2015",
            friends: ["zhangsan", "lisi", "wanger"],
        }
        person1 = object(person);
        person1.name = 'jack';
        person1.friends.push("zhaoliu");

        person2 = object(person);
        person2.name = 'Linbai';
        person2.friends.push("zhaozilong");

        console.log(person.friends);
        console.log(person1.friends);
        console.log(person2.friends);
        console.log(person.name);
        console.log(person1.name);
        console.log(person2.name);
    </script>

 

5.寄生是继承：

    <script>
        function createAnother(o) {
            var clone = Object(o);
            clone.sayhello = function() {
                console.log("hello!这里是地球");
            }
            return clone;
        }
        var person = {
            name: "huanying2015",
            friends: ["zhangsan", "lisi", "wanger"],
        }

        var person1 = createAnother(person);
        person1.sayhello();
    </script>

 

 

6.寄生组合继承：

    <script>
        function supertype(name) {
            this.name = name;
            this.colors = ['red', 'blue', 'yellow'];
        }
        supertype.prototype.sayName = function() {
            console.log(this.name);
        }

        function subtype(name, age) {
            supertype.call(this, name); //第二次调用supertype()
            this.age = age;
        }

        subtype.prototype = new supertype(); //第一次调用supertype()
        subtype.prototype.constructor = subtype;
        subtype.prototype.sayAge = function() {
            console.log(this.age);
        }
    </script>

会两次调用supertype()构造函数

 

  <script>
        function inheritPrototype(subtype, supertype) {
            var prototype = Object(supertype.prototype); // 创建对象
            prototype.constructor = subtype; // 增强对象
            subtype.prototype = prototype; // 指定对象
        }
    </script>

这是是想寄生组合继承最简单的模式

 

<script>
        function inheritPrototype(subtype, supertype) {
            var prototype = Object(supertype.prototype); // 创建对象
            prototype.constructor = subtype; // 增强对象
            subtype.prototype = prototype; // 指定对象
        }

        function supertype(name) {
            this.name = name;
            this.colors = ['red', 'blue', 'yellow'];
        }
        supertype.prototype.sayName = function() {
            console.log(this.name);
        }

        function subtype(name, age) {
            supertype.call(this, name);
            this.age = age;
        }

        inheritPrototype(subtype, supertype);

        subtype.prototype.sayAge = function() {
            console.log(this.age);
        }

        var person = new subtype('huanying2015', 25);
        person.sayName();
        person.sayAge();
    </script>