JavaScript继承(1)

1、子类的原型对象--类式继承

    //声明父类
    function SuperClass() {
        this.superValue = true;
    }

    //为父类添加共有方法
    SuperClass.prototype.getSuperValue = function () {
        return this.superValue;
    }

    //声明子类
    function SubClass() {
        this.subValue = false;
    }

    //继承父类
    SubClass.prototype = new SuperClass();
    //为子类添加共有方法
    SubClass.prototype.getSubValue = function () {
        return this.subValue;
    }

    var instance = new SubClass();
    console.log(instance.getSuperValue());//true
    console.log(instance.getSubValue());//false

简单理解

类式需要先声明两个类,并将第一类的实例赋值给第二个类的原型。
我们实例化一个父类的时候,新创建的对象复制了父类的属性和方法并且将原型指向了父类的原型对象。新创建的对象可以访问到父类原型上的属性和方法与从父类构造函数中复制的属性和方法。

2个缺点

1、 某个子类的实例更改子类原型从父类构造函数中继承来共有属性,就会直接影响其他子类。

2、子类实现的继承是靠原型对父类的实例化实现的,因此创建父类的时候,是无法传递参数以及对父类构造函数初始化。

2、创建即继承--构造函数继承

 //构造函数式继承
    //声明父类
    function SuperClass(id) {
        //引用类型共有属性
        this.books = ['JavaScript', 'HTML', 'CSS'];
        //值类型共有属性
        this.id = id;
    }
    //父类声明原型方法
    SuperClass.prototype.showBooks = function () {
        console.log(this.books);
    }

    //声明子类
    function SubClass(id) {
        //继承父类
        SuperClass.call(this, id);
    }

    //创建实例
    var instance1 = new SubClass(1);
    var instance2 = new SubClass(2);

    instance1.books.push('设计模式');
    console.log(instance1.books);//["JavaScript", "HTML", "CSS", "设计模式"]
    console.log(instance1.id);//1
    console.log(instance2.books);//["JavaScript", "HTML", "CSS"]
    console.log(instance2.id);//2
    console.log(instance1.showBooks());//TypeError

简单理解

SuperClass.call(this, id);这句话是构造函数继承的精华,由于call这个函数可以改变函数的作用环境,父类中的是this绑定的,因此在子类中自然也就继承了父类的属性。

缺点

父类的原型方法自然不会被子类继承,继承就要放在构造函数中。这样创造的实例都会单独拥有一份而不能共用,违背了代码复用的原则。

3、将优点为我所用--组合继承

//组合式继承
    //声明父类
    function SuperClass(name) {
        //引用类型共有属性
        this.books = ['JavaScript', 'HTML', 'CSS'];
        //值类型共有属性
        this.name = name;
    }

    //父类声明原型方法
    SuperClass.prototype.getName = function () {
        console.log(this.name);
    }

    //声明子类
    function SubClass(name, time) {
        //构造函数式继承父类
        SuperClass.call(this, name);
        this.time = time;
    }
    //类式继承
    SubClass.prototype = new SuperClass();
    //子类声明原型方法
    SuperClass.prototype.getTime = function () {
        console.log(this.time);
    }

    //创建实例
    var instance1 = new SubClass("小红", "2016");
    var instance2 = new SubClass("小绿", "2017");
    instance2.books.push("设计模式");

    instance1.getName();// 小红
    instance2.getTime();// 2017
    console.log(instance1.books);// ["JavaScript", "HTML", "CSS"]
    console.log(instance2.books);// ["JavaScript", "HTML", "CSS", "设计模式"]


简单分析

组合继承就是将前两种方法综合到一起,在子类构造函数中执行父类构造函数,在子类原型上实例化父类。融合了优点,过滤缺点。

缺点

父类构造函数执行了2次。


其余继承方法,下次学习~

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

推荐阅读更多精彩内容

  • 博客内容:什么是面向对象为什么要面向对象面向对象编程的特性和原则理解对象属性创建对象继承 什么是面向对象 面向对象...
    _Dot912阅读 1,422评论 3 12
  • class的基本用法 概述 JavaScript语言的传统方法是通过构造函数,定义并生成新对象。下面是一个例子: ...
    呼呼哥阅读 4,092评论 3 11
  • 继承 Javascript中继承都基于两种方式:1.通过原型链继承,通过修改子类原型的指向,使得子类实例通过原型链...
    LeoCong阅读 310评论 0 0
  • 一夜之间,也没有下雨,早上起来外面的温度却莫名的降了很多,每当这个时候,就莫名想谈恋爱了,因为温度越来越低,想要一...
    只想专心花痴的浮灯阅读 140评论 0 1
  • 类中的静态变量(Static Variable)在程序运行期间其内存空间对所有该类的对象实例而言是共享的,因此在某...
    Viking_Den阅读 897评论 0 0