返回函数的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 相关文章推荐
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 Javascript
jQuery的deferred对象详解
Nov 12 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
原生js调用json方法总结
Feb 22 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 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
php下使用以下代码连接并测试
2008/04/09 PHP
一些php技巧与注意事项分析
2011/02/03 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
PHP用身份证号获取星座和生肖的方法
2013/11/07 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
javascript 学习笔记(onchange等)
2010/11/14 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
js实现拖拽效果
2015/02/12 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
2020/11/07 Javascript
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
详解如何减少python内存的消耗
2019/08/09 Python
python3下pygame如何实现显示中文
2020/01/11 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
个人求职信范文分享
2013/12/13 职场文书
春节超市活动方案
2014/08/14 职场文书
80后婚前协议书范本
2014/10/24 职场文书
安全先进个人材料
2014/12/29 职场文书
教师工作能力自我评价
2015/03/04 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS