返回函数的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 相关文章推荐
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
js 窗口抖动示例
Sep 04 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
vue-router实现嵌套路由的讲解
Jan 19 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 Javascript
全面解析Vue中的$nextTick
Dec 24 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
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
初识PHP中的Swoole
2016/04/05 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
JavaScript中重名的函数与对象示例详析
2017/09/28 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
python生成随机验证码(中文验证码)示例
2014/04/03 Python
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
Python多继承顺序实例分析
2018/05/26 Python
详解Python正则表达式re模块
2019/03/19 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
Java面试题:为什么要用Java
2012/05/11 面试题
幼儿园六一儿童节活动方案
2014/08/26 职场文书
企业法人代表证明书
2014/09/27 职场文书
结婚堵门保证书
2015/05/08 职场文书
党支部鉴定意见
2015/06/02 职场文书
惊涛骇浪观后感
2015/06/05 职场文书