返回函数的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 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
js 调整select 位置的函数
Feb 21 Javascript
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
异步安全加载javascript文件的方法
Jul 21 Javascript
Javascript基础之数组的使用
May 13 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
vant中的toast轻提示实现代码
Nov 04 Javascript
javascript实现移动端轮播图
Dec 09 Javascript
element-ui点击查看大图的方法示例
Dec 14 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
Syphon 秘笈
2021/03/03 冲泡冲煮
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
[01:06]欢迎来到上海,TI9
2018/08/26 DOTA
Python正则表达式匹配HTML页面编码
2015/04/08 Python
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
python getopt详解及简单实例
2016/12/30 Python
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
一些.net面试题
2014/10/06 面试题
C++程序员求职信
2014/05/07 职场文书
还款承诺书范文
2014/05/20 职场文书
大学优秀班集体申报材料
2014/05/23 职场文书
娱乐节目策划方案
2014/06/10 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
校友会致辞
2015/07/30 职场文书
家长会感言
2015/08/01 职场文书
Python Parser的用法
2021/05/12 Python
Java 超详细讲解hashCode方法
2022/04/07 Java/Android