经典闭包

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        //面试经典问题:

        function onMyLoad(){
            var arr = document.getElementsByTagName("p");
            for(var i = 0; i < arr.length;i++){
                arr[i].onclick = function(){
                    alert(i);
                }
            }
        }
        // 1
        // for(var i = 0;i<arr.length;i++){

        //     //声明一个匿名函数,若传进来的是基本类型则为值传递,故不会对实参产生影响,
        //     //该函数对象有一个本地私有变量arg(形参) ,该函数的 function scope 的 closure 对象属性有两个引用,一个是 arr,一个是 i
        //     //尽管引用 i 的值随外部改变 ,但本地私有变量(形参) arg 不会受影响,其值在一开始被调用的时候就决定了.
        //     (function (arg) {
        //         arr[i].onclick = function () {  //onclick函数实例的 function scope 的 closure 对象属性有一个引用 arg,
        //             alert(arg);                 //只要 外部空间的 arg 不变,这里的引用值当然不会改变
        //         }
        //     })(i);                              //立刻执行该匿名函数,传递下标 i(实参)
        // }

        //2
        // for(var i = 0;i<arr.length;i++){
        //     //为当前数组项即当前 p 对象添加一个名为 i 的属性,值为循环体的 i 变量的值,
        //     //此时当前 p 对象的 i 属性并不是对循环体的 i 变量的引用,而是一个独立p 对象的属性,属性值在声明的时候就确定了
        //     //(基本类型的值都是存在栈中的,当有一个基本类型变量声明其等于另一个基本变量时,此时并不是两个基本类型变量都指向一个值,而是各自有各自的值,但值是相等的)
        //     arr[i].i = i;
        //     arr[i].onclick = function () {
        //         alert(this.i);
        //     }
        // }

        //3
        // for(var i = 0; i<arr.length;i++){
        //     arr[i].onclick = (function(arg){
        //         return function () {
        //             alert(arg);
        //         }
        //     })(i);
        // }

        //4
        // for(var i = 0; i<arr.length;i++){
        //     (function(){
        //         var temp = i;
        //         arr[i].onclick = function () {
        //             alert(temp);
        //         }
        //     })();
        // }

        //5
        // for(var i = 0;i<arr.length;i++){
        //     arr[i].onclick = (function () {
        //         var temp = i;
        //         return function () {
        //             alert(temp);
        //         }
        //     })();
        // }

        //6
        // for(var i = 0;i<arr.length;i++){
        //     (arr[i].onclick = function () {
        //         alert(arguments.callee.i);      //arguments 参数对象  arguments.callee 参数对象所属函数
        //     }).i = i;
        // }
    </script>
</head>
<body onload="onMyLoad()">
    <p>产品一</p>
    <p>产品二</p>
    <p>产品三</p>
    <p>产品四</p>
    <p>产品五</p>
</body>
</html>

  

posted @ 2017-09-12 17:27  老板、番茄炒蛋  阅读(101)  评论(0编辑  收藏  举报