`
cues
  • 浏览: 3608 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
最近访客 更多访客>>
社区版块
存档分类
最新评论

JavaScript匿名函数

 
阅读更多

在JavaScript中,匿名函数是一种非常强大的工具,其特点与用途之多,难于在一篇文章中概括其全部,不过掌握其基本运用并不算太难,本文将尝试从如下方面进行归纳:

其中有2个知识点是笔者认为需要涉及的,不过好在只有你在担忧代码的性能和优雅问题之时,你才需要额外关注,不妨继续往下概览全文@_^

 

匿名函数基本特点

这个特点应该是自解释的,即它是一个没有名字的函数,或说,没有指针指向该函数

 

function() {
	alert("hello world");
}

 

这段代码是完全合法的,但问题是定义之后无法调用,不过本文后面有一个小案例来教你如何使用。

 

匿名函数基本用法

从其特点决定,匿名函数基本会有如下4大类用途 :

 

1、用来声明一个函数表达式,赋值给某一个变量保存起来,留待调用

 

var demo = function() {
	alert("hello world");
};
//some script
demo();

//一段设置XMLHttpRequest回调属性的代码
xhr.onreadystatechange = function() {
	//some script
};
 

2、将匿名函数当作参数传递

 

//一段调用dwr发布的远程对象逻辑的代码
dwrobj.findById(uid, function(data) {
	//some script
});

3、当作返回值动态获取函数实现

 

function createFn(flag) {
	if (flag)
		return function() {
			alert("dude");
		};
	else
		return function() {
			alert("buddy");
		};
}
var demo = createFn(1);
demo();
demo = createFn(0);
demo();
demo = createFn("");
demo();
demo = createFn(NaN);
demo();
demo = createFn(undefined);
demo();
demo = createFn(null);
demo();

 4、利用其变量作用域的特点创建“块级作用域”

之所以打上引号是因为,在ECMA-262中,没block-level scope这个概念,但是通过匿名函数,我们可以模拟出来

首先来看这段代码:

 

function demo() {
	for ( var i = 0; i < 3; i++) {
		var j = "inner variable";
	}
	alert(i);
	alert(j);
}
demo();
//alert(j);//勿取消,留待在JavaScript变量及其作用域中进行分析

结论为:先后弹出3,“inner variable”

看来在for语句块中定义的i和j在语句块结束时并没销毁,但在函数运行结束后销毁了,虽然有些出乎意料之外,但是请先记住这个效果,留待以后分析。

 

为了满足某种需求,并且利用上刚才的效果,你可能需要在某一个块中定义某些变量,然后做到用后即弃的效果,但是需要对上述代码进行修改:

 

function() {
	var j = "inner variable";
	alert("do sth. with variable j");
}();
try {
	alert(j);
} catch (e) {
	alert(e);
}

 首先定义一个匿名函数,然后加了一对小括号让它立马运行,如果能弹出一个警示框,而不是j在块中定义的值(“inner variable”),应该就是ok的,但是最后在浏览器中会报错:

 

因为JavaScript将function关键字视作一个函数声明的开始,其后不能跟随小括号,要这样做的话,得将它外面再套一层小括号,从而转换成一个函数表达式。

 

(function() {
	var j = "inner variable";
	alert("do sth. with variable j");
})();
try {
	alert(j);
} catch (e) {
	alert(e);
}

这样做的目的无非就是避免向全局作用域中添加过多的咚咚,因为他们所占用的资源要等到浏览器关闭的时候才会释放,同时也是为了避免命名冲突。

 

没错,这其实也就是jQuery中一段比较经典的语法。你再想想看为什么上面的try语句块不能替换成if?

 

if (j)
	alert(j);
else
	alert("variable j has been released");

 

在JavaScript中,匿名函数的用法非常之灵活,非master不能阐述详尽且得当,因此本文纯属抛砖引玉,职业习惯告诉我,一个好的问题胜似一个好的答案。

分享到:
评论
8 楼 cues 2011-02-12  
<div class="quote_title">mfkvfn 写道</div>
<div class="quote_div">
<pre name="code" class="java">if (j)   
     alert(j);   
else   
     alert("variable j has been released"); </pre>
<br>不行。
<br>可以用下面这样就没问题了
<br><pre name="code" class="java">if (typeof(j)!='undefined')   
     alert(j);   
else   
     alert("variable j has been released"); </pre>
</div>
<p> </p>
<p>nice! mark一下</p>
<p> </p>
<p>特意查看了一下参考资料,typeof操作符大致这样来运行:</p>
<p>1、对该一元表达式求值</p>
<p>2、对1取得的结果进行类型判断,如果判断结果非引用,goto步骤4</p>
<p>3、对1取得的结果进一步获取其基类对象,如果为null,则return "undefined"</p>
<p>4、对1取得的结果进行求值</p>
<p>5、根据对4取得的结果进行类型判断,据此返回各种不同的字符串值</p>
<p> </p>
<p>针对上面这个案例,因为j为闭包产生的局部变量,退出闭包时己经释放,本身为null,其基类对象理应为null</p>
<p>
</p>
<pre name="code" class="js">if (typeof j!="undefined") //我把j外面的括号去掉了,考虑到typeof是操作符,而非function     
     alert(j);      
else      
     alert("variable j has been released");  </pre>
应尽可能减少使用try-catch来进行流程控制,mfkvfn这段代码是值得推荐的。
7 楼 lackhurt 2011-02-12  
本来以为你有个地方写错了 原来是我看错了
6 楼 mfkvfn 2011-02-12  
if (j)    
     alert(j);    
 else    
     alert("variable j has been released"); 

不行。
可以用下面这样就没问题了
if (typeof(j)!='undefined')    
     alert(j);    
 else    
     alert("variable j has been released"); 
5 楼 cues 2011-02-11  
yolio2003 写道
大概懂了,谢谢详细的解答。

但这个代码:
if (f)  
    alert(j);  
else  
    alert("variable j has been released");  

里面是
if (f)

貌似应该是
if (j)

的笔误。

已校正,thx:)
4 楼 yolio2003 2011-02-11  
大概懂了,谢谢详细的解答。

但这个代码:
if (f)  
    alert(j);  
else  
    alert("variable j has been released");  

里面是
if (f)

貌似应该是
if (j)

的笔误。
3 楼 cues 2011-02-11  
<div class="quote_title">yolio2003 写道</div>
<div class="quote_div">为什么上面的try语句块不能替换成if?
<br>想不明白,无从下手</div>
<p> </p>
<p>yolio2003,你好。</p>
<p>在你关注的这段代码中,使用if的前提有可能是你预期j的值为undefined(1),而对undefined的逻辑判断为false,从而执行else这一部分(2)</p>
<p>假设2正确,而1过于乐观。</p>
<p>我们来看看undefined值的解释</p>
<p> </p>
<div class="quote_title">ECMA-262 写道</div>
<div class="quote_div">The undefined value is a primitive value used when a variable has not been assigned a value.</div>
<p>文档指出,undefined是一个原始类型,当一个变量没给其赋值时,它的值就(被初始化)为undefined</p>
<p> </p>
<pre name="code" class="js">var num;
alert(num);</pre>
<p>去掉第一行的定义就会出“大粽子”了。。。</p>
<p>它其实有一个隐藏的前提:你得先有一个合法的变量(预先定义好,或者从函数参数中接收),如果没有的话,那它就不认你的帐,直接抛出错误了,所以得try-catch搞定它。</p>
<p>抛出的这种错误为ReferenceError:对某一个标识符求值而解析不出值的情况导致</p>
<p> </p>
<p>造成这种误解多半是因为对undefined的翻译导致的,笔者认为ECMAScript的这种设计(既然有了null为啥还要有undefined)还是有待商榷,或许改天再X贴讨论下,你或许可以在这个链接中继续寻求帮助:<a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262</a>,在百度文库里面也有这篇文档1-10章节的中文翻译,good luck。</p>
<p> </p>
2 楼 finalfanny 2011-02-11  
受益良多,谢了
1 楼 yolio2003 2011-02-11  
为什么上面的try语句块不能替换成if?
想不明白,无从下手

相关推荐

    JavaScript 匿名函数和闭包介绍

    在讨论JavaScript编程语言时,匿名函数和闭包是两个重要的概念,它们在函数式编程和模块化代码设计中扮演着核心角色。匿名函数是没有具体名称的函数,它们可以是独立的,也可以是表达式的一部分,通常用于定义临时...

    javascript匿名函数应用示例介绍

    javascript匿名函数,就是说个函数没有名字,下面先列出测试代码 代码如下: /* * 一般常见函数是这样 */ function debug(data) { console.log(data); } 但有的函数,它却偏偏写成了这样 代码如下: (function(x, y) {...

    匿名函数的一点知识

    ### 知识点:匿名函数在JavaScript中的应用与特性 #### 标题解析:“匿名函数的一点知识” 标题“匿名函数的一点知识”简洁明了地指出本文将围绕JavaScript中的匿名函数进行讲解,旨在帮助读者深入理解匿名函数的...

    javascript匿名函数实例分析

    以上就是JavaScript匿名函数实例分析的知识点。通过实例的讲解,我们了解了匿名函数的定义、用法及注意事项。掌握这些概念对编写高质量的JavaScript代码非常重要。对于希望深入学习JavaScript的开发者来说,理解和...

    Javascript的匿名函数

    ### JavaScript中的匿名函数 在JavaScript编程语言中,**匿名函数**是一种非常实用且常见的特性,它们没有具体的名称,通常作为参数传递给其他函数或者在需要函数作为值的地方使用。这种类型的函数可以增加代码的...

    学习并汇集javascript匿名函数

    我们来逐步学习并汇总JavaScript匿名函数的相关知识点。 首先,定义一个函数在JavaScript中主要有三种方式。第一种是使用函数声明关键字function,第二种是使用函数字面量(var name = function),第三种是利用...

    JavaScript匿名函数用法分析

    JavaScript匿名函数是编程中一种非常重要的技术,尤其在JavaScript中,由于其特有的作用域规则,匿名函数被广泛应用。本文将深入解析JavaScript匿名函数的定义、用法及其在实际开发中的应用。 首先,让我们理解...

    Javascript的匿名函数讲解

    匿名函数是JavaScript语言中的一个强大特性,它允许我们不给函数命名,直接声明并执行。在本文中,我们将深入了解匿名函数的定义、特点、代码模式以及应用。 首先,需要明白什么是匿名函数。在JavaScript中,定义...

    JavaScript匿名函数与委托使用示例

    ### JavaScript匿名函数与委托使用示例知识点 #### 匿名函数的概念 匿名函数是未具名的函数,它们没有具体的函数名。在JavaScript中,匿名函数的典型用途是用作回调函数、事件处理器等。由于其不需要单独声明一个...

    浅析Javascript匿名函数与自执行函数

    ### 浅析Javascript匿名函数与自执行函数 #### 一、引言 在现代Web开发中,JavaScript作为一种广泛使用的编程语言,其灵活性和强大的功能深受开发者喜爱。其中,匿名函数和自执行函数是两个非常重要的概念,对于...

    Javascript匿名函数的一种应用 代码封装

    JavaScript匿名函数的应用主要体现在代码封装和模块化上,这在许多JS库中广泛采用,比如jQuery。这种写法看似复杂,但对于保持代码的组织性和防止全局变量污染具有重要作用。下面我们将详细探讨JavaScript匿名函数...

    javascript匿名函数中的'return function()'作用

    总的来说,`return function()`在JavaScript匿名函数中的作用是多样的,它可以用于创建闭包、模块化、延迟执行等。在编写代码时,应确保代码清晰易懂,避免使用可能导致混淆的模式。如果在教学或编写教程时,应注重...

    js匿名函数的调用示例(形式多种多样).docx

    ### JavaScript匿名函数调用示例解析 #### 一、引言 在JavaScript编程语言中,函数是一等公民,这意味着函数可以作为参数传递给其他函数,也可以作为其他函数的返回值。这种灵活性使得JavaScript中的函数非常强大。...

    详谈JavaScript 匿名函数及闭包

    JavaScript中的匿名函数是一种没有函数名的函数,它们可以作为一个表达式的结果或者被赋值给一个变量,也可以在其他函数内部定义并立即执行。这使得它们在处理一次性任务或需要封装私有变量时非常有用。 匿名函数最...

    Javascript的匿名函数小结

    本文将详细阐述JavaScript匿名函数的定义、不同定义方式、与Function构造函数的区别,以及匿名函数的常见使用模式和应用场景。 **一、匿名函数的定义** 在JavaScript中,匿名函数可以通过以下三种方式创建: 1. *...

Global site tag (gtag.js) - Google Analytics