你不知道的 JS 读书笔记（二）-- 闭包/模块

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

function foo () {
  var a = 2;

  function bar () {
    console.log(a);
  }

  return bar;
}

var baz = foo()

baz() // 2

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

for (var i = 0; i < 5; i++) {
  (function (j) {
    setTimeout(function timer () {
      console.log(j);
    }, j*1000)
  })(i)
}

// 等同于

for (let i = 0; i < 5; i++) {
  setTimeout(function timer () {
    console.log(i);
  }, i*1000)
}

 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

// 模块管理器
var MyModules = (function Manager() {
  var modules = {};

  function define(name, deps, impl) {
    // 遍历依赖模块列表
    for (var i=0; i<deps.length; i++) {
      deps[i] = modules[deps[i]];
    }
    // 将依赖模块作为参数 传入模块方法
    modules[name] = impl.apply( impl, deps );
  }

  function get(name) {
    return modules[name];
  }

  return {
    define: define,
    get: get
  };
})();

// 定义模块 "bar"
MyModules.define( "bar", [], function() {
  function hello(who) {
    return "Let me introduce: " + who;
  }

  return {
    hello: hello
  };
});

// 定义模块 "foo" 且依赖模块 "bar"
MyModules.define( "foo", ["bar"], function(bar) {
  var hungry = "hippo";
  function awesome() {
    console.log( bar.hello( hungry ).toUpperCase() );
  }

  return {
    awesome: awesome
  };
});

// 使用
var bar = MyModules.get( "bar" );
var foo = MyModules.get( "foo" );
console.log(
  bar.hello( "hippo" )
); // Let me introduce: hippo
foo.awesome(); // LET ME INTRODUCE: HIPPO

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

var obj = {
  id: "awesome",
  cool: function coolFn() {
    console.log( this.id );
  }
};
obj.cool(); // "awesome"
var id = "not awesome"
setTimeout( obj.cool, 100 ); // "not awesome"

// 参数 隐式赋值，丢失上下文
// 原因分析 setTimeout 中传递方法 解析为如下格式，无关乎调用问题
setTimeout(function coolFn(){
  // ...
}, 100)