(转载)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 相关文章推荐
Javascript JSQL,SQL无处不在,
May 05 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
Apr 13 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
js this 绑定机制深入详解
Apr 30 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学习之PHP表达式
2006/10/09 PHP
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
php构造函数实例讲解
2013/11/13 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
splice slice区别
2006/10/09 Javascript
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
jquery 插件开发备注
2010/08/27 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
vue开发中遇到的问题总结
2020/04/07 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
Python for循环中的陷阱详解
2018/07/13 Python
python正则表达式匹配[]中间为任意字符的实例
2018/12/25 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
经典c++面试题六
2012/01/18 面试题
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
师德师风演讲稿
2014/05/05 职场文书
节能宣传周活动总结
2014/05/08 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
爱情保证书
2015/01/17 职场文书
导游词开场白
2015/01/31 职场文书
社区义诊通知
2015/04/24 职场文书
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js