JavaScript继承

一、继承的概念

谈到继承首先应该说明一下类和对象的概念。类是拥有共通属性和行为的实体的抽象,而对象是一个具体的实例。例如下面这个类Person(人):

function Person(name, age) {
        this.name = name;
    this.age = age;
    this.sayHello = function() {
        console.log('hello');
    }
}

const p1 = new Person('张三', 11);
const p2 = new Person('李四', 26);

所有的人都有姓名、年龄和讲话的属性,因此Person是对人的一个抽象。张三、李四分别是两个具体的人的实例,即两个对象。他们有不同的名字属性和年龄属性。

js中通过构造函数来实现类。使用new操作符调用函数创建对象时候,这个函数就是一个构造函数。

一个对象的属性包括两种:函数和普通属性,对于普通属性而言,当然是不同实例有自己的属性,就像张三李四不同人有不同的姓名和年龄。而对于函数属性,所有的实例都是一样的。因此大部分情况,类的普通属性应该作为私有属性,而函数属性作为原型属性

继承是建立在面向对象基础上的一种代码复用方式,子类通过继承来复用父类的代码。

由于es6之前,js的构造函数式面向对象语法与传统面向对象编程语言有所区别,js并未在语法层面支持继承的操作,因此js需要通过原型链特性、call apply等的应用来实现继承。

下面说明如何实现js继承,以及继承的最佳实践。

二、继承的最佳实践

js继承的最佳实践是“寄生组合式继承”,它用到了原型继承和借用构造函数继承。

1. 原型继承

根据js原型链特性,在访问对象属性时候,如果对象私有属性中没有该属性,会去对象的构造函数的prototype中查找。因此我们可以将子类构造函数的prototype赋值为父类的实例,这样在子类对象中查找属性找不到时候,就可以在父类实例中找到,从而让子类可以使用父类的属性。

下面看《js高级程序设计》中给出的案例

function SuperType() {
    this.property = true;
}

SuperType.prototype.getSuperValue = function () {
    return this.property;
}

// 继承SuperType
function SubType() {
    this.subProperty = false;
}

SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function () {
    return this.subProperty;
}

原型继承的实现:子类的prototype = 父类的实例

原型继承特点:可以继承父类的私有属性和原型属性

原型继承的缺点:1. 无法向父类构造函数传参。2. 继承的属性都是原型属性,不能继承私有属性

2. 借用构造函数继承

为了解决原型继承不能传参和不能继承私有属性的缺点,可以使用借用构造函数继承。借用构造函数用call或者apply方法在子类构造函数中调用父类构造函数,从而让子类拥有父类的私有属性。

下面看案例

function SuperType(property) {
    this.property = property;
}

function SubType(property) {
    superType.call(this, property);
}

var instance1 = new SubType(false);
console.log(instance1.property); // false

var instance2 = new SubType(true);
console.log(instance2.property); // true

借用构造函数继承的实现:在子类构造函数中使用call/apply调用父类构造函数,将父类构造函数指向子类实例。

借用构造函数继承的特点:1. 在子类中可以给父类传参。2. 可以继承父类的私有属性。

借用构造函数继承的缺点:只能继承父类的私有属性,不能继承父类的原型属性。

3. 组合继承

借用构造函数继承解决了原型继承子类不能给父类传参问题,但是又带来了子类不能继承父类原型属性的问题。如何让子类既能继承父类的原型属性又能继承父类的私有属性呢?

可以通过将原型继承和借用构造函数继承结合起来,即组合继承。

看下面示例代码

function SuperType(property) {
    this.property = property;
}

SuperType.prototype.getSuperValue = function () {
    return this.property;
}

function SubType(property, subProperty) {
    SuperType.call(this, property);
  this.subProperty = subProperty;
}

SubType.prototype = new SuperType(false);

SubType.prototype.getSubValue = function () {
    return this.subProperty;
}

上面代码组合使用了原型继承和借用构造函数继承,让子类即继承了父类的原型属性也继承了父类的私有属性,需要注意的是,SuperType类的property属性既存在于SubType的私有属性中,也存在于SubType的原型属性中,这导致了不必要的重复。

组合继承的实现:同时使用原型继承和借用构造函数继承

组合继承的特点:1. 子类可以继承父类原型属性和私有属性。2. 子类可以给父类传参

组合继承的缺点:对于父类的私有属性,子类继承时候同时存在于私有属性和原型属性中,造成了冗余

4. 寄生组合式继承

组合继承实现了子类继承父类私有属性和原型属性,但是有冗余的问题,如何解决冗余问题呢?首先看下为什么会有冗余问题。

我们已经知道,借用构造函数继承让子类只继承了父类的私有属性,而没有继承原型属性,而原型继承让子类同时继承了父类的私有属性和原型属性 这样,父类的私有属性就继承了两遍,导致了冗余。那么如果在使用借用构造函数继承之后,不用原型继承,而是用其他方法让子类只继承父类的原型属性而不继承父类的私有属性,就可以避免冗余了。 下面说明如何让子类只继承父类的原型属性而不继承父类的私有属性。

我们知道原型继承是给子类的构造函数的prototype赋值为父类的一个对象,由于父类的对象中既可以访问到父类的私有属性也可以访问到父类的原型属性,因此导致子类多继承了父类的私有属性。如果我们不给子类构造函数的prototype赋值为父类对象,而是赋值为一个只有父类原型属性而没有父类私有属性的对象,那么子类就不会继承到父类的私有属性,只会继承父类的原型属性了。如何生成这样一个对象呢?

// 根据传入的父类生成只继承父类原型的对象
function geSubtPrototype(SuperType) {
    function Func() {}
  Func.prototype = SuperType.prototype;
  return new Func();
}

上面函数实现了根据传入的父类生成只继承父类原型的对象,其中的中的Func方法没有任何私有属性,Func的prototype指向了传入的父类的prototype,所以用Func实例化的对象可以访问SuperType的原型属性。

接下来看寄生组合继承的示例

function SuperType(property) {
    this.property = property;
}

SuperType.prototype.getSuperValue = function () {
    return this.property;
}

function SubType(property, subProperty) {
    SuperType.call(this, property);
  this.subProperty = subProperty;
}

SubType.prototype = geSubtPrototype(SuperType);

SubType.prototype.getSubValue = function () {
    return this.subProperty;
}

通过上面的示例可以看出,寄生组合继承方法实际是将组合寄生中原型继承去掉,使用另一种方法让子类只继承父类的原型。这样就实现了:1. 子类继承父类的私有属性和原型属性。2. 子类可以向父类传递参数。3. 继承后没有冗余属性。

寄生组合继承是js继承的最佳实践。

三、ES6面向对象

  1. 类声明
  2. 原型属性和私有属性
  3. 继承、super
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,125评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,293评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,054评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,077评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,096评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,062评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,988评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,817评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,266评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,486评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,646评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,375评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,974评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,621评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,642评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,538评论 2 352

推荐阅读更多精彩内容

  • 本文先对es6发布之前javascript各种继承实现方式进行深入的分析比较,然后再介绍es6中对类继承的支持以及...
    lazydu阅读 16,679评论 7 44
  • 前言  在面向对象编程中,对象的继承是很重要的一个概念。A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属...
    agamgn阅读 124评论 0 1
  • javascript继承 ES6之前,JavaScript本质上不能算是一门面向对象的语言,因为它对于封装,继承,...
    程序员不存在的阅读 620评论 1 0
  • 例子 我们生成两个构造函数,后面的例子都是让‘’猫‘’继承‘’动物‘’的所有属性和方法。 动物(为了更好的理解各种...
    流光号船长阅读 323评论 0 1
  • * 约定 functionFun(){ // 私有属性 varval = 1;// 私有基本属性 vararr =...
    小董儿阅读 296评论 0 0