实例介绍JavaScript中多种组合继承


Posted in Javascript onJanuary 20, 2019

1. 组合继承:又叫伪经典继承,是指将原型链和借用构造函数技术组合在一块的一种继承方式。

下面来看一个例子:

function SuperType(name) {

  this.name = name;

  this.colors = ["red", "blue", "green"];

 }

 SuperType.prototype.sayName = function() {

  alert(this.name);

 }

 function SubType(name, age) {

  SuperType.call(this, name);

  this.age = age;

 }

 

 //继承方法

 SubType.prototype = new SuperType();

 SubType.prototype.sayAge = function() {

  alert(this.age);

 }

 

 var instance1 = new SubType("Nicholas", 29);

 instance1.colors.push("black");

 alert(instance1.colors); //red,blue,green,black

 instance1.sayName(); //Nicholas

 instance1.sayAge(); //29

 

 var instance2 = new SubType("Greg", 27);

 alert(instance2.colors); //red,blue,green

 instance2.sayName(); //Greg

 instance2.sayAge(); //27

组合继承避免了原型链和借用构造函数的缺陷,融合它们的优点。

2. 原型式继承

可以在不必预先定义构造函数的情况下实现继承,其本质是执行对给定对象的浅复制。而复制得到的副本还可以得到进一步的改造。

function object(o) {

  function F(){};

  F.prototype = o;

  return new F;

 }

 

 var person = {

  name: "Nicholas",

  friends: ["Shelby", "Court", "Van"]

 };

 

 var antherPerson = object(person);

 antherPerson.name = "Greg";

 antherPerson.friends.push("Rob");

 

 var antherPerson = object(person);

 antherPerson.name = "Linda";

 antherPerson.friends.push("Barbie");

 

 alert(person.friends); //Shelby,Court,Van,Rob,Barbie

3. 寄生式继承

与原型式继承非常相似,也是基于某个对象或某些信息创建一个对象,然后增强对象,最后返回对象。为了解决组合继承模式由于多次调用超类型构造函数而导致的低效率问题,可以将这个模式与组合继承一起使用。

function object(o) {

  function F(){};

  F.prototype = o;

  return new F;

 }

 function createAnother(original) {

  var clone = object(original);

  clone.sayHi = function() {

   alert("Hi");

  };

  return clone;

 }

 

 var person = {

  name: "Nicholas",

  friends: ["Shelby", "Court", "Van"]

 };

 

 var anotherPerson = createAnother(person);

 anotherPerson.sayHi();

4. 寄生组合式继承

集寄生式继承和组合继承的优点与一身,是实现基本类型继承的最有效方式。

//继承原型

 function extend(subType, superType) {

  function F(){};

  F.prototype = superType.prototype;

 

  var prototype = new F;

  prototype.constructor = subType;

  subType.prototype = prototype;

 }

 

 //超类方法

 function SuperType(name) {

  this.name = name;

  this.colors = ["red", "blue", "green"];

 }

 SuperType.prototype.sayName = function() {

  return this.name;

 }

 

 //子类方法

 function SubType(name, age) {

  SuperType.call(this, name);

  this.age = age;

 }

 

 //继承超类的原型

 extend(SubType, SuperType);

 

 //子类方法

 SubType.prototype.sayAge = function() {

  return this.age;

 }

 

 var instance1 = new SubType("Shelby");

 var instance2 = new SubType("Court", 28);

 

 instance1.colors.push('black');

 

 alert(instance1.colors); //red,blue,green,black

 alert(instance2.colors); //red,blue,green

 

 alert(instance1 instanceof SubType); //true

 alert(instance1 instanceof SuperType); //true

这段例子的高效率体现在它只调用了一次SuperType构造函数,并且因此避免了在SubType.prototype上面创建不必要的多余的属性。与此同时,原型链还能保持不变。因此,还能正常使用instanceof 和 isPrototypeOf()。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
jQuery的deferred对象详解
Nov 12 Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 Javascript
JS实现简单随机3D骰子
Oct 24 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 #Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 #Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 #Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 #Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 #Javascript
JavaScript中concat复制数组方法浅析
Jan 20 #Javascript
JavaScript中import用法总结
Jan 20 #Javascript
You might like
Terran热键控制
2020/03/14 星际争霸
php 验证码实例代码
2010/06/01 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
详解javascript高级定时器
2015/12/31 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
Android分包MultiDex策略详解
2017/10/30 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
生物技术研究生自荐信
2013/11/12 职场文书
教职工代表大会主持词
2014/04/01 职场文书
土建施工员岗位职责
2014/07/16 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android