返回函数的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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
各种常用浏览器getBoundingClientRect的解析
May 21 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
Oct 01 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
vue的toast弹窗组件实例详解
May 14 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 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
数据库中排序的对比及使用条件详解
2012/02/23 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
javascript常用的方法分享
2015/07/01 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
JS作用域深度解析
2016/12/29 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
Python中的并发编程实例
2014/07/07 Python
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
python 简单的多线程链接实现代码
2016/08/28 Python
详解python算法之冒泡排序
2019/03/05 Python
python实现五子棋小程序
2019/06/18 Python
python日期相关操作实例小结
2019/06/24 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
python的Jenkins接口调用方式
2020/05/12 Python
职务说明书范文
2014/05/07 职场文书
法制宣传教育方案
2014/05/09 职场文书
爱护公共设施的标语
2014/06/24 职场文书
三峡大坝导游词
2015/01/31 职场文书
志愿服务心得体会
2016/01/15 职场文书
《司马光》教学反思
2016/02/22 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
如何优化vue打包文件过大
2022/04/13 Vue.js