你不知道的JS-读书笔记(二)--闭包,模块

闭包的效果

function foo () {
  var a = 2;

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

  return bar;
}

var baz = foo()

baz() // 2

循环与闭包

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)
}

模块机制

// 模块管理器
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

this 与 箭头函数

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)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值