`
笨鸟先飞
  • 浏览: 28954 次
  • 来自: ...
社区版块
存档分类
最新评论

理解jQuery的两对小括号()()

阅读更多

如果大家看jquery的sourcecode就知道一开始就有两对小括号,

是什么意思呢! 真的是比较困惑, 这么神奇的代码,什么意思啊?

我们先看看jQuery一开始是怎么写的:

(function(){

// jquery 代码

})();

它是由什么组成呢? 有一个匿名函数(函数没有名字),

此匿名函数被一对小括号包裹着,这对小括号右边还有一对小括号.

我们再看常用一般函数定义方式.

//函数定义

function func1(){

alert("hello,world");

}

//调用函数

func1();

那么这两句话目的很明显就是要弹出一个"helloworld"的对话框,

那么我们可不可以合并成一句话, 也同样能达到这样的效果

当然是可以的.

(function (){

alert("hello,world"

); })();

函数名称func1都去掉了, 在函数外面加了一对小括号.

这和jquery是一样的啊! 可以看出最后面一对小括号语义就是"调用此匿名函数",

那么包裹在匿名函数外面的一对小括号可以去掉吗?

变成如下的样子

function (){

alert("hello,world");

}();

 

要回答这个问题,先看看javascript对表达式的评估.

dd= aa+ cc*bb javascript会先评估cc*bb,

然后才会评估aa+,这是因为地球人都知道的事情,

乘运算(*)符优先级高于加(+) 同样如果去掉这对小括号的话,

我们可以假想一下其表达式的评估过程,

javascript会先评估最后面小括号,而不是先评估匿名函数了,

那么最后面的小括号是什么语义呢! 仅当作一般运算符去处理,

并不是"此处存在函数调用"的这样一个语义,

因为在这之前并不知道有匿名函数存在(还没有评估呢),

所以在匿名函数外面加上一对小括号的话,javascript对其评估的顺序就变了,

所以答案很明显,不可以去掉匿名函数外面的一对小括号,否则其评估就会失败,

导致语法错误. 看到这里是不是豁然开朗了,呵呵! 如果讲的有错误,还请大侠们给指出来,在此谢谢了.

分享到:
评论
12 楼 孙成利0323 2014-05-03  
刚刚参加工作学习jquery,搜了搜这问题的解释貌似都是楼主的这篇文章,感谢!
11 楼 zbm2001 2008-07-17  
楼主分析的javascript引擎对这段代码的解析过程(执行顺序),简单明了,
2#楼把编译原理搬出来也改变不了这个引擎的实现过程啊。


另外,“自执行函数模式”算是Javascript动态语言的一个小小亮点。
而void则是命令式语言里中规中矩的范例了。
10 楼 笨笨狗 2008-07-17  
csf178 写道

void 比较好看 而且语义也正确一些


不过很多时候我们利用“自执行函数模式”(《Pro Javascript Design Patterns》一书给起的名字),是为了得到函数的返回值,void就不行鸟……
9 楼 csf178 2008-07-16  
void 比较好看 而且语义也正确一些
也可以尝试new 这样this也是一个私有的对象了 可以更彻底地避免污染
8 楼 笨笨狗 2008-07-16  
void function(){alert('my god')}()

楼主说的第一个括号,是强制运算(优先级)运算……
7 楼 afcn0 2008-07-16  
楼上你真好有意思,有这么写代码的马
(function (){

alert("hello,world"

); });var a=0;();
第一个()里面是函数对象,后面()是执行,你里面加句var ......什么的是怎么意思
还有第一个()可以用+ -代替
+function (){

alert("hello,world"

); }();
6 楼 cctvsod 2008-07-16  
楼主,我在中间加上任意的代码,就不调用那个匿名方法了,为什么?
(function (){

alert("hello,world"

); });var a=0;();
5 楼 ayeah 2008-05-10  
感觉楼主说的有道理,jquery这样做确实有很好的兼容性,避免了变量冲突的麻烦。。。
4 楼 liusong1111 2008-04-22  
这种写法最有价值之处是不会污染外部命名空间,jQuery库只向全局命名空间引入了jQuery这个变量和可选的$变量(当不设定noConflict时),使得它与其它js并存没有任何代码级的问题.
3 楼 tommychang 2008-04-21  
其实括号前应该可以理解为闭包吧,前面那部分是不会执行的,仅仅是一个函数体,而加个括号,或者用.apply(this)等就会执行之.....
2 楼 笨鸟先飞 2008-04-21  
引用
orz~~~乱讲~~~
去看看编译原理吧~~~
()的编译规则,完全是有编译规则定的,与什么评不评估没啥关系



  首先感谢楼上的朋友给出意见, 如果可能,还请不吝笔墨,谈谈您对这两对小括号的理解,如果还有可能,再谈谈javascript引擎针对这段代码的编译过程.在这里虚心学习了. 
1 楼 ajaxgo 2008-04-21  
orz~~~乱讲~~~
去看看编译原理吧~~~
()的编译规则,完全是有编译规则定的,与什么评不评估没啥关系

相关推荐

    用jQuery做的一个计算器代码很实用

    【标题】:jQuery计算器实现详解 在这个项目中,我们探讨的是如何使用JavaScript的...它不仅加深了对jQuery的理解,同时也涵盖了前端开发中的基本概念,如DOM操作、事件处理和样式设计,对于提升Web开发技能大有裨益。

    jquery Dreamweave代码提示插件

    2. 参数提示:在输入函数括号内的参数时,插件会显示每个参数的说明和示例,帮助你理解如何正确传递数据。 3. 快速信息:将光标放在jQuery函数或选择器上,按F1可以查看该函数的详细说明和用法示例。 4. 错误检查:...

    jQuery压缩版和未压缩版

    本资源提供了jQuery的压缩版和未压缩版,分别名为`jquery.min.js`和`jQuery.1.7.2.js`,旨在为开发者提供便捷的使用和学习体验,帮助深化对JavaScript核心概念的理解,如对象、函数、原型和原型链。 1. **jQuery库...

    jquery+json小例子

    **jQuery + JSON 小例子详解** 在Web开发中,jQuery 和 JSON 都是不可或缺的工具。jQuery 是一个轻量级的JavaScript库,极大地简化了DOM操作、事件处理、动画效果和Ajax交互。JSON(JavaScript Object Notation)则...

    jquery开发入门整理(所需要了解的)

    ### 理解jQuery解析JSON数据对象原理 jQuery提供了`$.parseJSON()`方法来解析JSON格式的字符串。该方法可以将JSON字符串转换为JavaScript对象,便于后续的数据处理。在实际开发中,通常会结合`$.ajax()`方法来发送...

    jquery代码提示插件

    首先,让我们理解一下插件的核心价值。在DW中安装并启用这款插件后,开发者在编写jQuery代码时,可以享受到诸如自动完成、语法高亮、错误检测等便利。这极大地提高了编写效率,减少了因手动输入错误而造成的调试时间...

    jQuery中使用Ajax获取JSON格式数据示例代码.pdf

    ### jQuery中使用Ajax获取JSON格式数据的知识点详解 #### 1. JSON数据格式基础 JSON(JavaScript Object ...同时,还通过实际的代码示例,让我们对如何在前端与后端之间通过 JSON 进行异步数据交换有了更深入的理解。

    jquery-mini-counter-

    【jQuery迷你计数器】是一个基于JavaScript库jQuery的小型计算工具,主要功能是提供基本的...通过研究这个项目,开发者可以提升对jQuery、DOM操作和简单计算逻辑的理解,同时也可以学习到如何构建一个基本的Web应用。

    4个简单实用的jQuery超链接动画特效

    通过jQuery选择器,我们可以监听鼠标悬停事件,然后动态地改变超链接前后括号的样式,比如大小、颜色或透明度,以达到醒目的提示效果。这种简单但引人注目的动画可以提高用户对当前页面状态的认知。 上下翻转效果是...

    jQuery点击弹出对话框确认窗口代码.zip

    总的来说,这个压缩包提供了利用jQuery创建交互式对话框的方法,对于初学者理解jQuery事件处理和动态UI创建具有很好的学习价值,同时也为有经验的开发者提供了一个快速实现对话框功能的模板。通过深入研究这些文件,...

    jQuery实现的带操作记录计算器效果源码.zip

    该压缩包文件“jQuery实现的带操作记录计算器效果源码.zip”包含了一个使用jQuery库创建的计算器应用,具有操作记录功能。这个计算器不仅能够执行基本的数学运算,还能记录用户的计算过程,方便用户回顾和检查之前的...

    jQuery源码分析-02正则表达式

    理解这些正则表达式有助于深入理解jQuery的工作原理。例如,jQuery可能会使用正则表达式来解析CSS选择器或处理DOM元素的属性。 总之,正则表达式是jQuery以及其他JavaScript库中不可或缺的一部分,掌握它们对于编写...

    jQuery复习2021.6(1).docx

    jQuery 是一个广泛使用的JavaScript库,它极大地简化了对DOM(文档对象模型)的操作,提供了丰富的API来处理事件、动画和Ajax交互。以下是基于提供的文件内容的详细知识点: 1. **append()方法和appendTo()方法**:...

    Jquery核心函数

    ### Jquery核心函数详解 #### 一、简介 jQuery 是一款快速、小巧的 JavaScript 库,使得用户能够更轻松地...本文通过几个具体的示例详细介绍了该函数的使用方法及应用场景,希望对读者理解和掌握 jQuery 提供帮助。

    jQuery中setTimeout的几种使用方法小结

    总的来说,理解jQuery中`setTimeout`的正确使用方式是很重要的,特别是当你需要在不同的作用域或需要传递参数时。通过合理地选择使用哪种方式,可以确保代码的稳定性和可维护性。在实际开发中,通常推荐使用方法3或4...

    javascript-jquery学习笔记.docx

    对于变量声明,JavaScript 是区分大小写的,因此 `var name="Hello"` 和 `var Name="Hello"` 是两个不同的变量。 在数组方面,JavaScript 支持多种创建方式,如 `new Array()`、压缩数组和字面量数组。例如: ```...

    jsGrid jQuery表格插件

    1. **轻量级**:jsGrid的体积小巧,加载速度快,对页面性能影响小,非常适合于资源有限的项目。 2. **自定义性强**:jsGrid提供了高度自定义的选项,包括字段类型、数据源、排序、过滤、编辑和操作等功能,开发者...

    web前端-jQuery教案.docx

    了解这些基础概念后,开发者就能更好地理解jQuery如何在HTML结构上操作,实现更丰富的交互效果和动态功能。jQuery简化了DOM操作,使得添加、删除、修改DOM元素变得更加简单,同时也提供了流畅的动画效果和高效的Ajax...

    jquery & json

    1. **对象**: 使用花括号`{}`包裹,键值对之间用逗号分隔,键由双引号包围,如`{"name": "John", "age": 30}`。 2. **数组**: 使用方括号`[]`包裹,元素之间用逗号分隔,可以包含对象或基本类型,如`[{"name": "John...

Global site tag (gtag.js) - Google Analytics