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 相关文章推荐
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
Vue.use源码分析
Apr 22 Javascript
js用类封装pop弹窗组件
Oct 08 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
VUE解决 v-html不能触发点击事件的问题
Oct 28 Javascript
JavaScript Date对象功能与用法学习记录
Apr 28 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 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 foreach 参数强制类型转换的问题
2010/12/10 PHP
基于wordpress主题制作的具体实现步骤
2013/05/10 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
8个PHP数组面试题
2015/06/23 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
pygame实现简易飞机大战
2018/09/11 Python
windows下python安装小白入门教程
2018/09/18 Python
Python转换时间的图文方法
2019/07/01 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
新员工培训个人的自我评价
2013/10/09 职场文书
预备党员党课思想汇报
2014/01/13 职场文书
办公室副主任职责范本
2014/03/08 职场文书
先进个人申报材料
2014/12/30 职场文书
楚门的世界观后感
2015/06/03 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
Android存储中最基本的文件存储方式
2022/04/30 Java/Android