继承

作者: 璐璐熙可 | 来源:发表于2019-05-29 16:15 被阅读0次

继承是指一个对象直接使用另一对象的属性和方法。
JavaScript并不提供原生的继承机制,我们自己实现的方式很多,介绍一种最为通用的

通过上面定义我们可以看出我们如果实现了两点的话就可以说我们实现了继承
1.得到一个类的属性
2.得到一个类的方法
我们分开讨论一下,先定义两个类

function Person(name, age){
    this.name = name;
    this.age = age;
}

Person.prototype.printName = function(){
    console.log(this.name);
};

function Male(sex){
    this.sex = sex;
}

Male.prototype.printAge = function(){
    console.log(this.sex);
};

属性获取

对象属性的获取是通过构造函数的执行,我们在一个类中执行另外一个类的构造函数,就可以把属性赋值到自己内部,但是我们需要把环境改到自己的作用域内,这就要借助我们讲过的函数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的方法,那么怎么判断某个是自己的还是父类的?

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

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

相关文章

  • 继承 继承

    属性拷贝 继承不单单能通过原型链实现,也能通过其他方式实现,属性拷贝就是其中一种方法。 通过属性拷贝也能实现继承子...

  • 继承(单继承,多继承)

    将共性的内容放在父类中,子类只需要关注自己特有的内容 python中所有的内容都是对象,所有的对象都直接或间接继承...

  • js继承方式

    类式继承 构造函数继承 组合继承 类式继承 + 构造函数继承 原型式继承 寄生式继承 寄生组合式继承 寄生式继承 ...

  • Python-学习之路-08 OOP -02

    单继承和多继承 单继承:每个类只能继承一个类 多继承:每个类可以继承多个类 单继承的多继承的优缺点 菱形继承/钻石...

  • 原型相关(二)

    1.继承 继承方式:接口继承(只继承方法签名)实现继承(继承实际的方法)ECMAScript只支持实现继承,并且主...

  • 继承

    继承的引入和概述 继承案例和继承的好处 继承的弊端 Java中继承的特点 继承的注意实现和什么时候使用继承 继承中...

  • Java面向对象三大特性之继承

    继承 一、继承的特点 Java只支持单继承单继承 多继承 单继承、多继承优缺点①单继承优点:提高了代码的复用性,让...

  • 7、面向对象的程序设计3(《JS高级》笔记)

    三、继承 许多OO语言都支持两种继承方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际方法。由...

  • 【重学前端】JavaScript中的继承

    JavaScript中继承主要分为六种:类式继承(原型链继承)、构造函数继承、组合继承、原型式继承、寄生式继承、寄...

  • js之继承

    文章主讲 JS 继承,包括原型链继承、构造函数继承、组合继承、寄生组合继承、原型式继承、 ES6 继承,以及 多继...

网友评论

      本文标题:继承

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