继承

作者: 别让我一个人醉_1fa7 | 来源:发表于2017-11-25 12:36 被阅读0次
    • 如果实现了两点的话就可以说我们实现了继承
      得到一个类的属性
      得到一个类的方法
      我们分开讨论一下,先定义两个类
    function Person(name, sex){
        this.name = name;
        this.sex = sex;
    }
    
    Person.prototype.printName = function(){
        console.log(this.name);
    };
    
    function Male(age){
        this.age = age;
    }
    
    Male.prototype.printAge = function(){
        console.log(this.age);
    };
    

    属性获取

    • 对象属性的获取是通过构造函数的执行,我们在一个类中执行另外一个类的构造函数,就可以把属性赋值到自己内部,但是我们需要把环境改到自己的作用域内,这就要借助函数call了
    改造一些Male
    
    function Male(name, sex, age){
        Person.call(this, name, sex);
        this.age = age;
    }
    
    Male.prototype.printAge = function(){
        console.log(this.age);
    };
    实例化看看结果
    
    var m = new Male('Byron', 'male', 26);
    console.log(m.sex); // "male"
    

    方法获取

    • 我们知道类的方法都定义在了prototype里面,所以只要我们把子类的prototype改为父类的prototype的备份就好了

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

    • 这里我们通过Object.createclone了一个新的prototype而
      不是直接把Person.prtotype直接赋值,因为引用关系,这样会导致后续修改子类的prototype也修改了父类的prototype,因为修改的是一个值

    • 另外Object.create是ES5方法,之前版本通过遍历属性也可以实现浅拷贝

    -这样做需要注意一点就是对子类添加方法,必须在修改其prototype之后,如果在之前会被覆盖掉

    Male.prototype.printAge = function(){
        console.log(this.age);
    };
    
    Male.prototype = Object.create(Person.prototype);
    这样的话,printAge方法在赋值后就没了,因此得这么写
    
    function Male(name, sex, age){
        Person.call(this, name, sex);
        this.age = age;
    }
    
    Male.prototype = Object.create(Person.prototype);
    
    Male.prototype.printAge = function(){
        console.log(this.age);
    };
    
    • prototype对象有一个属性constructor指向其类型,因为我们复制的父元素的prototype,这时候constructor属性指向是不对的,导致我们判断类型出错

    • Male.prototype.constructor; //Person
      因此我们需要再重新指定一下constructor属性到自己的类型

    最终方案

    • 我们可以通过一个函数实现刚才的内容
    function inherit(superType, subType){
        var _prototype  = Object.create(superType.prototype);
        _prototype.constructor = subType;
        subType.prototype = _prototype;
    }
    使用方式
    
    function Person(name, sex){
        this.name = name;
        this.sex = sex;
    }
    
    Person.prototype.printName = function(){
        console.log(this.name);
    };    
    
    function Male(name, sex, age){
        Person.call(this, name, sex);
        this.age = age;
    }
    inherit(Person, Male);
    
    // 在继承函数之后写自己的方法,否则会被覆盖
    Male.prototype.printAge = function(){
        console.log(this.age);
    };
    
    var m = new Male('Byron', 'm', 26);
    m.printName();
    

    这样我们就在JavaScript中实现了继承

    hasOwnProperty

    • 继承之后Male的实例也有了Person的方法,那么怎么判断某个是自己的还是父类的?

    • hasOwnPerperty是Object.prototype的一个方法,可以判断一个对象是否包含自定义属性而不是原型链上的属性,hasOwnProperty是JavaScript中唯一一个处理属性但是不查找原型链的函数

    m.hasOwnProperty('name'); // true
    m.hasOwnProperty('printName'); // false
    Male.prototype.hasOwnProperty('printAge'); // true
    

    相关文章

      网友评论

          本文标题:继承

          本文链接:https://www.haomeiwen.com/subject/twxcbxtx.html