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 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
JavaScript Date对象使用总结
May 14 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
Nov 26 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
Bootstrap框架安装使用详解
Jan 21 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
JS制作简易计算器的实例代码
Jul 04 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
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通过session防url攻击方法
2014/12/10 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
火车票抢票python代码公开揭秘!
2018/03/08 Python
Python在groupby分组后提取指定位置记录方法
2018/04/20 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
Python 文件数据读写的具体实现
2020/01/24 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
.NET初级开发工程师面试题
2014/04/18 面试题
高三自我鉴定范文
2013/10/19 职场文书
大型车展策划方案
2014/02/01 职场文书
代理班主任的自我评价
2014/02/04 职场文书
见习报告的格式
2014/10/31 职场文书
2014年生产部工作总结
2014/12/17 职场文书
入党介绍人意见范文
2015/06/01 职场文书
2016春季运动会前导词
2015/11/25 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
Java基于字符界面的简易收银台
2021/06/26 Java/Android