zoukankan      html  css  js  c++  java
  • JavaScript对象的继承

    原文

      简书原文:https://www.jianshu.com/p/78ce11762f39

    大纲

      前言
      1、原型链继承
      2、借用构造函数实现继承
      3、组合模式继承
      4、原型式继承
      5、寄生式继承
      6、寄生组合式继承
      7、代码资源

    前言

      继承是OO语言中的一个最为人津津乐道的概念。许多OO语言都支持两种继承方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。如前所述,由于函数没有签名,在ECMAScript中无法实现接口继承。ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的。

    1、原型链继承

      原型链是实现继承的主要方法。
      利用原型链实现继承的基本思路是:利用原型让一个引用类型继承另一个引用类型的属性和方法。

    function SuperType(name){
        this.name = name;
    }
    SuperType.prototype.sayName = function(){
        return this.name;
    };
    function SubType(age){
        this.age = age;
    }
    //主要代码
    SubType.prototype = new SuperType('kk');
    
    SubType.prototype.sayAge = function(){
        return this.age;
    };
    var instance = new SubType(12);
    console.log(instance);
    

    2、借用构造函数实现继承

      借用构造函数实现继承的实现思路:在子类型构造函数的内部调用超类构造函数。

    function SuperType(name){
        this.name = name;
        this.sayName = function() {
            return this.name;
        }
    }
    function SubType(name,age){
        this.age = age;
        this.sayAge = function() {
            return this.age;
        }
        SuperType.call(this,name);
    }
    var instance = new SubType('kk',2);
    console.log(instance);
    

    3、组合模式继承

      组合继承,也叫作伪经典继承,指的是将原型链和借用构造函数的技术组合到一块。
      思路:使用原型链实现对原型属性和方法的继承,通过借用构造函数来实现对实例属性的继承。

    function SuperType(name){
        this.name = name;
    }
    SuperType.prototype.sayName = function(){
        console.log(this.name);
    };
    function SubType(name,age){
        //继承属性
        SuperType.call(this,name);
        this.age = age;
    }
    //继承方法
    SubType.prototype = new SuperType('gg');
    SubType.prototype.sayAge = function(){
        console.log(this.age);
    }
    var instance = new SubType("kk",13);
    console.log(instance);
    

    4、原型式继承

      原型式继承:该方法没有使用严格意义上的构造函数,它的想法是借助原型可以基于已有的对象创建新的对象,同时还不必因此创建自定义类型。

    function object(o){
        function F(){}
        F.prototype = o;
        return new F();
    }
    var person = {
        name : "kk",
        age : 12
    };
    var extendPerson = object(person);
    console.log(extendPerson);
    

    5、寄生式继承

      寄生式继承的思路:创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真的是它做了所有工作一样返回对象。

    function object(o){
        function F(){}
        F.prototype = o;
        return new F();
    }
    function createAnother(original){
        var clone = object(original);//通过调用函数创建一个新对象
        clone.sayHi = function(){//以某种方式来增强这个对象
            console.log("hi");
        };
        return clone;//返回这个对象
    }
    var person = {
        name : "kk",
        age : 13
    };
    var anotherPerson = createAnother(person);
    console.log(anotherPerson);
    

    6、寄生组合式继承

      所谓寄生组合式继承:即通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。
    其背后的基本思路是:不必为了指定子类型的原型而调用超类型的构造函数,我们所需要的无非就是超类型原型的一个副本而已。本质上,就是使用寄生式继承来继承超类型的原型,然后再将结果指定给子类型的原型。

    function object(o){
        function F(){}
        F.prototype = o;
        return new F();
    }
    function inheritPrototype(subType,superType){
        var prototype = object(superType.prototype);//创建对象
        prototype.constructor = subType;//增强对象
        subType.prototype = prototype;//指定对象
    }
    function SuperType(name){
        this.name = name;
    }
    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 instance = new SubType('kk',15);
    console.log(instance);
    

    7、代码资源

      javaScript实例代码中的extendObject.js中包含本篇博客的代码,包含了JavaScript对象的继承的几种基本方式,希望对读者能有所帮助。

  • 相关阅读:
    Hessain 方法重载
    mac 类似Xshell
    idea & datagrip 注册码
    mac 安装mysql 修改密码
    securecrt 的安装
    datagrip的使用
    mac 安装oracle
    mac 安装mysql
    destoon 会员整合Ucenter/Discuz!/PHPWind教程
    destoon 深度整合discuz x2 UC 之免邮箱二次验证
  • 原文地址:https://www.cnblogs.com/shcrk/p/9255967.html
Copyright © 2011-2022 走看看