实例介绍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 相关文章推荐
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 Javascript
js 求时间差的实现代码
Apr 26 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
Vue常用指令详解分析
Aug 19 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 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
一个oracle+PHP的查询的例子
2006/10/09 PHP
php strcmp使用说明
2010/04/22 PHP
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
Python数据库的连接实现方法与注意事项
2016/02/27 Python
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
python绘制地震散点图
2019/06/18 Python
10个顶级Python实用库推荐
2021/03/04 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
2014年巴西世界杯口号
2014/06/05 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书