返回函数的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 相关文章推荐
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
Feb 06 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 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
第十一节--重载
2006/11/16 PHP
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
javascript事件问题
2009/09/05 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
Bootstrap基础学习
2015/06/16 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
JS基于ES6新特性async await进行异步处理操作示例
2019/02/02 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
物流经理自我评价
2013/09/23 职场文书
青年创业培训欢迎词
2014/01/08 职场文书
公司委托书怎么写
2014/08/02 职场文书
整改落实自查报告
2014/11/05 职场文书
世界气象日活动总结
2015/02/27 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
旷工检讨书大全
2015/08/15 职场文书
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis