javascript利用apply和arguments复用方法


Posted in Javascript onNovember 25, 2013

首先,有个单例对象,它上面挂了很多静态工具方法。其中有一个是each,用来遍历数组或对象。

var nativeForEach = [].forEach 
var nativeMap = [].map 
var util = { 
    each: function (obj, iterator, context) { 
        if (obj == null) return
        if (nativeForEach && obj.forEach === nativeForEach) { 
          obj.forEach(iterator, context) 
        } else if ( obj.length === +obj.length ) { 
            for (var i = 0; i < obj.length; i++) { 
                if (iterator.call(obj[i] || context, obj[i], i, obj) === true) return
            } 
        } else { 
            for (var k in obj) { 
                if (iterator.call(obj[k] || context, obj[k], k, obj) === true) return
            } 
        } 
    }, 
    map: function(obj, iterator, context) { 
        var results = [] 
        if (obj == null) return results 
        if (nativeMap && obj.map === nativeMap) return obj.map(iterator, context)      
        this.each(obj, function(val, i, coll) { 
            results[i] = iterator.call(context, val, i, coll) 
        }) 
        return results 
    } 
}

还有诸如every、some等对集合(Array,Hash)操作的工具函数。使用时采用util.xx方式。

如果定义了一个集合类,这个类内部有集合数据。

function Collection(data) { 
    this.data = data || [] 
    // some other property 
    // this.xxx = yyy 
} 
Collection.prototype = { 
    // some method 
}

可以很方便的把util上的方法拷贝到集合类上,如

function copyMethod(clazz, obj) { 
    for (var method in obj) { 
        clazz.prototype[method] = function() { 
            var args = [].slice.call(arguments) 
            var target = this.data 
            args.unshift(target) 
            obj[method].apply(obj, args) 
        } 
    } 
} 
copyMethod(Collection, util)

这样拷贝后,Collection的实例就有了util上的方法,util操作的集合对象(第一个参数)就是Collection的this.data。如下直接可以遍历this.data了。

var coll = new Collection([10, 20, 30])  // 遍历 
coll.each(function(k) { 
    console.log(k) 
}) 
// 操作 
var arr = coll.map(function(k) { 
   return k - 5 
}) 
console.log(arr) // 5, 15, 25

这种模式在很多开源库中使用,比如jQuery,它的 $.each/$.map 很方便的拷贝到了 $().each/$().map。

又如Backbone,它的 _.each/_.map/_.every/_.chain (还有很多)都拷贝到了 Collection的原型上。

// Underscore methods that we want to implement on the Collection. 
// 90% of the core usefulness of Backbone Collections is actually implemented 
// right here: 
var methods = ['forEach', 'each', 'map', 'collect', 'reduce', 'foldl', 
  'inject', 'reduceRight', 'foldr', 'find', 'detect', 'filter', 'select', 
  'reject', 'every', 'all', 'some', 'any', 'include', 'contains', 'invoke', 
  'max', 'min', 'toArray', 'size', 'first', 'head', 'take', 'initial', 'rest', 
  'tail', 'drop', 'last', 'without', 'difference', 'indexOf', 'shuffle', 
  'lastIndexOf', 'isEmpty', 'chain']; // Mix in each Underscore method as a proxy to `Collection#models`. 
_.each(methods, function(method) { 
  Collection.prototype[method] = function() { 
    var args = slice.call(arguments); 
    args.unshift(this.models); 
    return _[method].apply(_, args); 
  }; 
});

又有,把 _.keys / _.values / _.pairs / _.invert / _.pick 等对对象操作的实用方法拷贝了 Backbone.Model上 (1.0新增)

var modelMethods = ['keys', 'values', 'pairs', 'invert', 'pick', 'omit']; // Mix in each Underscore method as a proxy to `Model#attributes`. 
_.each(modelMethods, function(method) { 
  Model.prototype[method] = function() { 
    var args = slice.call(arguments); 
    args.unshift(this.attributes); 
    return _[method].apply(_, args); 
  }; 
});
Javascript 相关文章推荐
javascript instanceof,typeof的区别
Mar 24 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
详解javascript中的事件处理
Nov 06 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 Javascript
原生js生成图片验证码
Oct 11 Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 #Javascript
js给onclick赋值传参数的两种方法
Nov 25 #Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 #Javascript
写JQuery插件的基本知识
Nov 25 #Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 #Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 #Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 #Javascript
You might like
PHP 可阅读随机字符串代码
2010/05/26 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
js创建对象的几种常用方式小结(推荐)
2010/10/24 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
[41:08]TNC vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python获取糗百图片代码实例
2013/12/18 Python
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
tensorflow识别自己手写数字
2018/03/14 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
python如何实时获取tcpdump输出
2020/09/16 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
nohup的用法
2014/08/10 面试题
员工工作表扬信范文
2014/01/13 职场文书
留学推荐信中文范文三篇
2014/01/25 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL