javascript--闭包彻底弄清楚

xjw1987524

浏览: 51454 次
性别:
来自: 株洲

最近访客更多访客>>

yangyi336

danielg

TaylorToby

用户5991881736

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascipt

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试</title>
    <script type="text/javascript">
        /****
         * 首先说明：本例子旨在说明闭包的概念
         * 如果只是为了获取点击哪一行li，方法很多，比如给其对象加索引等等
         * lis[i] = i;下面就可以使用啦
         *
         * 闭包的标准概念（泛一点的概念是函数处处是闭包）：
         * 将一个函数嵌套在另一个函数内部.被嵌套的函数 (内部函数)是只属于嵌套它的函数(外部函数)的私有函数.
         这样就形成了一个闭包.
         下面的英文是MDN上面摘抄的
         B forms a closure including A, i.e. B can access A's arguments and variables.
         C forms a closure including B.
         Because B's closure includes A, C's closure includes A,
         C can access both B and A's arguments and variables.
         In other words, C chains the scopes of B and A in that order.
         **/
        window.onload = function () {
            var lis = document.getElementsByTagName("LI");
            for (var i = 0, j = lis.length; i < j; i++) {
                /*
                 其实一和二的写法没有什么区别，闭包的编码模式一般来说是这样的，
                 函数A内部定义啦一个函数B，函数B返回引用给其调用者A，并且赋值给其他作用域中的变量C
                 当C执行的时候，调用的是A返回的B的引用。这个时候即时A不存在啦，B依然可以获取到A定义的局部变量。
                 下面的2个变体当中无论是给自执行函数传递参数，函数在自执行函数里面定义一个变量获取外部的变量，
                 都是自执行函数所定义的局部变量，这里自执行函数就相当于A，返回的函数就相当于B，
                 lis[i].onclick就相当于C
                 */
//方法一
//                 lis[i].onclick = function (arg) {
//                 return function () {
//                 alert(arg);
//                 };
//                 }(i);


//方法二
//                lis[i].onclick = (function () {
//                    var row = i;
//                    /*
//                    var B  = function(){
//                     alert(row);
//                     };
//                     return B;
//                     */
//                    return function () {
//                        alert(row);
//                    };
//                })();

//方法3---这里涉及到的是Function的作用，直接创建的一个闭包。
                /*
                 * Function 构造器创建一个新的Function 对象.
                 * 在JavaScript中每个函数(function)实际是一个Function对象.
                 * Function---函数构造器（A）的内部包含一个匿名的函数体（B）  lis[i].conclick(C)
                 * */
//                lis[i].onclick = Function('alert(' + i + ')');

//方法4---跟方法3差不多，方法3的构造器里面最后一个就是函数体返回给啦onclick
// 二方法四，只不过是执行构造函数里面的函数体，然后返回一个函数给onclick。
// 只要记住闭包的标准公司保管你不会错
                lis[i].onclick = (Function("\nreturn(function() {\n\talert("+i+");\n});"))();

            }


            //from mdn--来自火狐开发者中心
            // 下例演示了一个嵌套函数:就代指我们所说的标准定义的闭包模式
            //addSquares---A   square-----B  a,b,c---C
            function addSquares(a, b) {
                function square(x) {
                    return x * x;
                }
                return square(a) + square(b);
            }
            a = addSquares(2, 3); // returns 13
            b = addSquares(3, 4); // returns 25
            c = addSquares(4, 5); // returns 41
            /*由于内部函数形成了一个闭包, 你可以把这个内部函数当做返回值返回,
            该函数引用到了外部函数和内部函数的两个参数 */
            function outside(x) {
                function inside(y) {
                    return x + y;
                }
                return inside;
            }

            fn_inside = outside(3);
            result = fn_inside(5); // returns 8

            result1 = outside(3)(5); // returns 8


            /***
             * 闭包内参数冲突，靠近优先原则（作用域链）
             * @returns {Function}
             */
            function outside() {
                var x = 10;
                function inside(x) {
                    return x;
                }
                return inside;
            }
            result = outside()(20); // returns 20 instead of 10


            //再来一个闭包的例子，数字累加
            /****
             * 函数A（count）里面包含函数B（add）,函数B返回引用给函数A，并且赋值给其他作用域作的局部变量C（myCount）
             * @returns {Function}
             */
            var count = function(){
                var i=0;
                var add = function(){
                    return i++;
                }
                return add;

            };
            var myCount = count();

            myCount();//0
            myCount();//1

        }
    </script>
    <style type="text/css">
        li {
            height: 30px;
            background: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
</body>
</html>

分享到：

div+css(javascript)自定义滚动条 | JavaScript 闭包再探讨

2014-08-27 10:09
浏览 377
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript--闭包彻底弄清楚

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript--闭包彻底弄清楚

评论

发表评论

相关推荐

javascirpt对象创建

react的学习总结

抽取jquery源码实现获取元素的精确位置

jquery实现弹窗居中的简单效果

javascript 基础知识零散汇总

jquery jsonp参数编码问题不一致问题的解决方案

javascript源对象于对象引用之前不得不说的事情

sEMMET插件的最全快捷方式【来自Dash文档中心】

仿淘宝放大镜效果

js--简单放大镜实现（带移动方块）

js+css自定义滚动条(包含滚动事件处理)

div+css(javascript)自定义滚动条

JavaScript 闭包再探讨

JavaScript 闭包再探讨

javascript位置相关（一）---offset等测试

javascript位置相关（二）--getBoundingClientRect

setTimeout 使用

setTimeout 0 使用

前端知识点分享3--DOM操作

前端知识点分享2--正则，选择器

最近访客更多访客>>