深入理解javascript中的立即执行函数(function()…)()(代码片段)

allenhua allenhua     2022-12-09     450

关键词:

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

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

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

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

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

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

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

代码如下:

fnName();
function fnName()
    ...

//正常,因为‘提升‘了函数声明,函数调用可在函数声明之前

fnName();
var fnName=function()
    ...

//报错,变量fnName还未保存对函数的引用,函数调用必须在函数表达式之后
代码如下:

var fnName=function()
    alert(‘Hello World‘);
();
//函数表达式后面加括号,当javascript引擎解析到此处时能立即调用函数
function fnName()
    alert(‘Hello World‘);
();
//不会报错,但是javascript引擎只解析函数声明,忽略后面的括号,函数声明不会被调用
function()
    console.log(‘Hello World‘);   
();
//语法错误,虽然匿名函数属于函数表达式,但是未进行赋值操作,
//所以javascript引擎将开头的function关键字当做函数声明,报错:要求需要一个函数名

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

代码如下:

(function(a)
    console.log(a);   //firebug输出123,使用()运算符
)(123);

(function(a)
    console.log(a);   //firebug输出1234,使用()运算符
(1234));

!function(a)
    console.log(a);   //firebug输出12345,使用!运算符
(12345);

+function(a)
    console.log(a);   //firebug输出123456,使用+运算符
(123456);

-function(a)
    console.log(a);   //firebug输出1234567,使用-运算符
(1234567);

var fn=function(a)
    console.log(a);   //firebug输出12345678,使用=运算符
(12345678)

可以看到输出结果,在function前面加!、+、 -甚至是逗号等到都可以起到函数定义后立即执行的效果,而()、!、+、-、=等运算符,都将函数声明转换成函数表达式,消除了javascript引擎识别函数表达式和函数声明的歧义,告诉javascript引擎这是一个函数表达式,不是函数声明,可以在后面加括号,并立即执行函数的代码。

加括号是最安全的做法,因为!、+、-等运算符还会和函数的返回值进行运算,有时造成不必要的麻烦。

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

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

JQuery使用的就是这种方法,将JQuery代码包裹在( function (window,undefined)…jquery代码… (window)中,在全局作用域中调用JQuery代码时,可以达到保护JQuery内部变量的作用。

   转自:https://segmentfault.com/a/1190000007000832

javascript中的立即执行函数(function(){…})()

javascript中的立即执行函数(function(){…})() 深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是用(function(){…})()包住业务代码,使用jquery时比较常见。(function(){…})()和(function(){…}(... 查看详情

javascript函数声明,函数表达式,匿名函数的区别,深入理解立即执行函数(function(){…})()

functionfnName(){xxxx};//函数声明:使用function关键字声明一个函数,在指定一个函数名。//例如:(正常,因为提升了函数声明,函数调用可以在函数声明之前)fnName();functionfnName(){alert(‘HelloWorld‘);}varfnName=function(){xxxx};//函数表达式:... 查看详情

深入理解javascript

立即调用的函数表达式前言大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行。在详细了解这个之前,我们来谈了解一下“自执行”这个叫法,本文对这个功能的叫法也不一定完全对... 查看详情

javascript深入理解

立即调用的函数表达式前言大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行。在详细了解这个之前,我们来谈了解一下“自执行”这个叫法,本文对这个功能的叫法也不一定完... 查看详情

js立即执行函数

javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解。(function(){…})()和(function(){…}())是两种javascript立即执行... 查看详情

javascript自动执行函数(立即调用函数)

开头:各种原因总结一下javascript中的自动执行函数(立即调用函数)的一些方法,正文如下  在Javascript中,任何function在执行的时候都会创建一个执行上下文,因为function声明变量和function有可能只在该function内部,这个... 查看详情

更好地理解 JavaScript 中的回调函数

】更好地理解JavaScript中的回调函数【英文标题】:GettingabetterunderstandingofcallbackfunctionsinJavaScript【发布时间】:2010-10-0317:48:00【问题描述】:我了解将一个函数作为回调传递给另一个函数并让它执行,但我不了解执行此操作的最... 查看详情

深入理解javascript编程中的同步和异步

JavaScript的优势之一是其如何处理异步代码。异步代码会被放入一个事件队列,等到所有其他代码执行后才进行,而不会阻塞线程。然而,对于初学者来说,书写异步代码可能会比较困难。而在这篇文章里,我将会消除你可能会... 查看详情

深入理解jquery中的callback

...,这是一个构造函数。在讲解这个之前,我们需要先讲讲javascript中的回调函数。什么是回调?  所谓回调函数,我的理解:回头再调用,即:不是立刻运行,而是在特定时刻触发调用。js中的同步和异步在javascript中,回调函... 查看详情

深入理解javascript中的函数操作

...函数,这里就不做过多介绍了。我们需要知道的是,对于JavaScript而言,匿名函数是一个很重要且具有逻辑性的特性。通常,匿名函数的使用情况是:创建一个供以后使用的函数。简单的举个例子如下:window.onload=function(){alert(‘h... 查看详情

深入理解javascript中执行环境(作用域)与作用域链

深入理解javascript中执行环境(作用域)与作用域链  相信很多初学者对与javascript中的执行环境与作用域链不能很好的理解,这里,我会按照自己的理解同大家一起分享。  一般情况下,我们把执行环境分为全局执行环境和... 查看详情

javascript中的立即执行函数(代码片段)

javascript中的立即执行函数$(function()  alert();())Highcharts的中的series:[  name:‘今日在线人数‘,  color:‘pink‘,  data:(function()    )())]#执行效果一样$(document).ready(function()console.log("ready!"););和$(function( 查看详情

理解javascript的立即调用函数表达式(iife)

首先这是js的一种函数调用写法,叫立即执行函数表达式(IIFE,即immediately-invokedfunctionexpression)。顾名思义IIFE可以让你的函数立即得到执行(废话)。一般来说,IIFE有以下几种用途:  1.创建只使用一次的函数,并立即执行它。 ... 查看详情

深入理解javascript中执行环境(作用域)与作用域链

相信很多初学者对与javascript中的执行环境与作用域链不能很好的理解,这里,我会按照自己的理解同大家一起分享。  一般情况下,我们把执行环境分为全局执行环境和局部执行环境,其中局部执行环境我们又可以称之为函... 查看详情

知识深入理解js闭包

本文转载:一、变量的作用域要理解闭包,首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种:全局变量和局部变量。Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。Js代码  varn=999;  fu... 查看详情

深入理解javascript的作用域--函数声明为什么会前置

 标签: javascript函数对象这篇博文解决了以下迷惑函数声明为什么前置函数声明前置和变量前置优先级问题为什么js文件开头就可以使用Math,String等库,而不需要导入头文件1.变量对象VO变量对象(VariableObject,缩写为VO)是一... 查看详情

深入理解javascript执行上下文

...用一次,都会产生一个新的执行上下文环境。2、代码段javascript在执行一个代码段之前,都会进行“准备工作”来生成执行上下文。这个“代码段”其实分三 查看详情

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

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