读书笔记：JS设计模式与开发实践

1 变量作用域

就是变量的有效范围。

var a = 1;
var func1 = function () {
  var b = 2;
  var func2 = function () {
    var c = 3;
    console.log(b);  // 2
    console.log(a);  // 1
  }
  func2()
  console.log(c);  // ReferenceError: c is not defined
}
func1()

2 变量的生存周期

对于全局变量来说是永生，除非我们主动销毁这个全局变量。而对于函数内用var关键字声明的局部变量来说，当退出函数时，这些局部变量即失去它们的价值，它们都会随着函数调用的结束而被销毁：

var func = function(){
  var a = 1;   // 退出函数后局部变量a将被销毁
  console.log(a);
  
}
func()

现在来看看下面这段代码

var func = function(){
    var a = 1;
    return function(){
        a++;
        console.log(a);
    }
}
var f = func()
f();  // 2
f();  // 3
f();  // 4
f();  // 5

跟之前推论相反，当退出函数后，局部变量a并没有消失。这是因为当执行var f = func() 时，f返回了一个匿名函数的引用，它可以访问到func()被调用时产生的环境，而局部变量a一直处在这个环境里。既然局部变量所在的环境还能被外界访问，这个局部变量就有了不被销毁的理由。在这里产生了一个闭包结构，局部变量的生命看起来被延续了。

下面是闭包经典应用。

var nodes = document.getElementsByTagName('div')
for (var i = 0; i < nodes.length; i++) {
  nodes[i].onclick = function () {
    console.log(i);
  }
}

测试这段代码，无论点击哪个div，最后结果都是5.这是因为div节点的onclick事件是被异步触发的，当事件被触发时，for早已结束。

解决方法是在闭包的帮助下，把每次的i都封闭起来。当在事件函数中顺着作用域链中从内到外查找变量i时，会先找到被封闭在闭包环境中的i。

var nodes = document.getElementsByTagName('div')
for (var i = 0; i < nodes.length; i++) {
  (function (i) {
    nodes[i].onclick = function () {
      console.log(i);
    }
  })(i)
}

（ES6可用let 解决）

3 闭包的更多作用

3-A 封装变量

闭包可把一些不需要暴露在全局的变量封装成"私有变量"

var mult = function () {
  var a = 1;
  for(var i = 0, l = arguments.length; i < l; i++){
    a = a * arguments[i]
  }
  return a;
}

mult返回乘积。现在我们觉得对于那些相同的参数来说，每次都进行计算是一种浪费，我们可加入缓存机制来提高这个函数的性能。


var cache = {}

var mult = function () {
  var args = Array.prototype.join.call(arguments, ',')
  if(cache[args]){
    return cache[args]
  }
  var a = 1;
  for(var i = 0, l = arguments.length; i < l; i++){
    a = a * arguments[i]
  }
  return cache[args] = a;
}
console.log(mult(1,2,3));
console.log(mult(1,2,3));

然后继续优化全局变量cache

var mult = (function () {
  var cache = {}
  return function () {
    var args = Array.prototype.join.call(arguments, ',')
    if (args in cache) {
      return cache[args]
    }
    var a = 1;
    for (var i = 0, l = arguments.length; i < l; i++) {
      a = a * arguments[i]
    }
    return cache[args] = a;
  }
})()

console.log(mult(1, 2, 3));
console.log(mult(1, 2, 3));

继续优化，提炼函数

var mult = (function () {
  var cache = {}
  var calculate = function () { // 封闭calculate函数
    var a = 1;
    for (var i = 0, l = arguments.length; i < l; i++) {
      a = a * arguments[i]
    }
    return a;
  }
  return function () {
    var args = Array.prototype.join.call(arguments, ',')
    if (args in cache) {
      return cache[args]
    }

    return cache[args] = calculate.apply(null, arguments);
  }
})()

console.log(mult(1, 2, 3));
console.log(mult(1, 2, 3));

3-B 延续局部变量的寿命

img对象经常用于进行数据上报

var report = function(src){
  var img = new Image()
  img.src = src;
}
report('http://XXX.com/getUserInfo')

但是一些浏览器会丢失30％左右的数据，原因是img是report函数中的局部变量，当report函数调用结束后，img局部变量随即被销毁，而此时或许还没来得及发出HTTP请求，所以此次请求会丢失掉。

现在把img封闭起来，便能解决请求丢失的问题

var report = (function(src){
  var imgs = []
  return function (src) {
    var img = new Image()
    imags.push(imgs)
  img.src = src;
  }
})()
report('http://XXX.com/getUserInfo')

4 闭包与面向对象设计

过程与数据的结合是形容面向对象中的“对象”时经常使用的表达。对象以方法的形式包含了过程，而闭包则是在过程中以环境的形式包含了数据。通常用面向对象思想能实现的功能，用闭包也能实现。反之亦然。

var extent = function(){
  var value = 0;
   return {
     call: function(){
       value++;
       console.log(value);
       
     }
   }
}

var extent = extent()

extent.call()  // 1
extent.call()  // 2
extent.call()  // 3

如果换成面向对象

var extent = {
  value: 0,
  call: function(){
    this.value++;
    console.log(this.value);
  }
}

extent.call()  // 1
extent.call()  // 2
extent.call()  // 3

5 用闭包实现命令模式

在完成闭包实现命令模式前，先用面向对象的方式来编写一段命令模式的代码。

<button id="execute">click</button>
<button id="undo">click</button>

var Tv = {
  open: function(){
    console.log('open TV');
  },
  close: function () {
    console.log('close TV');
  }
}

var OpenTvCommand = function(receiver){
  this.receiver = receiver;
}

OpenTvCommand.prototype.execute = function(){
  this.receiver.open()  
}
OpenTvCommand.prototype.undo = function(){
  this.receiver.close()  
}
var setCommand = function(command){
  document.getElementsByTagName('execute').onclick=function () {
    command.execute()
  }
  document.getElementsByTagName('undo').onclick=function () {
    command.undo()
  }
}
setCommand( new OpenTvCommand( Tv ))

命令模式的意图是把请求封装为对象，从而分离请求的发起者和请求的接收者（执行者）之间的耦合关系。在命令被执行前，可预先往命令对象中植入命令的接收者。但在JS中，函数作为一等对象，本身就可四处传递，用函数对象而不是普通对象来封装请求显得更加简单和自然。如果需要往函数对象中预先植入命令的接收者，那么闭包可完成这个工作。

var Tv = {
  open: function(){
    console.log('open TV');
  },
  close: function () {
    console.log('close TV');
  }
}

var createCommand = function (receiver) {
  var execute = function () {
    return receiver.open()
  }
  var undo = function () {
    return receiver.close()
  }
  return {
    execute,
    undo
  }
}

var setCommand = function(command){
  document.getElementsByTagName('execute').onclick=function () {
    command.execute()
  }
  document.getElementsByTagName('undo').onclick=function () {
    command.undo()
  }
}
setCommand(createCommand(Tv))

6 闭包与内存管理

使用闭包一部分原因是我们选择主动把一些变量封闭，因为后面还需要，把这此变量封闭和放在全局作用域，对内存的影响是一致的。如将来需要回收这些变量可手动设为null。

使用闭包比较容易形成循环引用，如果闭包的作用域链中保存着一些DOM节点，这时就有可能造成内存泄露。但这本身并非闭包的问题，也非JS的问题。

要解决循环引用带来的内存泄露问题，只需把变量设为null。

03-1 闭包