(转载)JavaScript中匿名函数,函数直接量和闭包


Posted in Javascript onMay 08, 2007

原文出处: http://www.dnew.cn/post/196.htm

先看下下面几种写法

1.function f(x){return x*x;};f(x);

2.(function(x){return x*x;})(x);

3.(function(x){return x*x;}(x));

第一种我们应该都很熟悉了,这是我们经常使用的写法。第二第三种都是匿名函数的写法。

--------------------------------------------------------------------------------

第二种
可以这样理解:

var f=function(x) {return x*x;};f()

那我们不通过f这个变量来引用函数就是

function(){}()

然而这样肯定是错误的就像

var f=1+2;
f=f*0;

var f=1+2*0;

结果不同一样。
要得到正确结果只能:

f=(1+2)*0;

也就是要明确的标识出程序块,即:

(function(){})()

肯你有疑问:括号“()”到底是不是起到了标识代码块的作用?
我们可以用JavaScript的内置函数检测一下!
举一个最简单的例子:

alert(4)

这段代码会弹出提示内容是“4”
改成这样
(alert)(4)

可以看到执行的效果和上一段代码一样。

这种形式的函数执行也被很多JavaScript框架所采用。

--------------------------------------------------------------------------------

第三种,如果你用过jsvm框架的话就会发现里面的代码使用了这种形式。
那如何解释第三种情况呢?
为了弄明白浏览器是如何理解这样的写法的,我们可以利用一下Mozilla Firefox的错误控制台功能。
在代码中插入一段错误代码,代码段如下:

(function(s){s+s}(1)).splice();

打开Mozilla Firefox的错误控制台,可以看到有如下的错误提示

错误: (function (s) {})(1) has no properties
源文件:file:///C:/Documents…….html
行:18

可以认为,浏览器对于
(function(s){s+s}(1))
这样的代码按照

(function (s) {s+s})(1)
来解析的。

--------------------------------------------------------------------------------

到此可能你有这样的认识:

function f(x){return x*x;};f(x);==(function(x){return x*x;})(x);==(function(x){return x*x;}(x));

但是他们还是有区别的,
首先,对于像第二和第三种形式,其它的函数和代码是不可能调用所定义的函数的,有一种说发把这样的函数称为匿名函数或者函数直接量。
其次,第二和第三种形式执行的函数,中间变量不会污染到全局命名空间,你可以把中间的代码看作纯粹的子过程调用。
当然使用后面两种形式的函数定义可以很容易的实现闭包。
看一个例子:

/*
http://jibbering.com/faq/faq_notes/closures.html(Dnew.CN注)
A global variable - getImgInPositionedDivHtml - is declared and
  assigned the value of an inner function expression returned from
  a one-time call to an outer function expression.

  That inner function returns a string of HTML that represents an
  absolutely positioned DIV wrapped round an IMG element, such that
  all of the variable attribute values are provided as parameters
  to the function call:-
*/
var getImgInPositionedDivHtml = (function(){
   /* The - buffAr - Array is assigned to a local variable of the
      outer function expression. It is only created once and that one
      instance of the array is available to the inner function so that
      it can be used on each execution of that inner function.

      Empty strings are used as placeholders for the date that is to
      be inserted into the Array by the inner function:-
   */
   var buffAr = [
       '<div id="',
       '',   //index 1, DIV ID attribute
       '" style="position:absolute;top:',
       '',   //index 3, DIV top position
       'px;left:',
       '',   //index 5, DIV left position
       'px;width:',
       '',   //index 7, DIV width
       'px;height:',
       '',   //index 9, DIV height
       'px;overflow:hidden;\"><img src=\"',
       '',   //index 11, IMG URL
       '\" width=\"',
       '',   //index 13, IMG width
       '\" height=\"',
       '',   //index 15, IMG height
       '\" alt=\"',
       '',   //index 17, IMG alt text
       '\"><\/div>'
   ];
   /* Return the inner function object that is the result of the
      evaluation of a function expression. It is this inner function
      object that will be executed on each call to -
      getImgInPositionedDivHtml( ... ) -:-
   */
   return (function(url, id, width, height, top, left, altText){
       /* Assign the various parameters to the corresponding
          locations in the buffer array:-
       */
       buffAr[1] = id;
       buffAr[3] = top;
       buffAr[5] = left;
       buffAr[13] = (buffAr[7] = width);
       buffAr[15] = (buffAr[9] = height);
       buffAr[11] = url;
       buffAr[17] = altText;
       /* Return the string created by joining each element in the
          array using an empty string (which is the same as just
          joining the elements together):-
       */
       return buffAr.join('');
   }); //:End of inner function expression.
})();
/*^^- :The inline execution of the outer function expression. */

Javascript 相关文章推荐
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 Javascript
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
May 08 #Javascript
延时重复执行函数 lLoopRun.js
May 08 #Javascript
用js判断浏览器是否是IE的比较好的办法
May 08 #Javascript
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 #Javascript
javascript之水平横向滚动歌词同步的应用
May 07 #Javascript
javascript之ESC(第二类混淆)
May 06 #Javascript
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 #Javascript
You might like
php摘要生成函数(无乱码)
2012/02/04 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
python3.5的包存放的具体路径
2020/08/16 Python
如何利用python正则表达式匹配版本信息
2020/12/09 Python
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
公益广告语集锦
2014/03/13 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
农村文化活动总结
2014/08/28 职场文书
市场部经理岗位职责
2015/02/02 职场文书
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers