实例介绍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 相关文章推荐
在线编辑器中换行与内容自动提取
Apr 24 Javascript
JavaScript 面向对象之命名空间
May 04 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
JS中Location使用详解
May 12 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
May 02 Javascript
jQuery编写QQ简易聊天框
Aug 27 jQuery
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 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
解析php中反射的应用
2013/06/18 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
php中的登陆login实例代码
2016/06/20 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
Python的语言类型(详解)
2017/06/24 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
国外平面设计第一市场:99designs
2016/10/25 全球购物
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
七一党建活动方案
2014/01/28 职场文书
食品厂厂长岗位职责
2014/01/30 职场文书
大专生毕业的自我评价
2014/02/06 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技