IIFE(立即执行函数表达式)

我们经常会看到这样的写法:

;(fuction () {// do something
})()

这就是一个简单的IIFE(立即执行函数表达式,immediately-invoked function expression)了。

这样的写法有什么好处呢?来简单分析一下。

1. 开头的分号

我们都知道,js是可以加分号或者不加分号的,在某些情况下,不加分号会让解析器解析出错,举个例子:

var a = 0, b = 0
;
a = b   3
(b = a)
// Uncaught TypeError: 3 is not a function

解析代码的时候,a = b 3和(b = a)这两条语句之间没有明确的分界,回车和空格会自动被忽略。解析器会认为这是一句。所以,此时会认为3是一个函数,b=a是他的参数。
在知乎的这个问题下,尤大做了解释。

真正会导致上下行解析出问题的 token 有 5 个:括号,方括号,正则开头的斜杠,加号,减号。我还从没见过实际代码中用正则、加号、减号作为行首的情况,所以总结下来就是一句话:一行开头是括号或者方括号的时候加上分号就可以了,其他时候全部不需要。其实即使是这两种情况,在实际代码中也颇为少见。

ok,回到我们的例子,我们的例子就是以括号开头的,如果上一个语句没有加分号,很可能会出现这样问题,这个分号就是为了防止这样的情况发生,称之为防御性分号。

2. function(){}

函数有两种声明方式:

function foo () {}
var foo = function () {}

这两种声明方式的不同之处在于,使用var声明的函数不会自动提升到顶部。也就是说,不能在var声明函数的语句之前调用函数,否则会抛出undefined的错误。
function () {}这种形式被称为匿名函数。匿名函数没有名字,也就是没有指针,是无法在其他地方调用的。
将匿名函数赋值给foo,则可以通过foo来调用。
当然还有办法调用它,就是例子中的两对括号。第一对括号将匿名函数包装成了一个表达式,而第二对括号意思就是立即执行它。

function () {console.log('a')} // 报错 Uncaught SyntaxError: Unexpected token (
(function () {console.log('a')}) // 返回函数定义 ƒ () {console.log('a')},没有log
(function () {console.log('a')})() // a
function foo() {console.log('a')}() // 报错 Uncaught SyntaxError: Unexpected token )

第一行,因为不是合法的声明方式,希望找到函数名的地方是‘(’,所以抛出了该异常。
第二行,()中的语句被当成了表达式,解析器会认为是var声明的方式。
第三行,自执行。
第四行,function foo() {console.log('a')}是正确的函数声明方式,被正确解析。接下来的一对括号依次解析,括号里需要有表达式,但是没有,所以会抛出这样的异常。

3. 好处

IIFE的好处就是不会污染全局变量,就在当前的函数体的作用域下进行操作,保证了父作用域的干净,如果return出一些函数,那这些函数就形成了闭包。
我们常用IIFE来写module。

var counter = (function(){var i = 0;return {get: function(){return i;},set: function( val ){i = val;},increment: function() {return   i;}};
})()

Refer:

  1. 维基百科:立即调用函数表达式
  2. 知乎:JavaScript 语句后应该加分号么?

更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362901.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

中文(英译) 爱情一句话哲理

⊙ 宁可失败在你喜欢的事情上,也不要成功在你所憎恶的事情上。 To lost in something you love is better than to win in something you hate.   ⊙ 幸福,不是长生不老,不是大鱼大肉,不是权倾朝野。幸福是每一个微小的生活愿望…

CSS之文字溢出处理

1.单行文本之三剑客<p>刘诗诗&#xff0c;原名刘诗施&#xff0c;1987年3月10日出生于北京市&#xff0c;中国内地影视女演员、影视出品人。</p>p{border: 1px solid red;width: 400px;height: 40px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis…

JavaFX技巧5:可观察

即使在整个NSA监视的这段时间&#xff0c;实现JavaFX控件时也要牢记可观察性&#xff0c;这仍然是一个好主意。 与Swing相比&#xff0c;这在JavaFX中很容易实现。 旧时光 来自Swing&#xff0c;我习惯于花费大量精力和时间来使自定义控件变得可观察。 通常需要添加方法来添加…

this到底指向哪里

this指向调用它的对象 首先要明确&#xff0c;this指向调用方&#xff0c;谁调用&#xff0c;this指向谁。 直接调用 举个栗子&#xff1a; var test window ; function testThis () {var test inner;this.test test change;console.log(this.test) } testThis(); // te…

GA,RC,Alpha,Beta,Final等软件版本名词释义

对应上图的表格如下&#xff1a; 名词&#xff01;说明Alphaα是希腊字母的第一个&#xff0c;表示最早的版本&#xff0c;内部测试版&#xff0c;一般不向外部发布&#xff0c;bug会比较多&#xff0c;功能也不全&#xff0c;一般只有测试人员使用。Betaβ是希腊字母的第二个&…

HawtIO在JBoss EAP上(第二部分)

我刚刚发布了一篇关于在JBoss Wildfly 8.1上运行HawtIO的条目 。 从那篇文章中&#xff0c;您将了解HawtIO多么出色 &#xff0c;以及它必须具备的所有 出色 插件&#xff0c;才能从单个仪表板管理基于JVM的技术……好吧…… hawt ……。 但是&#xff0c;出于上一篇文章中概述…

Linux命令行中执行多个命令

[rootlocalhost /]# date;date;date 2019年 05月 03日 星期五 09:08:37 CST 2019年 05月 03日 星期五 09:08:37 CST 2019年 05月 03日 星期五 09:08:37 CST [rootlocalhost /]# date&& data&&date 2019年 05月 03日 星期五 09:09:03 CST -bash: data: 未找到命…

JS设计模式(13)状态模式

什么是状态模式&#xff1f; 定义&#xff1a;将事物内部的每个状态分别封装成类&#xff0c;内部状态改变会产生不同行为。 主要解决&#xff1a;对象的行为依赖于它的状态&#xff08;属性&#xff09;&#xff0c;并且可以根据它的状态改变而改变它的相关行为。 何时使用…

Save info in Hidden Field

Hidden fields are used to store data at the page level protected System.Web.UI.HtmlControls.HtmlInputHidden Hidden1; //to assign a value to Hidden field Hidden1.Value"Create hidden fields"; //to retrieve a value string strHidden1.Value; 转载于:ht…

课堂测试

package 测试;import java.util.Scanner;class ScoreInformation {private String stunumber;private String name;private double mathematicsscore;private double englishiscore;private double networkscore;private double databasescore;private double softwarescore;…

Mule ESB,ActiveMQ和DLQ

在本文中&#xff0c;我将展示一个简单的Mule ESB流程&#xff0c;以了解实际中使用的Active MQ 的DLQ功能 。 我假设您有一个正在运行的Apache ActiveMQ实例&#xff08;如果没有&#xff0c;则可以在此处下载一个版本&#xff09;。 在此示例中&#xff0c;我使用了Mule ESB…

JS设计模式(2)策略模式

什么是策略模式&#xff1f; 定义&#xff1a;根据不同参数可以命中不同的策略 主要解决&#xff1a;在有多种算法相似的情况下&#xff0c;使用 if...else 所带来的复杂和难以维护。 何时使用&#xff1a;有许多种情况&#xff0c;而区分它们的只是他们直接的行为。 如何解…

C#中使用多线程访问Winform问题解决方案

我们在做winform应用的时候&#xff0c;大部分情况下都会碰到使用多线程控制界面上控件信息的问题。然而我们并不能用传统方法来做这个问题&#xff0c;下面我将详细的介绍。 首先来看传统方法&#xff1a; public partial class Form1 : Form{public Form1(){InitializeCompon…

Choose and Divide UVa 10375

题目大意&#xff1a;给出p,q,r,s&#xff0c;求组合数C(p,q)/C(r,s) 题目思路&#xff1a; 化简得到&#xff1a;原式等价于(p!(r-s)!s!) / (r!(p-q)!q!) 由算数基本定理可知任意一个正整数可被唯一分解为素数幂乘积的形式&#xff0c;将分子分母分解后&#xff0c;进行约分即…

在Java中避免空检查

对于Java开发人员&#xff08;从初级到专家&#xff09;最糟糕的噩梦之一是空对象引用检查。 我很确定您已经看过几次这样的代码&#xff1a; public void addAddressToCustomer(Customer customer, Address newAddress){if ( cutomer null || newAddress null)return;if ( …

Linux sudo 详解

简单的说&#xff0c;sudo 是一种权限管理机制&#xff0c;管理员可以授权于一些普通用户去执行一些 root 执行的操作&#xff0c;而不需要知道 root 的密码。严谨些说&#xff0c;sudo 允许一个已授权用户以超级用户或者其它用户的角色运行一个命令。当然&#xff0c;能做什么…

echarts自定义图例legend文字和样式

话不多说&#xff0c;先上效果图。 要完成这个图并不难&#xff0c;主要是下面那个图例比较难&#xff0c;需要定制。 让我们从官方文档找找思路&#xff0c;官方文档关于legend.formatter是这样的&#xff1a;链接在这 难点在于&#xff1a; 1.这里的图例文本包含两个变量&am…

DataGridView常见用法和FAQ汇总

前段时间在项目中用到了WinForm&#xff0c;其中最复杂的控件当属DataGridView了&#xff0c;特别喜欢它那高度的可配置性(提供了大量的属性&#xff0c;方法和事件)、丰富的内置列类型&#xff0c;而且易于扩展&#xff0c;对性能问题也提供了良好的解决方案。不过最初看着它那…

信息的Raid存储方式,更安全的保障,更花钱的保障!

raid0 就是把多个&#xff08;最少2个&#xff09;硬盘合并成1个逻辑盘使用&#xff0c;数据读写时对各硬盘同时操作&#xff0c;不同硬盘写入不同数据&#xff0c;速度快。  raid1就是同时对2个硬盘读写&#xff08;同样的数据&#xff09;。强调数据的安全性。比较浪费。 …

Java调试器和超时

在代码中存在超时的情况下如何使用调试器。 我的调试器王国&#xff01; 因此&#xff0c;您一直忙于编写一个项目&#xff0c;一切顺利&#xff0c;直到出现错误为止。 您可以进入开发人员的工具箱&#xff0c;然后拔出调试器。 很棒–您可以设置断点&#xff0c;可以在发生异…