zoukankan      html  css  js  c++  java
  • js 立即执行函数

    1、我们首先要搞明白:函数表达式和函数声明的区别。

    函数表达式:既可以为匿名函数也可以有函数名,但是调用的时候都是通过函数左边的变量func来调用

    var func = function(){

      alert('xxx');

    };

    var b = new func();

    函数声明:必须有函数名

    function func(){

      alert('xxx');

    }

    func();

    所以立即执行调用的函数表达式有一下几种

    !function () { /* code */ } ();
    ~function () { /* code */ } ();
    -function () { /* code */ } ();
    +function () { /* code */ } ();
    他们中的每一个都可以看成两部分:!function () { /* code */ }和(),其中
    !function () { /* code */ }是一个函数表达式,而()的意思就是立即执行。
    ######并不意味着function e(){}()就可以立即执行,并且这个写法会报错!!!!,而function e(){}(1)不会报错,但是也不是立即执行函数表达式

    2、理解自执行函数和立即执行函数表达式。
    自执行函数:function func(){
           func();
          }
    而(function(){}())叫做立即执行函数表达式
    // 这是一个自执行的匿名函数,因为没有标示名称
    // 必须使用arguments.callee属性来执行自己
    var foo = function () { arguments.callee(); };

    // 这可能也是一个自执行的匿名函数,仅仅是foo标示名称引用它自身
    // 如果你将foo改变成其它的,你将得到一个used-to-self-execute匿名函数
    var foo = function () { foo(); };

    // 有些人叫这个是自执行的匿名函数(即便它不是),因为它没有调用自身,它只是立即执行而已。
    (function () { /* code */ } ());

    // 为函数表达式添加一个标示名称,可以方便Debug
    // 但一定命名了,这个函数就不再是匿名的了
    (function foo() { /* code */ } ());

    // 立即调用的函数表达式(IIFE)也可以自执行,不过可能不常用罢了
    (function () { arguments.callee(); } ());
    (function foo() { foo(); } ());
    
    

    3、用闭包保存状态

    
    

    和普通function执行的时候传参数一样,自执行的函数表达式也可以这么传参,因为闭包直接可以引用传入的这些参数,利用这些被lock住的传入参数,自执行函数表达式可以有效地保存状态。

    
    
    // 这个代码是错误的,因为变量i从来就没背locked住
    // 相反,当循环执行以后,我们在点击的时候i才获得数值
    // 因为这个时候i操真正获得值
    // 所以说无论点击那个连接,最终显示的都是I am link #10(如果有10个a元素的话)

    var elems = document.getElementsByTagName('a');

    for (var i = 0; i < elems.length; i++) {

    elems[i].addEventListener('click', function (e) {
    e.preventDefault();
    alert('I am link #' + i);
    }, 'false');

    }

    // 这个是可以用的,因为他在自执行函数表达式闭包内部
    // i的值作为locked的索引存在,在循环执行结束以后,尽管最后i的值变成了a元素总数(例如10)
    // 但闭包内部的lockedInIndex值是没有改变,因为他已经执行完毕了
    // 所以当点击连接的时候,结果是正确的

    var elems = document.getElementsByTagName('a');

    for (var i = 0; i < elems.length; i++) {

    (function (lockedInIndex) {

    elems[i].addEventListener('click', function (e) {
    e.preventDefault();
    alert('I am link #' + lockedInIndex);
    }, 'false');

    })(i);

    }

  • 相关阅读:
    leetcode 二进制求和 python
    leetcode 66.加一 python3
    django自定义simple_tag和filter
    deepin Gtk-WARNING **: 无法在模块路径中找到主题引擎:“adwaita”
    MySQL ERROR 1698 (28000): Access denied for user 'root'@'localhost'
    deepin 安装scrapy安装出错:fatal error: Python.h 的解决办法
    Bootstrap的$(...).modal is not a function错误
    linux 安装mysql5.6
    linux之主机名bogon问题详解
    linux开启代理转发功能
  • 原文地址:https://www.cnblogs.com/wang985850293/p/5231722.html
Copyright © 2011-2022 走看看