实例介绍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的面向对象(一)
Nov 09 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
Jun 09 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
详解React中的组件通信问题
Jul 31 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
Sep 18 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 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中simplexml_load_string函数使用说明
2011/01/01 PHP
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
php伪静态之APACHE篇
2014/06/02 PHP
php关联数组快速排序的方法
2015/04/17 PHP
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
python中使用mysql数据库详细介绍
2015/03/27 Python
Django中的forms组件实例详解
2018/11/08 Python
Python中一般处理中文的几种方法
2019/03/06 Python
Python函数中的可变长参数详解
2019/09/12 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
Python实现汇率转换操作
2020/05/03 Python
Python日志器使用方法及原理解析
2020/09/27 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
小学生美德少年事迹
2014/02/02 职场文书
中学生励志演讲稿
2014/04/26 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
社区务虚会发言材料
2014/10/20 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
排球赛新闻稿
2015/07/17 职场文书
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python
MySQL详细讲解变量variables的用法
2022/06/21 MySQL