发表于 | 阅读次数:
字数统计: 205 | 阅读时长 ≈ 1

闭包来做动画的效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
  <title>Using a closure in a timer interval callback</title>
  <meta charset="utf-8">
  <script src="../assert.js"></script>
  <link rel="stylesheet" type="text/css" href="../assert.css">
  <style>
  	#box1{
  		width: 100px;
  		height: 100px;
  		position: relative;
  		margin:5;
  		color: white;
  		font-weight: bolder;
      background-color:blue;
      margin-bottom: 100px;
  	}
  </style>
</head>
<body>
	<div id="box1">First Box</div> 
  <script>
    function animateIt(elementId) {
      var elem = document.getElementById(elementId);
      var tick = 0;
      var timer = setInterval(function(){
        if (tick < 100) {
          elem.style.left = elem.style.top = tick + "px";
          tick++;
        }
        else {
          clearInterval(timer);
          assert(tick === 100,
                 "Tick accessed via a closure.");
          assert(elem,
                 "Element also accessed via a closure.");
          assert(timer,
                 "Timer reference also obtained via a closure." );
        }
      }, 10);
    }
    animateIt("box1");
  </script>
</body>
</html>

发表于 | 阅读次数:
字数统计: 159 | 阅读时长 ≈ 1

封装私有变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>

<head>
  <title>Using closures to approximate private variable</title>
  <meta charset="utf-8">
  <script src="../assert.js"></script>
  <link rel="stylesheet" type="text/css" href="../assert.css">
</head>

<body>
	<script>
    function Ninja() {
      var feints = 0;
      this.getFeints = function(){
        return feints;
      };
      this.feint = function(){
        feints++;
      };
     }

     var ninja1 = new Ninja();
     ninja1.feint();

     assert(ninja1.feints === undefined,
            "And the private data is inaccessible to us.");
     assert(ninja1.getFeints() === 1,
           "We're able to access the internal feint count.");


     var ninja2 = new Ninja();
     assert(ninja2.getFeints() === 0,
            "The second ninja object gets it’s own feints variable.");
	</script>
</body>
</html>

发表于 | 阅读次数:
字数统计: 124 | 阅读时长 ≈ 1 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>

<head>
  <title>A not so simple closure</title>
  <meta charset="utf-8">
  <script src="../assert.js"></script>
  <link rel="stylesheet" type="text/css" href="../assert.css">
</head>

<body>
	<script>
	  var outerValue = "samurai";
     var later;

    function outerFunction() {
      var innerValue = "ninja";

      function innerFunction() {
        assert(outerValue === "samurai", "I can see the samurai.");
        assert(innerValue === "ninja", "I can see the ninja.");
      }

      later = innerFunction;
    }

    outerFunction();
    later();
	</script>
</body>
</html>

发表于 | 阅读次数:
字数统计: 326 | 阅读时长 ≈ 1

闭包

js必会到闭包的问题

通过闭包可以访问创建闭包时所处环境中的全部变量。闭包为函数提供所处环境的作用域的函数和变量。创建“安全气泡”。通过这种方式，即使创建函数时所处的作用域已经消失，但是函数仍然能够获得执行时所需要的全部内容。

  • 通过构造函数内的变量以及构造方法来模拟对象的私有属性
  • 处理回调函数 简化代码

引擎是通过执行上下文（调用栈）跟踪函数的执行。每次调用函数时，都会创建新的函数执行上下文，并推入调用栈顶端。当函数执行完成后，对应的执行上下文将从调用栈中推出。

引擎通过词法环境跟踪标识符（俗称作用域）

定义全局级别、函数级别甚至块级别的变量

  • var 定义距离最近的函数级别变量或者全局变量
  • let const 定义距离最近级别的变量 包括块级别变量
  • 闭包是js作用域规则的副作用。当函数创建时所在的作用域消失之后，仍然能够调用函数