IIFE 疑惑解析

Warren 发布于2019-08-21 18:44 / 583人阅读

摘要：问题解答定义了一个名为的立即执行函数表达式我们来看这一段代码，这里面包含着一个名为的具名函数表达式。

IIFE 是什么呢？

IIFE 是 Immediately-Invoked Function Expression 的英文缩写，也就是立即执行函数表达式。

下面是一个 IIFE 代码实例：

(function(){
        console.log( "Hello!" );
    })();
    
> Hello!

遇到的问题

// 定义了一个名为 IIFE 的函数
function IIFE(){
        console.log( "Hello!" );
    }   
    
IIFE();

> Hello!

// 定义了一个名为 IIFE 的立即执行函数表达式
(function IIFE(){
        console.log( "Hello!" );
    })();  
    
IIFE();

> Hello!
> Uncaught ReferenceError: IIFE is not defined

我们定义了一个名为 IIFE 的函数，然后执行，发现成功输出 Hello！ 。
但是我们定义了一个名为 IIFE 的立即执行函数表达式，然后使用 IIFE() 去执行它的时候却发现报错 IIFE is not defined 。
这是为什么呢？

要解答这个疑惑，我们需要了解函数表达式和函数声明的区别。

函数表达式和函数声明

在 JavaScript 中有三种定义函数的方式。

// 方式一：使用 Function 构造函数来定义一个函数
var foo = new Function() 
// 方式二：使用 function 关键字来定义一个函数
function foo(){}
// 方式三：使用函数表达式来定义一个函数
var foo = function(){}

其中方式二和方式三非常相似。并且方式三种函数表达式也可以有自己名字，如下所示：

var foo = function foo(){}

那么函数表达式和函数声明有什么区别呢？

当一条语句以 function 开头的时候，它就是函数声明。

函数表达式可以添加()来执行，而函数声明不能。

函数表达式分匿名函数表达式和具名函数表达式，但是函数表达式中的函数名称只是函数体中的一个本地变量（在方式三中可以通过 foo.name 来访问到该本地变量）。

函数表达式可以被用作一个 IIFE，它一旦定义就运行。

问题解答

// 定义了一个名为 IIFE 的立即执行函数表达式
(function IIFE(){
        console.log( "Hello!" );
    })();  
    
IIFE();

> Hello!
> Uncaught ReferenceError: IIFE is not defined

我们来看这一段代码，这里面包含着一个名为 IIFE 的具名函数表达式。这个函数名称只是函数体中的一个本地变量，所以我们在外部通过函数名访问不到该函数。

附

另外我们可以来看看 IIFE 的两种定义方式，如下所示：

// 方式一：
(function(){
        console.log( "Hello!" );
    })();
// 方式二：    
(function (){
        console.log( "Hello!" );
    }());

由于 function 开头的语句会被识别为函数声明，函数声明不能被执行，所以在这里添加括号来标识这里是一个函数表达式，括号的结束位置可以在函数表达式定义结束，也可以在函数表达式执行结束。与下面的代码的效果是相同的。

var fn = function (){
        console.log( "Hello!" );
    };
( fn )();
( fn() );

> Hello!
> Hello!

idc机房托管专线服务 IIFE 解析和绑定域名解析 dns解析和域名解析 dns解析与域名解析

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

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

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

摘要：另外，如果你想跳过这里，你可以直接跳到立即调用函数表达式进行阅读，但是我建议你读完整篇文章。当圆括号包裹函数时，它会默认将函数作为表达式去解析，而不是函数声明。原文：Immediately-Invoked Function Expression (IIFE) by Ben Alman原译：立即执行函数 by Murphywuwu改增内容： by blanu 也许你没有注意到，我是一个...

Yu_Huang 2019-08-20 12:28 评论0 收藏0
JS学习系列 07 - 标签声明（Label Statement）

摘要：上面这段代码，在中的执行结果是什么呢大家思考分钟好，分钟已过，大家有结果了吗千万不要在浏览器的控制台中去写这段代码，虽然结果和你开始想的结果一样，但是，它是错误的。这是在控制台中执行的结果这是在中的执行结果可以看到两个结果是不一样的。 1. 引言假设有这么一道题： for (var i = 0; i < 10; i++) { console.log(i); for (...

ormsf 2019-08-22 15:57 评论0 收藏0
探索webpack运行时

摘要：前言本篇文章建议亲自动手尝试最近研究了运行时源码在这篇文章中记录了我的探索这个复杂的玩具方式并且以图形的形式将运行时的流程给记录的下来我们讨论的是什么这篇文章主要记录的是在将文件打包后是如何在浏览器中加载以及解析的流程手段实在是太复杂的了为前言本篇文章建议亲自动手尝试. 最近研究了 webpack 运行时源码, 在这篇文章中记录了我的探索 webpack 这个复杂的玩具方式, 并且...

wemall 2019-08-05 17:02 评论0 收藏0
Javascript知识点：IIFE - 立即调用函数

摘要：所以那些匿名函数附近使用括号或一些一元运算符的惯用法，就是来引导解析器，指明运算符附近是一个表达式。 Immediately-invoked Function Expression（IIFE，立即调用函数），简单的理解就是定义完成函数之后立即执行。因此有时候也会被称为自执行的匿名函数（self-executing anonymous function）。 IIFE的叫法最早见于Ben...

goji 2019-08-19 14:51 评论0 收藏0
JS打包工具rollup——完全入门指南

摘要：使用进行模块化打包在之前打包的过程中，命令行中输出了一行，这表示并没有收到任何模块化的格式指令，因此会用默认的模块标准来对文件进行打包。前言最近在做一个提供给浏览器和node同时使用的js的url模板工具类，在用什么打包工具上纠结了一段时间，正好有一天在知乎上看到了关于rollup的介绍，在自己试了试之后，就决定用rollup.js来打包自己的工具类了。这篇文章主要是为了让对ro...

dreamtecher 2019-08-21 11:53 评论0 收藏0