新手看JS的六种继承方式

  有了实体,为了简化定义,自然就有了继承的概念,比如已经定义了一个“人”类,后面需要详细分出“男人”和“女人”,若是在后者的定义中再重述一边“人”的相关属性,就相当于重复的内容写了三次,麻烦且多余,若是有一个方法,在已有类的基础上,还能再根据要求添加新的属性,便能极大地简化效率,继承的作用便是这样!

原型和原型链

  继承和原型链息息相关,关于面向对象和原型的定义,我写的上一篇文章中已经解释过了,这里不再赘述,有需要的小伙伴可以翻阅一下。
  prototype是个指向对象的指针,可以简单一点来记忆,它揍是原型对象!咱们依旧用 Person 这个类来简单描述一下:
  Person() 是构造函数,也就是设计图、模板,照着这个模板,我们可以捏出来一个有名字、有年龄、活生生的“人”,这个过程就叫做实例化,被捏出来的这个“人”就是 Person 类的一个实例,而 在原型(prototype 上,我们则可以放置一些公有的属性和方法,比如捏出来(实例化)的人,名字虽然都不一样,但可以定义一个共享的方法,让每个人都能说出自己的名字。
  但是 prototype 只有构造函数,或者说只有函数才有,普通的实例不存在原型这么个玩意,那它是肿么访问到原型上的方法的呢?这里就需要介绍到对象拥有的一种属性: __proto__(注意:前后都是两个下划线)
  __proto__同样是个指针,而且指向的是原型对象(prototype),另外,由于原型对象也是个对象,所以他也有__proto__属性( Person.prototype.__proto__
  根据上面所说的总结一下:
  1、每个构造函数( Person() )都有一个原型对象( prototype
  2、原型对象都包含一个指向构造函数的指针( constructor )
  3、实例都包含一个指向原型对象的内部指针( __proto__

  所以创建一个“人(person)”后,通过这一些系列的操作,最终就会使得person.__proto__== Person().prototype
  那如果我们让原型对象和另一个类型的实例相等,比如我们还有一个类:function Biology(){} //生物类,我们让Person.prototype = new Biology(),OK,现在 Biology 里拥有的属性和方法 Person 都可以用了,就好比说人类也是生物,都有新陈代谢,都能发育繁殖,之后我们只需要在 Person() 中再添加一些关于“人”独有的属性,这样就成功定义出来了一个“人”类,同理,一个Animal(动物)类也可以通过这种方式来定义,而不用每次都重写那些生物共有的属性和方法,这,就叫做继承!
  如果在 Person 下还有 Father() Son() Grandson() 等一系列类,他们同样通过上述的方式一层又一层的继承下来,实例和原型组合成一根长长的链条,我们就将之形象的称为原型链

继承方式

  好了,说完原型问题,咱们就可以正式开始说明怎样去写一个继承,高程三上详细记录了六种继承方式,分别如下所示:
  1.原型继承
  2.借用构造函数继承
  3.组合继承(最优方式)
  4.原型式继承
  5.寄生式继承
  6.寄生组合式继承

  接下来逐一开始介绍。

1.原型继承

  原型继承其实就是上面原型链里的那个例子,即:

    function Biology() {    //父类--生物类
      this.kind = "我是生物";
    }
    Biology.prototype.growUp = function () {
      console.log(this.kind+",生物都会长大");
    }
    function Person(name,age) {    //子类--人类
      this.name = name;
      this.age = age;
    }
    Person.prototype = new Biology();    //让人类 继承 生物类
    Person.prototype.sayName = function () {   //注意:新定义的方法要放在替换原型的语句之后
      console.log(this.name);
    }
    //实例化对象
    var biology = new Biology();
    biology.growUp();    //我是生物,生物都会长大
    var person = new Person("亚当",99);
    person.growUp();   //我是生物,生物都会长大
    person.sayName();   //亚当

  上述代码中定义了两个类,一个是‘生物’类,一个是‘人’类,从结果上显而易见,实例化的“亚当”可以轻松的调用属于 Biology 的方法(growUp()),而且“人”类还有属于自己的属性(name)和方法(sayName()),实现了我们所要的功能。
  这是继承最基本的写法,也是最原始的方法,问题有很多:
  第一:无法确定实例和原型的关系,比如上述的亚当,既是“人”类,也是“生物”类,还是一个物体对象(Object),使用instranceof操作符判断时,三者都返回true
  第二:使用字面量添加新方法时,会重写原型链,导致继承无效,如:

Person.prototype = {
    sayName : function(){
        //balabala...
    }
}

  这样写完以后,person就无法调用BiologygrowUp 方法了。
  第三:如果超类存在引用类型的属性(如数组等),所有的实例在访问这个引用类型的属性时都指向同一块内存地址,一个做出操作,剩下的都会跟着变化。
  第四:创建子类型的实例时,不能向超类中传递参数。
  有鉴于此,实践中一般很少单独使用原型链实现继承。

2.借用构造函数(经典继承)

  基本方法是在子类中调用超类的构造函数,需要借用call()apply()方法,如下所示:

function Biology(kind) {    //父类--生物类
    this.kind = kind;
}
function Person(name,age) {    //子类--人类
    Biology.call(this,"我是人类");
    this.name = name;
    this.age = age;
}

  使用call()apply()方法,可以在借用超类构造函数时传递参数(kind),并且在子类中还可以定义新的属性(name、age)。注意,传递的参数只有一个的话,使用call(),若是多个参数,则用apply()方法。
  借用构造函数实现继承的方法,其问题与用构造函数定义对象相同,即方法全放在了构造函数中,子类实例化时产生了多个同样的方法,复用性太差,而且超类型原型中定义的方法,对子类不可见,因此,这种方式也很少单独使用。

3.组合继承(伪经典继承)

  顾名思义,就是将原型链和构造函数两种方法组合在一起,取长补短的一种继承模式。

    function Biology(kind) {    //父类--生物类
      this.kind = kind;
    }
    Biology.prototype.growUp = function () {
      console.log(this.kind+",生物都会长大");
    }
    function Person(name,age) {    //子类--人类
      Biology.call(this,"我是人类");    //继承属性
      this.name = name;
      this.age = age;
    }
    Person.prototype = new Biology();    //让人类 继承 生物类
    Person.prototype.constructor = Person;  
    Person.prototype.sayName = function () {
      console.log(this.name);
    }

  这种方法是JS中最常用的集成模式,原理是将每个实例独有的属性放在构造函数中,而将共享的方法放在原型链中,这样每个实例既有各自独有的空间,又有公共共享的空间。
  这一方法与组合使用构造函数模式和原型模式的创建对象方法类似,上一篇创建对象文章中有详细讲解,这里不再重复。而且组合继承同样存在不足之处,这里暂且按下,待会解释。

4.原型式继承

  在没有必要兴师动众的创建构造函数,而只是想让一个对象与另一个对象保持类似的时候,可以考虑使用原型式继承,其原理如下:

function newObject(obj){
    function F(){}
    F.prototype = obj;
    return new F();
}
var child = newObject(person)
child.name = "亚当的孩子"

  创建一个临时的构造函数,然后将传入的对象(obj)作为这个构造函数的原型(prototype),最后返回一个临时类型的实例(new F())。
  ES5中已经将原型式函数规范化,即新增的Object.create()方法,在传入一个参数的情况下,与上述的newObject()方法相同,如var child = Object.create(person),也可以通过传入第二个可选的参数,自定义传入一个对象,覆盖原型对象上的同名属性,如下所示。

var child = Object.create(person,{
    name:{
        value:"亚当的孩子"
    }
})

  这种方式的缺陷依旧在于引用类型的属性,所有继承了超类的实例,都可以随意改变引用类型的内容,而且会互相影响,共享内存空间。

5.寄生式继承

  这种方式可以创建一个仅用于封装继承过程的函数,在内部可以让对象做出某些增强,这种方式与原型式继承密切相关,如下代码所示:

function createAnother(obj){
    var clone = Object.create(obj);
    clone.saySpecial = function(){
        alert("我变秃了,也变强了");
    }
    return clone;
}
var child = createAnother(person);
child.saySpecial();    //我变秃了,也变强了

  在主要考虑对象,而不是自定义类型和构造函数的情况下,寄生式继承也是一种有用的模式,而且Object.create();函数并不是必须的,任何能返回新对象的函数都适用于这种模式。它可以说是原型式继承的一种拓展,但依旧没有类的概念,无法做到函数复用,与构造函数模式类似。

6.寄生组合式继承

  上面说到,组合继承是JS最常用的继承模式,但它也有不足之处,那就是无论什么情况下,都会调用两次超类型的构造函数,一次是在创建子类型原型的时候(new),另一次是在子类型构造函数内部(call()),最终子类型会包含超类型对象的全部实例属性,我们要在调用子类型构造函数的时候重写这些属性。如下所示:

    function Biology(kind) {    //父类--生物类
      this.kind = kind;
    }
    Biology.prototype.growUp = function () {
      console.log(this.kind+",生物都会长大");
    }
    function Person(name,age) {    //子类--人类
      Biology.call(this,"我是人类");    //第二次调用Biology()
      this.name = name;
      this.age = age;
    }
    Person.prototype = new Biology();    //第一次调用Biology()
    Person.prototype.constructor = Person;  
    Person.prototype.sayName = function () {
      console.log(this.name);
    }

  调用了两次,就是创建了两次同名的属性,只不过后面那次把前面的覆盖掉了而已。基于这种情况,便有了更进一步的寄生组合式继承,总结起来就是一句话:
  通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。
  简单一点的原理就是:不必每次都调用父类型的设计图(构造函数),拷个副本下来就可以喽!所以,先用寄生式继承来继承超类型的原型,然后再将结果指定给子类型的原型。如下代码所示:

function inheritPrototype(Super,Sub){
    var superProtoClone = Object.Create(Super.prototype)
    superProtoClone.constructor = Sub
    Sub.prototype = Super
}

  第一步:通过寄生式继承,创建一个超类原型的副本。
  第二步:弥补因重写原型而失去的默认的constructor属性。
  第三部:将新创建的对象(副本)赋给子类型的原型。
  这样,我们就可以通过调用这个函数,省去Person.prototype = new Biology();这一步,后续代码如下所示:

inheritPrototype(Person,Child)
Person.prototype.sayName = function () {
    console.log(this.name);
}

  这样做便实现了只调用一次Person的构造函数,避免在子类的原型上创建了多余的属性,而且原型链还能保持不变,可以正常使用instranceof()方法,这种方式是引用类型最理想的继承方式,但是...过程过于繁琐,如果可以的话,还是组合继承来的快一点。

总结

  以上便是JS中关于继承的内容,时间仓促,描述可能不太细致,若发现文中任何问题,欢迎指正、探讨!

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

推荐阅读更多精彩内容