JS立即执行函数功能与用法分析

本文实例讲述了JS立即执行函数功能与用法。分享给大家供大家参考，具体如下：

相信大家经常会遇到下面这两种写法：

(function(){ ... })()

和

(function(){ ... }())

关于这样写是什么意思呢？有什么区别呢？

在此之前，我们需要了解几个概念：

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

函数声明： function fnName() {...} ;

使用 function 关键字声明一个函数，再执行一个函数名，叫函数声明。

函数表达式： var fnName = function() { ... } ;

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

匿名函数： function() { ... } ;

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

函数声明和函数表达式不同之处在于

1、JavaScript 引擎在解析 JavaScript 代码时会“函数声明提升”当前执行环境(作用域)上的函数声明，而函数表达式必须等到 JavaScript 引擎执行到它所在行时，才会从上而下一行一行地解析函数表达式。

2、函数表达式后面可以加括号立即调用该函数，函数声明不可以，只能以 fnName() 形式调用。

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

(function(a) {
 console.log(a); //使用()运算符，打印出123
})(123);
(function(a) {
 console.log(a); //使用()运算符，打印出1234
}(1234));
!function(a) {
 console.log(a); //使用!运算符，打印出12345
}(12345);
+function(a) {
 console.log(a); //使用+运算符，打印出123456
}(123456);
-function(a) {
 console.log(a); //使用-运算符，打印出1234567
}(1234567);
var fn = function(a) {
 console.log(a); //使用=运算符，打印出12345678
}(12345678);

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

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

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

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

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

更多关于JavaScript相关内容可查看本站专题：《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • JavaScript立即执行函数的三种不同写法

    第一种: (function () { // open IIFE // inside IIFE }()); // close IIFE 第二种: !function () { // open IIFE // inside IIFE }(); // close IIFE 第三种: void function () { // open IIFE // inside IIFE }(); // close IIFE

  • 详解JS中的立即执行函数

    1.匿名函数不能单独定义,必须进行赋值操作或者立即执行,否则会被JS引擎定义为语法错误 function(){alert(dada);} VM229:1 Uncaught SyntaxError: Unexpected token 2.在函数体后面加括号就能立即调用,这个函数形式必须是函数表达式,不能是函数声明 function(){alert(123);}(); VM265:1 Uncaught SyntaxError: Unexpected token 3.可以在函数前面加符号,或者用括号将

  • js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?

    没有区别. 你需要明白 IIFE 的原理,我简单说一下: 复制代码 代码如下: function foo() {...}     // 这是定义,Declaration:定义只是让解释器知道其存在,但是不会运行. foo();                   // 这是语句,Statement:解释器遇到语句是会运行它的. IIFE 并非必须,传统一点可以这么写: 复制代码 代码如下: function foo() {...} foo(); 那么为什么要 IIFE? 1.传统的方法啰嗦,定义

  • 深入浅析javascript立即执行函数

    javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花; 当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解.  JavaScript 函数语法 函数就是包裹在花括号中的代码块,前面使用了关键词 function: function functionname() { 这里是要执行的代码 } 当调用该函数时,会执行函数内的代码. 可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript

  • JavaScript中的立即执行函数表达式介绍

    我们习惯看到这样的匿名函数 复制代码 代码如下: (function(){     console.log("test"); })(); 之前一直叫的是自执行的匿名函数(self-executing anonymous function) 发现原来还有一种叫法是: 立即调用函数表达式 (IIFE,Immediately-Invoked Function Expression) 立即调用函数表达式 相比于自执行匿名函数,立即调用函数表达式的意思来得更明确一些. 自执行函数有下面的这一些例

  • 深入理解javascript中的立即执行函数(function(){…})()

    javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( function(){-} )()和( function (){-} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此.要理解立即执行函数,需要先理解一些函数的基本概念.

  • JavaScript中立即执行函数实例详解

    前言 js立即执行函数可以让你的函数在创建后立即执行,js立即执行函数模式是一种语法,可以让你的函数在定义后立即被执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行. ( function(){-} )()和( function (){-} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此. 下面话不多说了,来一起看看详细的介绍吧. 通常我们声

  • 详解javascript立即执行函数表达式IIFE

    详解javascript立即执行函数表达式IIFE

    一.IIFE解释 全拼Imdiately Invoked Function Expression,立即执行的函数表达式. 像如下的代码所示,就是一个匿名立即执行函数: (function(window, undefined){ // 代码... })(window); 二.括号的意义 2.1 包住function(){}的括号的意义 这个括号的目的,是为了把function(){}转化为表达式.像一些库的源码,喜欢用如下方式代替: ~function(){ // 代码... }(); 或者这种方

  • 深入解析JavaScript中的立即执行函数

    它是什么 在 JavaScript 里,每个函数,当被调用时,都会创建一个新的执行上下文.因为在函数里定义的变量和函数是唯一在内部被访问的变量,而不是在外部被访问的变量,当调用函数时,函数提供的上下文提供了一个非常简单的方法创建私有变量. function makeCounter() { var i = 0; return function(){ console.log(++i); }; } //记住:`counter`和`counter2`都有他们自己的变量 `i` var counter =

  • JS立即执行函数功能与用法分析

    本文实例讲述了JS立即执行函数功能与用法.分享给大家供大家参考,具体如下: 相信大家经常会遇到下面这两种写法: (function(){ ... })() 和 (function(){ ... }()) 关于这样写是什么意思呢?有什么区别呢? 在此之前,我们需要了解几个概念: 函数声明.函数表达式.匿名函数 函数声明: function fnName() {...} ; 使用 function 关键字声明一个函数,再执行一个函数名,叫函数声明. 函数表达式: var fnName = funct

  • JS匿名函数和匿名自执行函数概念与用法分析

    本文实例讲述了JS匿名函数和匿名自执行函数概念与用法.分享给大家供大家参考,具体如下: 1. 匿名函数的常见场景 js中的匿名函数是一种很常见的函数类型,比较常见的场景: <input type="button" value="点击" id="btn"> <script type="text/javascript"> //匿名函数的第一种情形 var btn=document.querySelector

  • Flask框架钩子函数功能与用法分析

    本文实例讲述了Flask框架钩子函数功能与用法.分享给大家供大家参考,具体如下: 在Flask中钩子函数是使用特定的装饰器的函数.为什么叫做钩子函数呢,是因为钩子函数可以在正常执行的代码中,插入一段自己想要执行的代码,那么这种函数就叫做钩子函数. before_first_request:Flask项目第一次部署后会执行的钩子函数. before_request:请求已经到达了Flask,但是还没有进入到具体的视图函数之前调用.一般这个就是在函数之前,我们可以把一些后面需要用到的数据先处理好,方

  • JS 自执行函数原理及用法

    js自执行函数,听到这个名字,首先会联想到函数.接下来,我来定义一个函数: function aaa(a,b){ return sum = a + b } 定义了一个名为aaa的函数,在里面可以计算两个数的和.如果想执行它,就必须得调用它,并且还得给它传参: var aa = aaa(1,2) 这样就实现了一个函数的定义与调用,通过console.log我们可以看到sum实现了两个数的相加. 自执行函数是什么?自执行函数就是当它被定义出来,就会自动执行的函数.不需要调用,传参也很方便.就上面的函

  • JS高阶函数原理与用法实例分析

    本文实例讲述了JS高阶函数原理与用法.分享给大家供大家参考,具体如下: 如果您正在学习JavaScript,那么您必须遇到高阶函数这个术语.这听起来复杂,其实不然. 使JavaScript适合函数式编程的原因是它接受高阶函数. 高阶函数在JavaScript中广泛使用.如果你已经用JavaScript编程了一段时间,你可能已经使用它们甚至不知道. 要完全理解这个概念,首先必须了解函数式编程是什么一等函数(first-Class Function)以及的概念. 函数式编程 在大多数简单的术语中,函

  • js HTML DOM EventListener功能与用法实例分析

    本文实例讲述了js HTML DOM EventListener功能与用法.分享给大家供大家参考,具体如下: DOM EventListener 用于向指定元素添加事件句柄. 在用户点击按钮时触发监听事件: document.getElementById('myBtn').addEventListener('click', displayDate); addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄. 可以向一个元素添加多个事件句柄. <script> var

  • JS数组Reduce方法功能与用法实例详解

    本文实例讲述了JS数组Reduce方法功能与用法.分享给大家供大家参考,具体如下: 概述 一直以来都在函数式编程的大门之外徘徊,要入门的话首先得熟悉各种高阶函数,数组的reduce方法就是其中之一. reduce方法将会对数组元素从左到右依次执行reducer函数,然后返回一个累计的值.举个形象的例子:你要组装一台电脑,买了主板.CPU.显卡.内存.硬盘.电源...这些零件是组装电脑的必要条件. 装的过程可以简单概括为拆掉每个零件的包装,再装到一起.类比一下reduce函数就可以明白了,那些零件

  • Python定义函数功能与用法实例详解

    本文实例讲述了Python定义函数功能与用法.分享给大家供大家参考,具体如下: 1.函数的意义 一般数学上的函数是,一个或者几个自变量,通过某种计算方式,得出一个因变量. y = f(x) 在Python中,为了使操作更加简洁,就引入了函数这个概念. Python中的函数,可以把一大串要反复使用的代码"定义"(封装)成一个函数,给予这个函数一个标识符作为函数名,设置自变量和因变量.然后要使用这一大串代码的时候,就调用这个我们自己创造的函数,输入自变量,然后会返回给我们因变量. 2.函数

  • JS设计模式之状态模式概念与用法分析

    JS设计模式之状态模式概念与用法分析

    本文实例讲述了JS设计模式之状态模式概念与用法.分享给大家供大家参考,具体如下: 1. 概述 当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类. 2. 解决的问题 主要解决的是当控制一个对象状态转换的条件表达式过于复杂时的情况.把状态的判断逻辑转移到表示不同的一系列类当中,可以把复杂的逻辑判断简单化. function Context( _state ) { this.state = _state; this.request = function() { this.stat

  • Python字符串内置函数功能与用法总结

    本文实例讲述了Python字符串内置函数功能与用法.分享给大家供大家参考,具体如下: 字符串内置总结 需要注意的是: 字符串的单引号和双引号都无法取消特殊字符的含义,如果想让引号内所有字符均取消特殊意义,在引号前面加r,如name＝r'l\thf' unicode字符串与r连用必需在r前面,如name＝ur'l\thf' 大小写处理 函数 作用 示例 输出 capitalize 首字母大写,其余小写 'lk with psr'.capitalize() 'Lk with psr' upper 全

随机推荐