实例介绍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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
自己做的模拟模态对话框实现代码
May 23 Javascript
jquery 模板的应用示例
Nov 12 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
Dec 03 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 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
php+ajax实现文章自动保存的方法
2014/12/30 PHP
yii分页组件用法实例分析
2015/12/28 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
javascript 获取图片颜色
2009/04/05 Javascript
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
2018/08/07 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
python使用psutil模块获取系统状态
2016/08/27 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
python中有函数重载吗
2020/05/28 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
Python 如何在字符串中插入变量
2020/08/01 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
化妆师职业生涯规划书
2014/02/16 职场文书
销售内勤岗位职责
2015/02/10 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
个人收入证明格式
2015/06/24 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技