返回函数的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 json2 使用方法
Mar 16 Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 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
支持oicq头像的留言簿(一)
2006/10/09 PHP
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
zend framework配置操作数据库实例分析
2012/12/06 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
python文件与目录操作实例详解
2016/02/22 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
css3绘制百度的小度熊
2018/10/29 HTML / CSS
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
信访工作经验交流材料
2014/05/23 职场文书
应急管理培训方案
2014/06/12 职场文书
离婚财产分配协议书
2014/10/21 职场文书
医生辞职信范文
2015/03/02 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
Apache自带的ab压力测试工具的实现
2022/07/23 Servers