JS学习 - 隐藏内部实现规避冲突

一. 问题描述

  我们先来看一段代码：

    function foo1() {
        function bar(a) {
            i=3;
            console.warn(a + i);
        }

        for (var i = 0; i < 10; i++) {
            bar(i);
        }
    }

  你觉得这个方法的运行结果是什么呢？
答案是：无限循环

二. 我的想法

  这个怎么会无限循环呢，我当时就是这个想法，for循环的i最大到10就停止循环了，怎么就进入了无线循环？

  这里就涉及到了一个问题：作用域。很明显导致这个无线循环就是这个i=3导致的;

三. 问题解释

  经过对JavaScript的学习了解，每个块或函数都有自己的作用域，这和我们java或者c语言是一样的，但是这里不一样的是，我们在bar方法里面使用的这个i并不是定义在bar方法内部的，很明显他是从别处调用的。

  根据我对js的学习，这个bar方法内部找不到这个i的定义，那么就会到外一层作用域去寻找，而这个就是和java和c语言不同的地方，java和c只会向上去查找，而这个会去当前作用域外部无论上下去查找，然后就找到了for循环定义的这个i。

  也就是说我们在bar方法里面使用的这个i其实就是for循环定义的i，所以无论for循环怎么进行i++,最后都会在这个bar方法中变成3，也就永远不会超过10，所以这里就进入了无线循环。

四. 隐藏内部实现

  为什么说隐藏内部实现呢，也就是说，如果我们使用的东西没有必要使用到外部的变量，那么我们就在内部自己定义变量就可，这样就可以规避这种冲突的实现。

  下面是一段正常的的代码方法：

    function foo2() {
        function bar(a) {
            var i=3;
            console.warn(a + i);
        }

        for (var i = 0; i < 10; i++) {
            bar(i);
        }
    }