js立即执行函数经典场景

我家空空

于 2021-11-13 10:41:46 发布

阅读量233

点赞数

分类专栏： js杂食文章标签： javascript 前端 ecmascript

本文链接：https://blog.csdn.net/qq_45465526/article/details/121301198

版权

js杂食专栏收录该内容

23 篇文章 1 订阅

订阅专栏

有这样一个应用场景：
页面上总共有8个按钮，按1-8的顺序给它们编号。要求点击按钮的时候，页面弹出对应的编号。
代码：

<body>
    <button>点击打印该项编号（1）</button>
    <button>点击打印该项编号（2）</button>
    <button>点击打印该项编号（3）</button>
    <button>点击打印该项编号（4）</button>
    <button>点击打印该项编号（5）</button>
    <button>点击打印该项编号（6）</button>
    <button>点击打印该项编号（7）</button>
    <button>点击打印该项编号（8）</button>
    <script>
        function test() {
            var btns = document.getElementsByTagName('button');
            for (var i = 0; i < btns.length; i++) {
                (function (index) {
                    btns[index].onclick = function () {
                        alert(index + 1);
                    }
                    //打印原型：查看作用域链
                    console.log(btns[index].onclick.prototype);
                }(i));
            }
        }
        test();
    </script>
</body>