资讯专栏INFORMATION COLUMN

js中(function(){…})()立即执行函数写法理解

YJNldm / 3002人阅读

摘要:和是两种立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此。

javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解。

( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此。要理解立即执行函数,需要先理解一些函数的基本概念。

  

函数声明、函数表达式、匿名函数

函数声明:function fnName () {…};使用function关键字声明一个函数,再指定一个函数名,叫函数声明。

函数表达式 var fnName = function () {…};使用function关键字声明一个函数,但未给函数命名,最后将匿名函数赋予一个变量,叫函数表达式,这是最常见的函数表达式语法形式。

匿名函数:function () {}; 使用function关键字声明一个函数,但未给函数命名,所以叫匿名函数,匿名函数属于函数表达式,匿名函数有很多作用,赋予一个变量则创建函数,赋予一个事件则成为事件处理程序或创建闭包等等。

函数声明和函数表达式不同之处在于:
1. Javascript引擎在解析javascript代码时会‘函数声明提升’(Function declaration
Hoisting)当前执行环境(作用域)上的函数声明,而函数表达式必须等到Javascirtp引擎执行到它所在行时,才会从上而下一行一行地解析函数表达式。
2. 函数表达式后面可以加括号立即调用该函数,函数声明不可以,只能以fnName()形式调用 。

以下是两者差别的两个例子:

在理解了一些函数基本概念后,回头看看( function(){…} )()和( function (){…} () )这两种立即执行函数的写法,最初我以为是一个括号包裹匿名函数,并后面加个括号立即调用函数,当时不知道为什么要加括号,后来明白,要在函数体后面加括号就能立即调用,则这个函数必须是函数表达式,不能是函数声明。

可以看到输出结果,在function前面加!、+、 -甚至是逗号等到都可以起到函数定义后立即执行的效果,而()、!、+、-、=等运算符,都将函数声明转换成函数表达式,消除了javascript引擎识别函数表达式和函数声明的歧义,告诉javascript引擎这是一个函数表达式,不是函数声明,可以在后面加括号,并立即执行函数的代码。加括号是最安全的做法,因为!、+、-等运算符还会和函数的返回值进行运算,有时造成不必要的麻烦。

  

不过这样的写法有什么用呢?

javascript中没用私有作用域的概念,如果在多人开发的项目上,你在全局或局部作用域中声明了一些变量,可能会被其他人不小心用同名的变量给覆盖掉,根据javascript函数作用域链的特性,可以使用这种技术可以模仿一个私有作用域,用匿名函数作为一个“容器”,“容器”内部可以访问外部的变量,而外部环境不能访问“容器”内部的变量,所以( function(){…} )()内部定义的变量不会和外部的变量发生冲突,俗称“匿名包裹器”或“命名空间”。JQuery使用的就是这种方法,将JQuery代码包裹在( function (window,undefined){…jquery代码…} (window)中,在全局作用域中调用JQuery代码时,可以达到保护JQuery内部变量的作用。

原文地址:http://dengo.org/archives/1004
变量提升的超赞讲解:https://idiotwu.me/playing-with-javascript-function/
云课堂jquery源码讲解推荐:http://study.163.com/course/courseMain.htm?courseId=465001

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/85850.html

相关文章

  • javascript异步编程详解

    摘要:在服务器端,异步模式甚至是唯一的模式,因为执行环境是单线程的,如果允许同步执行所有请求,服务器性能会急剧下降,很快就会失去响应。第三是,捕捉不到他的错误异步编程方法回调函数这是异步编程最基本的方法。 前言 你可能知道,Javascript语言的执行环境是单线程(single thread)。所谓单线程,就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面...

    huangjinnan 评论0 收藏0
  • 深入理解javascript立即执行函数(function(){…})()

    摘要:要理解立即执行函数,需要先理解一些函数的基本概念。函数表达式使用关键字声明一个函数,但未给函数命名,最后将匿名函数赋予一个变量,叫函数表达式,这是最常见的函数表达式语法形式。 javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解。 ( functio...

    melody_lql 评论0 收藏0
  • 理解async/await

    摘要:所谓异步,就是调用在发出后,这个调用就直接返回了,调用者不会立即得到结果,但是不会阻塞,可以继续执行后续操作,而被调用者执行得到结果后通过状态事件来通知调用者使用回调函数来处理这个结果。另外状态的回调函数是可省略的。 首先明确一个问题,为什么 Node.js 需要异步编程? JavaScript 是单线程的,在发出一个调用时,在没有得到结果之前,该调用就不返回,意思就是调用者主动等待...

    luodongseu 评论0 收藏0
  • JavaScript立即执行函数

    摘要:函数名可以省略省略函数名的话该函数就成为了匿名函数被传入函数的参数的名称一个函数最多可以有个参数这些语句组成了函数的函数体。使用那我们通常为什么使用函数立即表达式呢,以及我如何使用呢通常情况下,只对匿名函数使用这种立即执行的函数表达式。 注:此文只在理解立即执行函数,不在所谓原创,文中大量引用阮一峰的JavaScript标准参考教程、MDN的JavaScript 参考文档和深入理解Ja...

    W4n9Hu1 评论0 收藏0
  • JS 闭包

    摘要:你可能经常看到这句话创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量。这种现象称之为闭包。虽然中没有类这样的机制,但是通过使用闭包,我们可以模拟出这样的机制。 JS 闭包 JS编程的时候你一定遇到过这个问题:局部变量实现累加,看下面例子: function aotuadd(){ var a=1; a++; console...

    sihai 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<