JavaScript对象继承

开门见山,以下根据继承方式的不同逐一介绍:

基于原型链的方式

这应该是基于js中prototype的特点实现的最简单的继承

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

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

var SubType = function() {
  this.subproperty = false;
}

SubType.prototype = new SuperType();  // 继承

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

var instance = new SubType();
alert(instance.getSuperValue());  // true

此时,上面几个对象的引用关系是这样的:


JS对象继承应用关系(引用自JavaScript高级程序设计)

那如果子类有同名属性,super的getter会返回那个呢:

var Sub = function() {
  this.property = false;
}

Sub.prototype = new SuperType();

var instance = new Sub();
alert(instance.getSuperValue());  // true,返回子类的属性

可见JS中子类的属性会重写父类的,此外,方法的重写也一样,这是由于JS查找对象的属性是由子对象开始遍历,子类没有才继续去父对象上找。
另外,JS还提供了方法来判断继承关系:

alert(instance instanceof SubType);     // true
alert(instance instanceof SuperType);  // true
alert(instance instanceof Object);        // true

alert(SubType.prototype.isPrototypeOf(instance));     //true
alert(SuperType.prototype.isPrototypeOf(instance));  //true
alert(Object.prototype.isPrototypeOf(instance));        //true

使用原型链有个很明显的问题,就是子对象都share同一个父对象的属性,如果是引用类型,就可能对一个对象修改,却影响了其他对象的数据。

构造函数继承

构造函数的方式继承可以解决share同一个父对象属性的问题,并且可以引用父对象的带参构造函数:

var SuperType = function(name) {
  this.name = name;
  this.colors = ['red', 'yellow'];
}

var SubType = function(name) {
  SuperType.call(this, name);

  this.age = 18;
}

var subA = new SubType('Lilei');
var subB = new SubType('HanMeimei');

subA.colors.push('blue');  // 修改引用属性

alert(subA.name);   // Lilei
alert(subA.colors);  // 'red,yellow,blue'

alert(subB.name);   // HanMeimei
alert(subB.colors);  // 'red,yellow'

对象创建的情况一样,单纯的构造函数方式会使得每个对象都不能share父对象的函数。于是有了组合继承的方式,各取所长。

组合继承的方式

组合继承是通过原型链来继承对象的方法,构造函数来继承对象的属性:

var SuperType = function(name) {
  this.name = name
}

SuperType.prototype.getName = function() {
  return this.name
}

var SubType = function(name) {
  SuperType.call(this, name);
}

SubType.prototype = new SuperType();

var sub = new SubType('Lilei');
alert(sub.getName());  // Lilei

在new子对象时,会在调用构造函数时重新定义该对象自己的属性,从而和父对象的属性分离。但是组合继承要求父对象的构造方式也是通过组合构造的方式定义的,否则子类用组合继承也是白搭。

通过工厂模式创建子对象

以下提供的继承方式是在《JS高级程序设计》中看到的,此书把它们也作为继承方式,但我觉得只能算是对之前继承方式的工厂模式化罢了。

原型式继承

给我任何一个原型,还你一个他的子对象(的工厂模式。。。)

// 就是他了
function subInstance(o) {
  function F(){}
  F.prototype = o;
  return new F();
}

var superInstance = {
  name: 'Lilei'
}

var sub = subInstance(superInstance);
alert(sub.name);  // Lilei

但是很显然,子对象是share父对象的所有属性的。用组合方式实现subInstance?可以试试,但是由于是工厂模式,考虑到通用性,这不是个好的选择。

寄生式继承

如果工厂不是那么通用,则可以在创建子对象是再加点额外的属性:

function subInstanceWithAge(o) {
  function F(){}
  F.prototype = o;
  
  var sub = new F();
  sub.age = 18;
  return sub;
}

var superInstance = {
  name: 'Lilei'
}

var sub = subInstanceWithAge(superInstance);
alert(sub.name);  // Lilei
alert(sub.age);    // 18

同样是share父对象的属性。

寄生组合式继承

这种继承方式简直伤心病况。

function inherit(subType, superType) {
  function F() {}
  F.prototype = superType.prototype;
  var sub_prototype = new F();

  sub_prototype.constructor = subType;
  subType.prototype = sub_prototype;
}

var SuperType = function(name) {
  this.name = name;
}

SuperType.prototype.getName = function() {
  return this.name;
}

var SubType = function(name, age) {
  SuperType.call(this, name);
  
  this.age = age;
}

inherit(SubType, SuperType);

SubType.prototype.getAge = function() {
  return this.age;
}

var sub = new SubType('Lilei', 18);
alert(sub.getName());  // Lilei
alert(sub.getAge());     // 18
alert(SuperType.isPrototypeOf(sub));  // false

虽然子对象能继承父对象的属性,但子对象完全不认识父对象了。与其说是继承,不如说是copy,而且会破坏subType本来的继承解构。

最后介绍的三种工厂方式算是对传统的三种继承方式的发散吧。事实上,只要掌握前三种继承,就可以根据实际需求发散出各种满足使用需求的继承工具方法。

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

推荐阅读更多精彩内容

  • 前言 面向对象编程的一个重要方面是对象继承. 继承的对象拥有被继承对象的所有属性和方法, 这对复用代码是非常有用的...
    HelloJames阅读 933评论 0 0
  • 标识符指变量,函数,属性的名字,或者函数的参数;对象是引用类型的值,是引用类型的一个实例;引用类型是一种数据结构;...
    JacobMa1996阅读 172评论 0 2
  • 一、原型(prototype) JavaScript中,函数本身也是一个包含了方法和属性的对象。prototype...
    PrinzessinGJyao阅读 124评论 0 0
  • 对象的继承面向对象编程最重要的一个方面,就是对象的继承。A对象通过继承B对象,就能直接拥有B对象的所有的属性和方法...
    喝水小恐龙阅读 238评论 0 0
  • 构造函数 子类的原型对象-类式继承 缺点,如果父类公有属性是引用类型如数组,就会被所有子类的实例公有,其中一个实例...
    水墨小龙虾阅读 251评论 0 0