(Javascript) 猴子也明白 之 闭包超级入门 4 函数返回函数

Javascript里，可以将“函数返回函数”。

 

<script>
//sample 4-1

function outer(){
    var inner = function (){  // 将匿名函数设入inner
        alert("hello");
    }

    return inner;       // 返回inner函数
}

var f =  outer();       // inner做为outer函数的执行结果，设入变量f
f();                          // "hello"被表示。这与inner()被执行是一样的效果。
</script>

outer函数被执行后：

1. 在outer内生成匿名函数
2. 将匿名函数代入变量inner
3. 将inner当成返回值返回
4. 返回值代入变量f

这时，outer函数就是
「能返回函数的函数」。
这好比，「从妈妈肚子里生出了个宝宝，起名为"F"，F“哇~”的哭了一声」（奇怪的比喻？）

其实，上面的代码也能这么写：

定义普通函数并返回

 

<script>
//sample 4-2

function outer(){
    function inner(){  // 定义名为inner的函数
        alert("hello");
    }

    return inner;        // 返回inner函数
}

var f =  outer();       // inner做为outer函数的执行结果，设入变量f
f();                          // "hello"被表示。这与inner()被执行是一样的效果。
</script>

但是，定义了function inner()这样的函数，却又以变量的形式返回inner，这种写法很不好。

inner即是函数，也是变量。这体现了Javascript函数的两面性。

 

将匿名函数直接返回

 

<script>
//sample 4-3

function outer(){
    return function (){  // 匿名函数定义后直接返回
        alert("hello");
    }
}

var f =  outer();
f();
</script>

上面的例子中没有出现inner，通过匿名函数代码也简化了不少。

 

接下来，把hello定义为一个变量吧。这么做后与sample4-3相比，并没有本质的变化。

 

<script>
//sample 4-4

function outer(){
    return function (){

        var x = "hello";
        alert(x);
    }
}

var f =  outer();
f();                 // 表示"hello"
</script>

 

接着，把var x = “hello”的位置往外移一下：

 

<script>
//sample 4-5

function outer(){

       var x = "hello";

    return function (){

        alert(x);
    }
}

var f =  outer();
f();                 // 表示"hello"
</script>

没问题，“hello”也能表示出来了！

 

其实，这就是传说中的闭包了。

不知不觉写出了第一个闭包，可喜可贺啊！！＼（＾o＾）／

 

到这里，算是理解了闭包的90%左右的程度。

还差最后一步！