返回函数的JavaScript函数


Posted in Javascript onJune 14, 2016

几个星期前,我发了一条微博说我喜欢返回函数的函数。很快就出现了几个回复,基本是都是….什么东东?!对于一个程序员来说,理解返回函数的函数是一个非常重要的技能,使用它你能节省很多代码,让JavaScript更高效,让你进一步理解JavaScript的强大之处。下面是我写的几个简单的例子,我希望通过它你能理解我所表达的意思。

假设你有一个对象,包含有两个子对象,它们都有get方法,这两个方法非常相似,稍有不同:

var accessors = {
 sortable: {
 get: function() {
  return typeof this.getAttribute('sortable') != 'undefined';
 }
 },
 droppable: {
 get: function() {
  return typeof this.getAttribute('droppable') != 'undefined';
 }
 }
};

重复的代码不是一个好的现象,所以我们要创建一个外部函数,接受一个属性名称:

function getAttribute(attr) {
 return typeof this.getAttribute(attr) != 'undefined';
}

var accessors = {
 sortable: {
 get: function() {
  return getAttribute('sortable');
 }
 },
 droppable: {
 get: function() {
  return getAttribute('droppable');
 }
 }
};

这样好多了,但仍不完美,因为还是有些多余的部分,更好的方法是要让它直接返回最终需要的函数——这样能消除多余的函数执行:

function generateGetMethod(attr) {
 return function() {
 return typeof this.getAttribute(attr) != 'undefined';
 };
}

var accessors = {
 sortable: {
 get: generateGetMethod('sortable')
 },
 droppable: {
 get: generateGetMethod('droppable')
 }
};

/* 它跟最初的方法是完全等效的:*/

var accessors = {
 sortable: {
 get: function() {
  return typeof this.getAttribute('sortable') != 'undefined';
 }
 },
 droppable: {
 get: function() {
  return typeof this.getAttribute('droppable') != 'undefined';
 }
 }
};

*/

上面你看到的就是一个返回函数的函数;每个子对象里都有了自己的get方法,但却去掉了多余的函数嵌套执行过程。

这是一种非常有用的技术,能帮你消除重复相似的代码,如果使用的恰当,能让你的代码更可读,更易维护!

大家理解了吗?

Javascript 相关文章推荐
jquery控制页面部分刷新的方法
Jun 24 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
javascript计时器编写过程与实现方法
Feb 29 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
vue后台管理之动态加载路由的方法
Aug 13 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 #Javascript
Web程序员必备的7个JavaScript函数
Jun 14 #Javascript
Javascript中的迭代、归并方法详解
Jun 14 #Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 #Javascript
jQuery处理XML文件的几种方法
Jun 14 #Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 #Javascript
深入理解jQuery 事件处理
Jun 14 #Javascript
You might like
一个ubbcode的函数,速度很快.
2006/10/09 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
精解window.setTimeout()&window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python字符串连接的N种方式总结
2014/09/17 Python
Python之list对应元素求和的方法
2018/06/28 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
详解numpy的argmax的具体使用
2019/05/27 Python
python操作文件的参数整理
2019/06/11 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
详解python datetime模块
2020/08/17 Python
师范生个人推荐信
2013/11/29 职场文书
项目建议书模板
2014/05/12 职场文书
微电影大赛策划方案
2014/06/05 职场文书
学习型党组织心得体会
2014/09/12 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书
民事诉讼代理词
2015/05/25 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
Java基础之this关键字的使用
2021/06/30 Java/Android
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle