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 相关文章推荐
jQuery 常见学习网站与参考书
Nov 09 Javascript
js检查页面上有无重复id的实现代码
Jul 17 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
node.js操作MongoDB的实例详解
Oct 11 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
Apr 10 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
Angular 多模块项目构建过程
Feb 13 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(视频)Http下载
2006/12/12 PHP
php缓存技术详细总结
2013/08/07 PHP
PHP面向对象精要总结
2014/11/07 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
python检测是文件还是目录的方法
2015/07/03 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
python3 反射的四种基本方法解析
2019/08/26 Python
Python实现手绘图效果实例分享
2020/07/22 Python
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
应用化学专业本科生求职信
2013/09/29 职场文书
幼教毕业生自我鉴定
2014/01/12 职场文书
煤矿班组长竞聘书
2014/03/31 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
项目合作意向书模板
2014/07/29 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python
Golang 切片(Slice)实现增删改查
2022/04/22 Golang
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers