资讯专栏INFORMATION COLUMN

JS面向对象的程序设计之继承的实现-组合继承

antz / 543人阅读

摘要:实现思路使用原型链实现对原型方法和方法的继承,而通过借用构造函数来实现对实例属性的继承。继承属性继承方法以上代码,构造函数定义了两个属性和。

JS面向对象的程序设计之继承的实现-组合继承

前言:最近在细读Javascript高级程序设计,对于我而言,中文版,书中很多地方翻译的差强人意,所以用自己所理解的,尝试解读下。如有纰漏或错误,会非常感谢您的指出。文中绝大部分内容引用自《JavaScript高级程序设计第三版》。

组合继承(Combination Inheritance)

组合继承(Combination Inheritance), 有时候也叫做伪经典继承,指的是:将原型链和借用构造函数的技术组合到一块,从而发挥两者之长的一种继承模式。

实现思路: 使用原型链实现对原型方法和方法的继承,而通过借用构造函数来实现对实例属性的继承。

这样,既通过在原型上定义方法实现了函数复用,又能够保证每个实例对象都有它自己的属性。

function SuperType(name){
    this.name = name;
    this.colors = ["red","green","blue"];
}

SuperType.prototype.sayName = function(){
    console.log(this.name);
}

function SubType(name, age) {
    
    //继承属性
    SuperType.call(this, name);

    this.age = age;
}

//继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType();
SubType.prototype.sayAge = function(){
    console.log(this.age);
}

var instance1 = new SubType("Shaw", 18);
instance1.colors.push("black");
console.log(instance1.colors); //["red","green","blue","black"]
instance1.sayName(); // "Shaw"
instance1.sayAge(); // 18

var instance2 = new SubType("Roc", 19);
console.log(instance2.colors); // ["red", "green", "blue"]
instance2.sayName(); // "Roc"
instance2.sayAge(); // 19

以上代码,SuperType构造函数定义了两个属性:name和colors。

在SuperType的原型上定义了一个sayName()方法。

SubType构造函数在调用SuperType构造函数时传入了name参数,紧接着又定义了它自己的属性age。

然后,将SuperType的实例对象赋值给SubType的原型,然后又在该新原型上定义了sayAge()方法、

这样一来,就可以让两个不同的SubType实例对象既分别拥有自己的属性——包括colors属性,又可以使用相同的方法了。

组合避免了原型链和借用构造函数的缺陷,融合了他们的优点。成为JavaScript中最常用的继承模式。而且, 操作符 instanceof 和 isPrototypeOf()方法也能够用于识别基于组合继承创建的对象。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98601.html

相关文章

  • JS面向对象程序设计继承实现-寄生组合继承

    摘要:组合继承最大的问题就是无论在什么情况下,都会调用两次超类型构造函数一次是在创建子类型原型的时候。好在,我们已经找到了解决这个问题方法寄生组合式继承所谓寄生组合式继承,即通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。 寄生组合式继承 组合继承是JavaScript最常用的继承模式。 不过,它也有自己的不足。 组合继承最大的问题就是无论在什么情况下,都会调用两次超类型构造函数...

    y1chuan 评论0 收藏0
  • 面向对象程序设计继承

    摘要:以下是几种中实现继承的方式方法它们也是各自有各自的优缺点选择哪一种根据自己的应用而定最适合自己的才是最好的通过原型链继承通过原型对象继承缺点引用类型的值在原型中会被所有实例共享不能向超类的构造函数中传递参数借用构造函数继承借用构造函数继承是 以下是几种js中实现继承的方式方法,它们也是各自有各自的优缺点,选择哪一种根据自己的应用而定,最适合自己的才是最好的. 通过原型链继承 funct...

    魏明 评论0 收藏0
  • javascript面向对象继承(上)

    摘要:使用原型链实现对原型属性和方法的继承,用借用构造函数模式实现对实例属性的继承。 我们之前介绍了javascript面向对象的封装的相关内容,还介绍了js的call方法,今天开始讨论js的继承这篇文章参考了《javascript高级程序设计》(第三版),但内容不局限于,网上很多关于js继承的相关内容都是来自于这本书,有兴趣的同学可以翻阅查看 原型链继承 我们先通过一个栗子,了解一下原型链...

    ivyzhang 评论0 收藏0
  • JS学习笔记(第6章)(面向对象继承——JS继承六大方式)

    摘要:除此之外,在超类型的原型中定义的方法,对子类型而言也是不可兼得,结果所有类型都只能用构造函数模式。创建对象增强对象指定对象继承属性这个例子的高效率体现在它只调用了一次构造函数。 1、原型链 原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。构造函数、原型和实例的关系:每个构造函数都有一个原型对象;原型对象都包含着一个指向构造函数的指针;实例都包含一个指向原型对象的...

    lscho 评论0 收藏0
  • [面试专题]js面向对象(OOP)

    摘要:之面向对象对象类型数据类型分六类简单类型五种复杂类型其中也属于基本类型。 js之面向对象(OOP) js对象类型(Object) js数据类型分六类,简单类型:Undefined,Null,Bollean,Number,String五种,复杂类型:Object.其中Undefined、Null、Boolean、Number也属于基本类型。Object、Array和Function则属...

    andycall 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<