js立即执行函数的写法

最新推荐文章于 2023-08-26 21:15:00 发布

风流倜傥唐伯虎

最新推荐文章于 2023-08-26 21:15:00 发布

阅读量447

点赞数

分类专栏： Js

本文链接：https://blog.csdn.net/weixin_41763571/article/details/107089537

版权

Js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id=”test”>
    <li>这是第一条</li>
    <li>这是第二条</li>
    <li>这是第三条</li>
</ul>
<script>
    //点击任意一个li,结果都是3,为什么?
    //因为作用域不同,在触发onclick事件之前，for循环已经执行结束
    var liList = document.getElementsByTagName('li');
    for (var i = 0; i < liList.length; i++) {
        liList[i].onclick = function () {
            console.log(i);
        }
    }

    //怎么解决?创造一个独立作用域:1.把var改成let 2.使用立即执行函数
    var liList = document.getElementsByTagName('li');
    for (var i = 0; i < liList.length; i++) {
        (function (i) {
            liList[i].onclick = function () {
                console.log(i);
            }
        })(i);
    }

    // 例子2
    /*  for (var k = 0; k < 10; k++) {
          setTimeout(function () {
              console.log(k);//10个10
          }, 0);
      }*/

</script>
<script>
    console.log('====================无参匿名立即执行函数写法(8种)======================================');
    +function () {
        console.log('+')
    }();

    -function () {
        console.log('-')
    }();

    ~function () {
        console.log('~')
    }();

    !function () {
        console.log('!')
    }();

    (function () {
        console.log('()在外面')
    })();

    (function () {
        console.log('()在里面')
    }());

    void function () {
        console.log('void')
    }();

    new function () {
        console.log('new')
    }();

    console.log('====================有参匿名立即执行函数写法(7种)======================================');
    console.log(
        +function (x, y) {
            return x + y;
        }(2, 3)//5
    );

    console.log(
        -function (x, y) {
            return x + y;
        }(2, 3)//-5
    );

    console.log(
        ~function (x, y) {
            return x + y;
        }(2, 3)//-6(-5-1)
    );

    console.log(
        !function (x, y) {
            return x + y;
        }(3, 3)//false
    );

    console.log(
        (function (x, y) {
            return x + y;
        })(2, 3)//5
    );

    console.log(
        (function (x, y) {
            return x + y;
        }(2, 3))//5
    );

    console.log(
        function (x, y) {
            return x + y;
        }(2, 3)//5
    );

    console.log('====================无参非匿名立即执行函数写法(8种)======================================');
    +function f() {
        console.log('+f')
    }();

    -function f() {
        console.log('-f')
    }();

    ~function f() {
        console.log('~f')
    }();

    !function f() {
        console.log('!f')
    }();

    (function f() {
        console.log('f外')
    })();

    (function f() {
        console.log('f内')
    }());

    void function f() {
        console.log('void')
    }();

    new function f() {
        console.log('new')
    }();

    console.log('====================有参非匿名立即执行函数写法(7种)======================================');
    console.log(
        +function f(x, y) {
            return x + y;
        }(9, 3)//12
    );

    console.log(
        -function f(x, y) {
            return x + y;
        }(9, 3)//-12
    );

    console.log(
        ~function f(x, y) {
            return x + y;
        }(9, 3)//-13(-12-1)
    );

    console.log(
        !function f(x, y) {
            return x + y;
        }(9, 3)//false
    );

    console.log(
        (function f(x, y) {
            return x + y;
        })(9, 3)//12
    );

    console.log(
        (function f(x, y) {
            return x + y;
        }(9, 3))//12
    );

    console.log(
        function f(x, y) {
            return x + y;
        }(9, 3)//12
    );

    //将函数赋予一个变量则创建函数表达式,赋予一个事件则成为事件处理   
    var sum = function (x, y) {
        return x + y;
    }(2, 3)
    console.log('sum:' + sum)

    var sum1 = function f(x, y) {
        return x + y;
    }(2, 3)
    console.log('sum1:' + sum1)

</script>
</body>
</html>

立即函数之间必须加分号,否则报错