zoukankan      html  css  js  c++  java

  • JavaScript的IIFE（即时执行方法）

    前面的话

    　　严格来讲，IIFE并不是闭包，因为它并不满足函数成为闭包的三个条件。但一般地，人们认为IIFE就是闭包，毕竟闭包有多个定义。本文将详细介绍IIFE的实现和用途

    实现

    　　函数跟随一对圆括号()表示函数调用

    复制代码
    //函数声明语句写法
function test(){};
test();

//函数表达式写法
var test = function(){};
test();
    复制代码

    　　但有时需要在定义函数之后，立即调用该函数。这种函数就叫做立即执行函数，全称为立即调用的函数表达式IIFE(Imdiately Invoked Function Expression)

    　　[注意]javascript引擎规定，如果function关键字出现在行首，一律解释成函数声明语句

    　　【1】函数声明语句需要一个函数名，由于没有函数名，所以报错

    //SyntaxError: Unexpected token (
function(){}();

    　　【2】函数声明语句后面加上一对圆括号，只是函数声明语句与分组操作符的组合而已。由于分组操作符不能为空，所以报错

    复制代码
    //SyntaxError: Unexpected token )
function foo(){}();

//等价于
function foo(){};
();//SyntaxError: Unexpected token )
    复制代码

    　　【3】函数声明语句加上一对有值的圆括号，也仅仅是函数声明语句与不报错的分组操作符的组合而已

    function foo(){}(1);

//等价于
function foo(){};
(1);

    　　所以，解决方法就是不要让function出现在行首，让引擎将其理解成一个表达式

    最常用的两种办法

    (function(){ /* code */ }()); 
(function(){ /* code */ })();

    其他写法

    复制代码
    var i = function(){ return 10; }();
true && function(){ /* code */ }();
0, function(){ /* code */ }();

!function(){ /* code */ }();
~function(){ /* code */ }();
-function(){ /* code */ }();
+function(){ /* code */ }();

new function(){ /* code */ };
new function(){ /* code */ }();
    复制代码

    作用域

    　　对于IIFE来说，通过作用域链来查找变量与普通函数有一些不同的地方

    【with】

    　　with语句中的IIFE会先在with语句中查找，然后再向上查找。在下列代码中，标准浏览器下f()函数和IIFE都返回'bar'，但IE10-浏览器中的f()函数返回'abc'

    复制代码
    var foo = "abc";
with({
    foo:"bar"
}){
    function f(){
        console.log(foo);
    };
    (function(){
        console.log(foo);
    })();
    f();
}
    复制代码

    【try-catch】

    　　在下列代码中，标准浏览器下f()函数和IIFE都返回'error'，但IE10-浏览器中的f()函数返回'10'

    复制代码
    try{
    var e = 10;
    throw new Error();
}catch(e){
    function f(){
        console.log(e);
    }
    (function (){
        console.log(e);
    })();
    f();
}
    复制代码

    【具名函数表达式】

    　　在下列代码中，标准浏览器下a()函数返回1，而IIFE返回a函数代码；但IE8-浏览器中，二者都返回1

    复制代码
    function a(){
    a = 1;
    console.log(a);
};
a();
(function a(){
    a = 1;
    console.log(a);
})();
    复制代码

    用途

    　　IIFE一般用于构造私有变量，避免全局空间污染

    　　接下来用一个需求实现来更直观地说明IIFE的用途。假设有一个需求，每次调用函数，都返回加1的一个数字(数字初始值为0)

    【1】全局变量

    　　一般情况下，我们会使用全局变量来保存该数字状态

    复制代码
    var a = 0;
function add(){
    return ++a;
}
console.log(add());//1
console.log(add());//2
    复制代码

    【2】自定义属性

    　　但上面的方法中，变量a实际上只和add函数相关，却声明为全局变量，不太合适。

    　　将变量a更改为函数的自定义属性更为恰当

    复制代码
    function add(){
    return ++add.count;
}
add.count = 0;
console.log(add());//1
console.log(add());//2
    复制代码

    【3】IIFE

    　　其实这样做，还是有问题。有些代码可能会无意中将add.count重置

    　　使用IIFE把计数器变量保存为私有变量更安全，同时也可以减少对全局空间的污染

    复制代码
    var add = (function(){
    var counter = 0;
    return function(){
        return ++counter; 
    }
})();
console.log(add())//1
console.log(add())//2

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

    写在前面

    这是一篇译文，原文：Immediately-Invoked Function Expression (IIFE)

    原文是一篇很经典的讲解IIFE的文章，很适合收藏。本文虽然是译文，但是直译的很少，而且添加了不少自己的理解。

    ps：下文中提到的“立即执行函数”其实就是“立即执行函数表达式”

    我们要说的到底是什么？

    在javascript中，每一个函数在被调用的时候都会创建一个执行上下文，在该函数内部定义的变量和函数只能在该函数内部被使用，而正是因为这个上下文，使得我们在调用函数的时候能创建一些私有变量。

    很多情况下我们并不需要像以上代码一样初始化很多实例，甚至有时候并不需要返回值。

    • 问题的核心

    现在我们定义了一个函数（function foo(){}或者var foo = function(){}），函数名后加上一对小括号即可完成对该函数的调用，比如下面的代码：

    接着我们来看下面的代码：

    报错了，这是为何？这是因为在javascript代码解释时，当遇到function关键字时，会默认把它当做是一个函数声明，而不是函数表达式，如果没有把它显视地表达成函数表达式，就报错了，因为函数声明需要一个函数名，而上面的代码中函数没有函数名。（以上代码，也正是在执行到第一个左括号(时报错，因为(前理论上是应该有个函数名的。）

    • 一波未平一波又起

    有意思的是，如果我们给它函数名，然后加上()立即调用，同样也会报错，而这次报错原因却不相同：

    为什么会这样？在一个表达式后面加上括号，表示该表达式立即执行；而如果是在一个语句后面加上括号，该括号完全和之前的语句不搭嘎，而只是一个分组操作符，用来控制运算中的优先级（小括号里的先运算）。所以以上代码等价于：

    相当于先声明了一个叫foo的函数，之后进行()内的表达式运算，但是()（分组操作符）内的表达式不能为空，所以报错。（以上代码，也就是执行到右括号时，发现表达式为空，所以报错）。

    如果想要了解更多，可以参考ECMA-262-3 in detail. Chapter 5. Functions.

    立即执行函数（IIFE）

    看到这里，相信你一定迫不及待地想知道究竟如何做了吧，其实很简单，只需要用括号全部括起来即可，比如下面这样：

    为什么这样就能立即执行并且不报错呢？因为在javascript里，括号内部不能包含语句，当解析器对代码进行解释的时候，先碰到了()，然后碰到function关键字就会自动将()里面的代码识别为函数表达式而不是函数声明。

    而立即执行函数并非只有上面的一种写法，写法真是五花八门：

    • 无论何时，给立即执行函数加上括号是个好习惯

    通过以上的介绍，我们大概了解通过()可以使得一个函数表达式立即执行。

    有的时候，我们实际上不需要使用()使之变成一个函数表达式，啥意思？比如下面这行代码，其实不加上()也不会保错：

    但是我们依然推荐加上()：

    为什么？因为我们在阅读代码的时候，如果function内部代码量庞大，我们不得不滚动到最后去查看function(){}后是否带有()来确定i值是个function还是function内部的返回值。所以为了代码的可读性，请尽量加上()无论是否已经是表达式。

    • 立即执行函数与闭包的暧昧关系

    立即执行函数能配合闭包保存状态。

    像普通的函数传参一样，立即执行函数也能传参数。如果在函数内部再定义一个函数，而里面的那个函数能引用外部的变量和参数（闭包），利用这一点，我们能使用立即执行函数锁住变量保存状态。

    其实上面代码的lockedIndex也可以换成i，因为两个i是在不同的作用域里，所以不会互相干扰，但是写成不同的名字更好解释。以上便是立即执行函数+闭包的作用。

    • 我为什么更愿意称它是“立即执行函数”而不是“自执行函数”

    IIFE的称谓在现在似乎已经得到了广泛推广（不知道是不是原文作者的功劳？），而原文写于10年，似乎当时流行的称呼是自执行函数（Self-executing anonymous function），接下去作者开始为了说明立即执行函数的称呼好于自执行函数的称呼开始据理力争，有点咬文嚼字，不过也蛮有意思的，我们来看看作者说了些什么。

    我的理解是作者认为自执行函数是函数内部调用自己（递归调用），而立即执行函数就如字面意思，该函数立即执行即可。其实现在也不用去管它了，就叫IIFE好了。

    • 最后的旁白：模块模式

    立即执行函数在模块化中也大有用处。用立即执行函数处理模块化可以减少全局变量造成的空间污染，构造更多的私有变量。
  • 相关阅读:
    iOS打包Framework真机和模拟器兼容合并版本
    iOS同一项目多个Target的快速实现方法
    Android横屏下Fragment界面重叠问题
    项目实战工具类（一）：PhoneUtil（手机信息相关）
    浅谈FloatingActionButton(悬浮按钮)
    LeanCloud数据存储相关问题
    Android项目实战（二十三）：仿QQ设置App全局字体大小
    Android项目实战（二十二）：启动另一个APP or 重启本APP
    Android项目实战（二十）：浅谈ListView悬浮头部展现效果
    浅谈DrawerLayout(抽屉效果)
  • 原文地址：https://www.cnblogs.com/pangguoming/p/5354112.html
Copyright © 2011-2022 走看看