[转载]立即执行函数

立即执行函数:不需要调用就立马执行的函数。

目的

  • 一是不必为函数命名,避免了污染全局变量
  • 二是IIFE内部形成了一个单独的作用域,可以封装一些外部无法读取的私有变量。

剖析立即执行函数

通常我们声明一个函数有以下几种方式:

// 声明函数f1
function f1() {
    console.log("f1");
}
// 通过()来调用此函数
f1();


//一个匿名函数的函数表达式,被赋值给变量f2:
var f2 = function() {
    console.log("f2");
}
//通过()来调用此函数
f2();


//一个命名为f3的函数的函数表达式(这里的函数名可以随意命名,可以不必和变量f3重名),被赋值给变量f3:
var f3 = function f3() {
    console.log("f3");
}
//通过()来调用此函数
f3();

如果你看过一些自定义控件的话你会发现他们大多数都是沿用这种写法:

(function() {
// 这里开始写需求
})();

这是我们常说的立即执行函数(IIFE),顾名思义,也就是说这个函数是立即执行函数体的,不需要你额外去主动的去调用,一般情况下我们只对匿名函数使用IIFE。


var f = function(){
    console.log("f");
}
f();

我们发现这里f只是这个匿名函数的一个引用变量,那么既然f()能够调用这个函数,我把f替换成函数本身可以么:

function(){
   console.log("f");    
}();

但是,运行之后,

Uncaught SyntaxError: Unexpected token 
//报错

产生这个错误的原因是,Javascript引擎看到function关键字之后,认为后面跟的是函数声明语句,不应该以圆括号结尾解决方法就是让引擎知道,圆括号前面的部分不是函数定义语句,而是一个表达式,可以对此进行运算,这里区分一下函数声明和函数表达式:

1、函数声明(即我们通常使用function x(){}来声明一个函数)
function myFunction () { /* logic here */ }
2、函数表达式(类似以这种的形式)
var myFunction = function () { /* logic here */ };
var myObj = {
    myFunction: function () { /* logic here */ }
};

小学我们就学过用()括起来的表达式会先执行,就像下面这样:

1+(2+3) //这里先运行小括号里面的内容没有意见撒

其实在javascript中小括号也有相似的作用,Javascript引擎看到function关键字会认为是函数声明语句,那么如果Javascript引擎优先看到小括号会怎么样:

//用小括号把函数包裹起来
(function(){
   console.log("f");    
})();

函数成功执行了:

f //控制台输出

注意:前面的括号里面是函数表达式,不能为函数声明。

参考文章

原文

浅谈var、let、闭包以及立即执行函数(namespace)

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 参考文章:函数 1.概述 1.1函数的声明 JavaScript 有三种声明函数的方法。 (1)function ...
    chrisghb阅读 5,043评论 0 0
  • 函数是一段可以反复调用的代码块。函数还能接受输入的参数,不同的参数会返回不同的值。 概述 函数的声明 JavaSc...
    许先生__阅读 3,240评论 0 1
  • 1 概述 1.1函数的声明 JavaScript 有三种声明函数的方法。 (1)function 命令 funct...
    徵羽kid阅读 3,047评论 0 1
  • 函数是一段可以反复调用的代码块。函数还能接受输入的参数,不同的参数会返回不同的值。 概述 函数的声明 JavaSc...
    oWSQo阅读 5,174评论 0 4
  • 前几天买的一根葱还剩下多半截,于是我就想做一些食物来消耗掉它,我于是就提起了劲头,首先是把葱给剁成丁,刚开...
    憨人崔阅读 2,958评论 0 1

友情链接更多精彩内容