第3章 第3节 闭包(JavaScript闭包和闭包面试题)

1.函数作用域

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript闭包属性详解</title>
    </head>
<body >
<div id="div1" style="height: 100px;background: red;"></div>
</body>
</html>
<script type="text/javascript">
   var n=99;
   function outer() {
       var n=0;
       alert(n);
       }
   document.getElementById("div1").onclick=outer();
 </script>

运行结果:
第3章 第3节 闭包(JavaScript闭包和闭包面试题)_第1张图片
访问的n是outer函数内部的不是全局的n,作用域链原理,先访问自己作用域的,没有才顺着链向上一层层找,直至找到,否则报错,找不到变量。

2.计数器,记录点击次数

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript闭包属性详解</title>
</head>
<body >
<div id="div1" style="height: 100px;background: red;"></div>
<div id="div2" style="height: 100px;margin: 10px;   background: green;"></div>
</body>

</html>
<script type="text/javascript">
    var n=99;
    function outer() {
        var n=0;
        return function inner() {
            return ++n;
        }
    }

    var counter=outer();

    document.getElementById("div1").onclick=function () {
        this.innerHTML=counter();
    }

</script>

第3章 第3节 闭包(JavaScript闭包和闭包面试题)_第2张图片
这样外部函数counter通过调用inner访问到了outer里定义的n;
外部函数调用内部函数的变量,或者平辈函数调用另一个函数的变量。都称为闭包。
很类似:你同学要借你爸的车用,做法却是约你去郊游。

3.两个计数器,记录点击次数

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript闭包属性详解</title>
</head>
<body >
<div id="div1" style="height: 100px;background: red;"></div>
<div id="div2" style="height: 100px;margin: 10px;   background: green;"></div>
</body>

</html>
<script type="text/javascript">
    var n=99;
    function outer() {
        var n=0;
        return function inner() {
            return ++n;
        }
    }

    var counter=outer();

    document.getElementById("div1").onclick=function () {
        this.innerHTML=counter();
    }

    var counter2=outer();
    document.getElementById("div2").onclick=function () {
        this.innerHTML=counter2();
    }
</script>

第3章 第3节 闭包(JavaScript闭包和闭包面试题)_第3张图片
counter()和counter2(),虽然都把outer()赋给他,但各做各的,counter()和counter2()各自在内存中引起建立两套不同的outer()和它内部的n和inner。
第3章 第3节 闭包(JavaScript闭包和闭包面试题)_第4张图片
为啥上传图片失败,只能先写几个字差一下
第3章 第3节 闭包(JavaScript闭包和闭包面试题)_第5张图片

你可能感兴趣的:(JavaScript)