JavaScript mixin实现多继承的方法详解


Posted in Javascript onMarch 30, 2017

本文实例讲述了JavaScript mixin实现多继承的方法。分享给大家供大家参考,具体如下:

mixin简单通俗的讲就是把一个对象的方法和属性拷贝到另一个对象上,注意这个继承还是有区别的。js是一种只支持单继承的语言,毕竟一个对象只有一个原型,如果想实现多继承,那就简单暴力的把需要继承的父类的所有属性都拷贝到子类上,就是使用mixin啦。

下面所有代码可以到github上查看完整版。

一个简单的mixin

直接上代码

function extend(destClass, srcClass) {
  var destProto = destClass.prototype;
  var srcProto = srcClass.prototype;
  for (var method in srcProto) {
    if (!destProto[method]) {
      destProto[method] = srcProto[method];
    }
  }
}
function Book(){}
Book.prototype.printName = function(){
  console.log('I am a book, named hello');
};
function JS(){}
extend(JS, Book);
var js = new JS();
console.log(js);

JavaScript mixin实现多继承的方法详解

现在你应该大概了解mixin在做什么。

可以仅仅拷贝某些方法:

function extend(destClass, srcClass, methods) {
  var srcProto = srcClass.prototype;
  var destProto = destClass.prototype ;  
  for (var i=0; i<methods.length; i++) {
    var method = methods[i];
    if (!destProto[method]) {
      destProto[method] = srcProto[method];
    }
  }
}
function Book() {}
Book.prototype.getName = function() {};
Book.prototype.setName = function() {};
function JS() {}
extend(JS, Book, ['getName']);
var js = new JS();
console.log(js);

JavaScript mixin实现多继承的方法详解

mixin实现多继承

直接上代码。

function extend(destClass) {
  var classes = Array.prototype.slice.call(arguments, 1);
  for (var i=0; i<classes.length; i++) {
    var srcClass = classes[i];
    var srcProto = srcClass.prototype;
    var destProto = destClass.prototype; 
    for (var method in srcProto) {
      if (!destProto[method]) {
        destProto[method] = srcProto[method];
      }
    }
  }
}
function Book() {}
Book.prototype.getName = function() {};
Book.prototype.setName = function() {};
function Tech(){}
Tech.prototype.showTech = function(){};
function JS() {}
extend(JS, Book, Tech);
var js = new JS();
console.log(js);

JavaScript mixin实现多继承的方法详解

总结

很多前端库里都有mixin方法,只是叫法不一样,比如 jQuery的extend ,文中我们实现的都是浅拷贝,jQuery中的extend可以实现深拷贝。很多库会使用mixin的方式,将一些工具方法扩展到相应对象中,实现代码复用。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
Aug 10 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
Jun 09 Javascript
深入解读JavaScript中的Iterator和for-of循环
Jul 28 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 #Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 #jQuery
jQuery实现Select下拉列表进行状态选择功能
Mar 30 #jQuery
借助node实战JSONP跨域实例
Mar 30 #Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 #Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 #Javascript
实例详解display:none与visible:hidden的区别
Mar 30 #Javascript
You might like
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
Vuex实现数据共享的方法
2019/12/20 Javascript
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python批量修改图片大小的方法
2018/07/24 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
Python控制台实现交互式环境执行
2020/06/09 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
武汉某公司的C#笔试题面试题
2015/12/25 面试题
酒店人事专员岗位职责
2013/12/19 职场文书
酒吧创业计划书
2014/01/18 职场文书
运动会通讯稿300字
2014/02/02 职场文书
业务员简历自我评价
2014/03/06 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL