实例介绍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 相关文章推荐
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
文本框文本自动补全效果示例分享
Jan 19 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
微信小程序 表单Form实例详解(附源码)
Dec 22 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
puppeteer库入门初探
Jan 09 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 分页类代码
2008/11/13 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
URL中“#” “?” &“”号的作用浅析
2017/02/04 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
python 不关闭控制台的实现方法
2011/10/23 Python
python使用psutil模块获取系统状态
2016/08/27 Python
Python爬虫的两套解析方法和四种爬虫实现过程
2018/07/20 Python
python获取时间及时间格式转换问题实例代码详解
2018/12/06 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
python实现人机五子棋
2020/03/25 Python
python为什么要安装到c盘
2020/07/20 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
采购主管的岗位职责
2013/12/17 职场文书
工程专业毕业生自荐信范文
2013/12/25 职场文书
房屋租赁意向书
2014/04/01 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
好媳妇事迹材料
2014/12/24 职场文书
《窃读记》教学反思
2016/02/18 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers