# 变量的作用域

变量的作用域，就是指变量的有效范围。当在函数中声明一个变量时，如果该变量前面没有带上关键字var，这个变量就会成为全局变量。
用 var 关键字在函数中声明变量，这时候的变量即是局部变量，只有在该函数内部才能访问到这个变量，在函数外面是访问不到的

var func = function(){ 
  var a = 1;
  alert(a); // 输出: 1 
};
func();
alert(a); // 输出:Uncaught ReferenceError: a is not defined

# 变量的生存周期

对于全局变量来说，全局变量的生存周期当然是永久的，除非我们主动销毁这个全局变量。
而对于在函数内用 var 关键字声明的局部变量来说，当退出函数时，它们都会随着函数调用的结束而被销毁。

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

闭包可以延续变量的生存周期

var func = function(){ 
  var a = 1;
  return function(){ 
    a++;
    alert(a);
  } 
};
var f = func(); 
f();  // 输出:2
f();  // 输出:3
f();  // 输出:4
f();  // 输出:5

# 闭包的更多作用

# 封装变量

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

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);
  }
})();
alert(mult(1,2,3)); // 输出:6 
alert(mult(1,2,3)); // 输出:6

# 延续局部变量的寿命

函数内部的局部变量所在的环境还能被外界访问时，这个局部变量就不会被销毁

# 闭包实现命令模式

 <html> 
    <body>
      <button id="execute">点击我执行命令</button>
      <button id="undo">点击我执行命令</button> 
   		<script>
			  var Tv = {
					open: function(){
						console.log('打开电视机'); 
					},
					close: function(){
						console.log('关上电视机');
					} 
				};
				var createCommand = function(receiver){ 
					var execute = function(){
						return receiver.open();// 执行命令，打开电视机
					}
					var undo = function(){ 
						return receiver.close();// 执行命令，关闭电视机
					}
					return {
						execute: execute, 
						undo: undo
					}
				};
				var setCommand = function( command ){
					document.getElementById('execute').onclick = function(){
						command.execute(); // 输出:打开电视机 
					}
					document.getElementById('undo').onclick = function(){ 
						command.undo(); // 输出:关闭电视机
					} 
				};
				setCommand(createCommand(Tv));
			</script> 
    </body>
</html>

# 闭包与内存管理

如果两个对象之间形成了循环引用，那么这两个对象都无法被回收，但循环引用造成的内存泄露在本质上也不是闭包造成的

# 高阶函数

TIP

高阶函数是指至少满足下列条件之一的函数

函数可以作为参数被传递
函数可以作为返回值输出

# 函数作为参数传递

# 回调函数

异步请求

var getUserInfo = function(userId, callback){
  $.ajax('http://xxx.com/getUserInfo?' + userId, function(data){
    if (typeof callback === 'function'){ 
      callback(data);
    } 
  });
}
getUserInfo(13157, function(data){ 
  alert(data.userName);
});

委托

var appendDiv = function(callback){ 
  for (var i = 0; i < 100; i++){
    var div = document.createElement('div'); div.innerHTML = i;             
    document.body.appendChild( div );
    if (typeof callback === 'function'){
      callback( div ); 
    } 
  };
};
appendDiv(function( node ){ 
  node.style.display = 'none';
});

如果上面的代码直接在创建好div后直接隐藏，函数将难以复用。使用上面的写法，隐藏节点的请求实际上是由客户发起的，但是客服并不知道节点什么时候会创建好，所以把隐藏节点的逻辑放在回调函数中，“委托”给appendDiv方法。

# Array.prototype.sort

[1, 4, 3].sort(function (a, b) {
	return a - b
})
// 输出: [1, 3, 4]

# 函数作为返回值输出

# 判断数据的类型

var Type = {};
for (var i = 0, type; type = ['String', 'Array', 'Number'][i++];){
  (function(type){
    Type['is' + type] = function(obj){
      return Object.prototype.toString.call(obj) === '[object '+ type +']';
    }
  })(type)
};
Type.isArray([]);     // 输出:true
Type.isString("str");    // 输出:true

# getSingle

下面是一个单例模式的例子

var getSingle = function (fn) {
  var ret;
  return function () {
    return ret || (ret = fn.apply(this, arguments));
  };
};
var getScript = getSingle(function(){
  return document.createElement( 'script' );
});
var script1 = getScript(); 
var script2 = getScript();
alert ( script1 === script2 );  // 输出:true

# 高阶函数实现AOP

AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来，这些跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等。把这些功能抽离出来之后，再通过“动态织入”的方式掺入业务逻辑模块中。

Function.prototype.before = function( beforefn ){
  var __self = this; // 保存原函数的引用
  return function(){ // 返回包含了原函数和新函数的"代理"函数
    beforefn.apply(this, arguments); 
    return __self.apply(this, arguments);
  }
};
Function.prototype.after = function( afterfn ){
  var __self = this;
  return function(){
  	// 执行新函数，修正 this // 执行原函数
  	var ret = __self.apply( this, arguments );        
    afterfn.apply( this, arguments );
    return ret;  
  } 
};
var func = function(){ 
  console.log(2);
};
func = func.before(function(){ 
  console.log(1);
}).after(function(){ 
  console.log(3);
});
func();    //  1  2  3

# 高阶函数的其他应用

# currying

currying 又称部分求值。一个 currying 的函数首先会接受一些参数，接受了这些参数之后，该函数并不会立即求值，而是继续返回另外一个函数，刚才传入的参数在函数形成的闭包中被保存起来。待到函数被真正需要求值的时候，之前传入的所有参数都会被一次性用于求值。

var currying = function(fn){ 
  var args = [];
  return function(){
    if (arguments.length === 0){
      return fn.apply(this, args); 
    }else{
      [].push.apply(args, arguments);
      return arguments.callee; 
    }
  } 
};
var cost = (function(){ 
  var money = 0;
  return function(){
    for ( var i = 0, l = arguments.length; i < l; i++ ){
      money += arguments[ i ]; 
    }
    return money; 
  }
})();
var cost = currying( cost );  // 转化成 currying 函数
cost(100); // 未真正求值
cost(200); // 未真正求值
cost(300);// 未真正求值 
alert(cost()); // 求值并输出:600

# uncurrying

Function.prototype.uncurrying = function () {  
  var self = this; // self 此时是 Array.prototype.push
  return function() {
		var obj = Array.prototype.shift.call(arguments);
		// obj是{
		//	"length": 1,
		//	"0": 1 }
		// arguments对象的第一个元素被截去，剩下[2]
		return self.apply(obj, arguments)
		// 相当于 Array.prototype.push.apply(obj, 2)};
  };
};
var push = Array.prototype.push.uncurrying(); 
var obj = {
  "length": 1,
  "0": 1 
};
push(obj, 2); 
console.log(obj);// 输出:{0: 1, 1: 2, length: 2}

# 函数节流

将即将被执行的函数用 setTimeout 延迟一段时间执行。如果该次延迟执行还没有完成，则忽略接下来调用该函数的请求

var throttle = function (fn, interval) {
  var __self = fn, // 保存需要被延迟执行的函数引用 timer, // 定时器
  firstTime = true; // 是否是第一次调用
  return function () {
    var args = arguments,
    __me = this;
    if (firstTime) { // 如果是第一次调用，不需延迟执行 
      __self.apply(__me, args);
      return firstTime = false;
    }
    if (timer) { // 如果定时器还在，说明前一次延迟执行还没有完成 
      return false;  
    }
    timer = setTimeout(function () { // 延迟一段时间执行           
      clearTimeout(timer);
      timer = null;
      __self.apply(__me, args);
    }, interval || 500 ); 
  };
};
window.onresize = throttle(function(){ 
  console.log( 1 );
}, 500 );

← this、call和apply 单例模式 →