返回函数的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 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
判断控件是否已加载完成的代码
Feb 24 Javascript
js怎么终止程序return不行换jfslk
May 30 Javascript
jquery.post用法示例代码
Jan 03 Javascript
js获得网页背景色和字体色的方法
Mar 21 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
微信小程序开发问题之wx.previewImage
Dec 25 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 Javascript
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
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
php5中类的学习
2008/03/28 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
基于vue实现分页效果
2017/11/06 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
跟老齐学Python之有点简约的元组
2014/09/24 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
PHP如何与mysql建立链接
2013/05/05 面试题
有关打架的检讨书
2014/01/25 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
2014年底个人工作总结
2015/03/10 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript