返回函数的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 相关文章推荐
日期 时间js控件
May 07 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
表格单元格交错着色实现思路及代码
Apr 01 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
jquery实现横向图片轮播特效代码分享
Nov 19 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
Vue项目中设置背景图片方法
Feb 21 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
vue 通过base64实现图片下载功能
Dec 19 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 IN_ARRAY 函数使用注意事项
2010/07/24 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
php实现图片局部打马赛克的方法
2015/02/11 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
详解javascript函数的参数
2015/11/10 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
Python3中多线程编程的队列运作示例
2015/04/16 Python
python中input()与raw_input()的区别分析
2016/02/27 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
学术会议邀请函范文
2014/01/22 职场文书
会计专业求职信范文
2014/03/16 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
就业导师推荐信范文
2015/03/27 职场文书
简单的辞职信模板
2015/05/12 职场文书
红楼梦读书笔记
2015/06/25 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
情况说明书格式及范文
2019/06/24 职场文书
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android