返回函数的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 相关文章推荐
IE6下JS动态设置图片src地址问题
Jan 08 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
jQuery中height()方法用法实例
Dec 24 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
JS如何生成一个不重复的ID的函数
Dec 25 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
JS实现简单的点赞与踩功能示例
Dec 05 Javascript
微信小程序实现随机验证码功能
Dec 20 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
PHP 实例化类的一点摘记
2008/03/23 PHP
php 分页类 扩展代码
2009/06/11 PHP
php函数之子字符串替换 str_replace
2011/03/23 PHP
定义php常量的详解
2013/06/09 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
原生js实现日期联动
2015/01/12 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
企业办公室主任岗位职责
2014/02/19 职场文书
劲霸男装广告词
2014/03/21 职场文书
党建工作经验交流材料
2014/05/25 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
团委工作总结2015
2015/04/02 职场文书
特种设备安全管理制度
2015/08/06 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS
vue 给数组添加新对象并赋值
2022/04/20 Vue.js
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis
Java Spring读取和存储详细操作
2022/08/05 Java/Android