博客

js立即执行函数经典场景

  • Post author:
  • Post category:其他


有这样一个应用场景：

页面上总共有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>


版权声明：本文为qq_45465526原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。