Silent Reverie

Creating memories with the awesome stuff I've learnt.

闭包陷阱:我中招了!

| Comments

一直以来我都以为自己对js的闭包功能掌握的还算可以,最近在工作中却实实在在地被闭包整了一回,特记录于斯,以为警戒!

以下代码是从工作中提炼出来的,在这4个case中两次调用howdy()函数时log打印值分别是什么?

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
// closure caveat

// case 1
;(function (window, $, undefined) {
  var $target;

  function howdy() {
    var x = 'foo';

    if (!$target) {
      $target = $({})
        .on('whatever', function () {
          console.log(x);
        })
        .on('soga', function () {
          x = 'bar';
        });

      $target.triggerHandler('soga');
    }

    $target.triggerHandler('whatever');
  }

  howdy();
  howdy();
})(this, jQuery);

// case 2
;(function (window, $, undefined) {
  var $target, x;

  function howdy() {
    x = 'foo';

    if (!$target) {
      $target = $({})
        .on('whatever', function () {
          console.log(x);
        })
        .on('soga', function () {
          x = 'bar';
        });

      $target.triggerHandler('soga');
    }

    $target.triggerHandler('whatever');
  }

  howdy();
  howdy();
})(this, jQuery);

// case 3
;(function (window, $, undefined) {
  var $target;

  function howdy() {
    var x = 'foo';

    if (!$target) {
      $target = $({}).on('soga', function () {
        x = 'bar';
      });
    }

    $target
      .off('whatever')
      .on('whatever', function () {
        console.log(x);
      });

    $target.triggerHandler('soga');
    $target.triggerHandler('whatever');
  }

  howdy();
  howdy();
})(this, jQuery);

// case 4
;(function (window, $, undefined) {
  var $target, x;

  function howdy() {
    x = 'foo';

    if (!$target) {
      $target = $({}).on('soga', function () {
        x = 'bar';
      });
    }

    $target
      .off('whatever')
      .on('whatever', function () {
        console.log(x);
      });

    $target.triggerHandler('soga');
    $target.triggerHandler('whatever');
  }

  howdy();
  howdy();
})(this, jQuery);

总结:prefer object properties to local variables when recording state!

Comments