Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 237|回复: 0

[默认分类] 深入理解JavaScript系列(4):立即调用的函数表达式

[复制链接]
  • TA的每日心情
    开心
    2021-12-13 21:45
  • 签到天数: 15 天

    [LV.4]偶尔看看III

    发表于 2018-7-13 12:19:19 | 显示全部楼层 |阅读模式
    前言
    大家学javaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行。

    在详细了解这个之前,我们来谈了解一下“自执行”这个叫法,本文对这个功能的叫法也不一定完全对,主要是看个人如何理解,因为有的人说立即调用,有的人说自动执行,所以你完全可以按照你自己的理解来取一个名字,不过我听很多人都叫它为“自执行”,但作者后面说了很多,来说服大家称呼为“立即调用的函数表达式”。
    本文英文原文地址:http://benalman.com/news/2010/11/immediately-invoked-function-expression/
    什么是自执行?
    在JavaScript里,任何function在执行的时候都会创建一个执行上下文,因为为function声明的变量和function有可能只在该function内部,这个上下文,在调用function的时候,提供了一种简单的方式来创建自由变量或私有子function。

    1. // 由于该function里返回了另外一个function,其中这个function可以访问自由变量i
    2. // 所有说,这个内部的function实际上是有权限可以调用内部的对象。
    3. function makeCounter() {
    4.     // 只能在makeCounter内部访问i
    5.     var i = 0;
    6.     return function () {
    7.         console.log(++i);
    8.     };
    9. }
    10. // 注意,counter和counter2是不同的实例,分别有自己范围内的i。
    11. var counter = makeCounter();
    12. counter(); // logs: 1
    13. counter(); // logs: 2
    14. var counter2 = makeCounter();
    15. counter2(); // logs: 1
    16. counter2(); // logs: 2
    17. alert(i); // 引用错误:i没有defind(因为i是存在于makeCounter内部)。
    复制代码

    很多情况下,我们不需要makeCounter多个实例,甚至某些case下,我们也不需要显示的返回值,OK,往下看。

    问题的核心
    当你声明类似function foo(){}或var foo = function(){}函数的时候,通过在后面加个括弧就可以实现自执行,例如foo(),看代码:

    1. // 因为想下面第一个声明的function可以在后面加一个括弧()就可以自己执行了,比如foo(),
    2. // 因为foo仅仅是function() { /* code */ }这个表达式的一个引用
    3. var foo = function(){ /* code */ }
    4. // ...是不是意味着后面加个括弧都可以自动执行?
    5. function(){ /* code */ }(); // SyntaxError: Unexpected token (
    6. //
    复制代码

    上述代码,如果甚至运行,第2个代码会出错,因为在解析器解析全局的function或者function内部function关键字的时候,默认是认为function声明,而不是function表达式,如果你不显示告诉编译器,它默认会声明成一个缺少名字的function,并且抛出一个语法错误信息,因为function声明需要一个名字。
    旁白:函数(function),括弧(paren),语法错误(SyntaxError)
    有趣的是,即便你为上面那个错误的代码加上一个名字,他也会提示语法错误,只不过和上面的原因不一样。在一个表达式后面加上括号(),该表达式会立即执行,但是在一个语句后面加上括号(),是完全不一样的意思,他的只是分组操作符。

    1. // 下面这个function在语法上是没问题的,但是依然只是一个语句
    2. // 加上括号()以后依然会报错,因为分组操作符需要包含表达式
    3. function foo(){ /* code */ }(); // SyntaxError: Unexpected token )
    4. // 但是如果你在括弧()里传入一个表达式,将不会有异常抛出
    5. // 但是foo函数依然不会执行
    6. function foo(){ /* code */ }( 1 );
    7. // 因为它完全等价于下面这个代码,一个function声明后面,又声明了一个毫无关系的表达式:
    8. function foo(){ /* code */ }
    9. ( 1 );
    复制代码

    你可以访问ECMA-262-3 in detail. Chapter 5. Functions 获取进一步的信息。
    自执行函数表达式
    要解决上述问题,非常简单,我们只需要用大括弧将代码的代码全部括住就行了,因为JavaScript里括弧()里面不能包含语句,所以在这一点上,解析器在解析function关键字的时候,会将相应的代码解析成function表达式,而不是function声明。

    1. // 下面2个括弧()都会立即执行
    2. (function () { /* code */ } ()); // 推荐使用这个
    3. (function () { /* code */ })(); // 但是这个也是可以用的
    4. // 由于括弧()和JS的&&,异或,逗号等操作符是在函数表达式和函数声明上消除歧义的
    5. // 所以一旦解析器知道其中一个已经是表达式了,其它的也都默认为表达式了
    6. // 不过,请注意下一章节的内容解释
    7. var i = function () { return 10; } ();
    8. true && function () { /* code */ } ();
    9. 0, function () { /* code */ } ();
    10. // 如果你不在意返回值,或者不怕难以阅读
    11. // 你甚至可以在function前面加一元操作符号
    12. !function () { /* code */ } ();
    13. ~function () { /* code */ } ();
    14. -function () { /* code */ } ();
    15. +function () { /* code */ } ();
    16. // 还有一个情况,使用new关键字,也可以用,但我不确定它的效率
    17. // http://twitter.com/kuvos/status/18209252090847232
    18. new function () { /* code */ }
    19. new function () { /* code */ } () // 如果需要传递参数,只需要加上括弧()
    复制代码

    上面所说的括弧是消除歧义的,其实压根就没必要,因为括弧本来内部本来期望的就是函数表达式,但是我们依然用它,主要是为了方便开发人员阅读,当你让这些已经自动执行的表达式赋值给一个变量的时候,我们看到开头有括弧(,很快就能明白,而不需要将代码拉到最后看看到底有没有加括弧。
    用闭包保存状态
    和普通function执行的时候传参数一样,自执行的函数表达式也可以这么传参,因为闭包直接可以引用传入的这些参数,利用这些被lock住的传入参数,自执行函数表达式可以有效地保存状态。

    1. // 这个代码是错误的,因为变量i从来就没背locked住
    2. // 相反,当循环执行以后,我们在点击的时候i才获得数值
    3. // 因为这个时候i操真正获得值
    4. // 所以说无论点击那个连接,最终显示的都是I am link #10(如果有10个a元素的话)
    5. var elems = document.getElementsByTagName("a");
    6. for (var i = 0; i < elems.length; i++) {
    7.     elems[i].addEventListener("click", function (e) {
    8.         e.preventDefault();
    9.         alert("I am link #" + i);
    10.     }, "false");
    11. }
    12. // 这个是可以用的,因为他在自执行函数表达式闭包内部
    13. // i的值作为locked的索引存在,在循环执行结束以后,尽管最后i的值变成了a元素总数(例如10)
    14. // 但闭包内部的lockedInIndex值是没有改变,因为他已经执行完毕了
    15. // 所以当点击连接的时候,结果是正确的
    16. var elems = document.getElementsByTagName("a");
    17. for (var i = 0; i < elems.length; i++) {
    18.     (function (lockedInIndex) {
    19.         elems[i].addEventListener("click", function (e) {
    20.             e.preventDefault();
    21.             alert("I am link #" + lockedInIndex);
    22.         }, "false");
    23.     })(i);
    24. }
    25. // 你也可以像下面这样应用,在处理函数那里使用自执行函数表达式
    26. // 而不是在addEventListener外部
    27. // 但是相对来说,上面的代码更具可读性
    28. var elems = document.getElementsByTagName("a");
    29. for (var i = 0; i < elems.length; i++) {
    30.     elems[i].addEventListener("click", (function (lockedInIndex) {
    31.         return function (e) {
    32.             e.preventDefault();
    33.             alert("I am link #" + lockedInIndex);
    34.         };
    35.     })(i), "false");
    36. }
    复制代码

    其实,上面2个例子里的lockedInIndex变量,也可以换成i,因为和外面的i不在一个作用于,所以不会出现问题,这也是匿名函数+闭包的威力。
    自执行匿名函数和立即执行的函数表达式区别
    在这篇帖子里,我们一直叫自执行函数,确切的说是自执行匿名函数(Self-executing anonymous function),但英文原文作者一直倡议使用立即调用的函数表达式(Immediately-Invoked Function Expression)这一名称,作者又举了一堆例子来解释,好吧,我们来看看:

    1. // 这是一个自执行的函数,函数内部执行自身,递归
    2. function foo() { foo(); }
    3. // 这是一个自执行的匿名函数,因为没有标示名称
    4. // 必须使用arguments.callee属性来执行自己
    5. var foo = function () { arguments.callee(); };
    6. // 这可能也是一个自执行的匿名函数,仅仅是foo标示名称引用它自身
    7. // 如果你将foo改变成其它的,你将得到一个used-to-self-execute匿名函数
    8. var foo = function () { foo(); };
    9. // 有些人叫这个是自执行的匿名函数(即便它不是),因为它没有调用自身,它只是立即执行而已。
    10. (function () { /* code */ } ());
    11. // 为函数表达式添加一个标示名称,可以方便Debug
    12. // 但一定命名了,这个函数就不再是匿名的了
    13. (function foo() { /* code */ } ());
    14. // 立即调用的函数表达式(IIFE)也可以自执行,不过可能不常用罢了
    15. (function () { arguments.callee(); } ());
    16. (function foo() { foo(); } ());
    17. // 另外,下面的代码在黑莓5里执行会出错,因为在一个命名的函数表达式里,他的名称是undefined
    18. // 呵呵,奇怪
    19. (function foo() { foo(); } ());
    复制代码

    希望这里的一些例子,可以让大家明白,什么叫自执行,什么叫立即调用。
    注:arguments.callee在ECMAScript 5 strict mode里被废弃了,所以在这个模式下,其实是不能用的。


    最后的旁白:Module模式
    在讲到这个立即调用的函数表达式的时候,我又想起来了Module模式,如果你还不熟悉这个模式,我们先来看看代码:

    1. // 创建一个立即调用的匿名函数表达式
    2. // return一个变量,其中这个变量里包含你要暴露的东西
    3. // 返回的这个变量将赋值给counter,而不是外面声明的function自身
    4. var counter = (function () {
    5.     var i = 0;
    6.     return {
    7.         get: function () {
    8.             return i;
    9.         },
    10.         set: function (val) {
    11.             i = val;
    12.         },
    13.         increment: function () {
    14.             return ++i;
    15.         }
    16.     };
    17. } ());
    18. // counter是一个带有多个属性的对象,上面的代码对于属性的体现其实是方法
    19. counter.get(); // 0
    20. counter.set(3);
    21. counter.increment(); // 4
    22. counter.increment(); // 5
    23. counter.i; // undefined 因为i不是返回对象的属性
    24. i; // 引用错误: i 没有定义(因为i只存在于闭包)
    复制代码

    关于更多Module模式的介绍,请访问我的上一篇帖子:深入理解JavaScript系列(2):全面解析Module模式 。
    更多阅读
    希望上面的一些例子,能让你对立即调用的函数表达(也就是我们所说的自执行函数)有所了解,如果你想了解更多关于function和Module模式的信息,请继续访问下面列出的网站:

    ECMA-262-3 in detail. Chapter 5. Functions. - Dmitry A. Soshnikov
    Functions and function scope - Mozilla Developer Network
    Named function expressions - Juriy “kangax” Zaytsev
    全面解析Module模式- Ben Cherry(大叔翻译整理)
    Closures explained with JavaScript - Nick Morgan

    同步与推荐
    本文已同步至目录索引:深入理解JavaScript系列
    深入理解JavaScript系列文章,包括了原创,翻译,转载等各类型的文章,如果对你有用,请推荐支持一把,给大叔写作的动力。
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-3-28 19:44 , Processed in 0.355171 second(s), 37 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表