JS基础整理(1)—函数和闭包

这段空闲时间，打算整理一些JS非常基础，但是又常常搞不清记不住的知识点。

第一篇，先整理一下JS的函数，特别是闭包的知识。

函数的定义

闭包的本质还是函数，那么先来看看如何定义一个函数：

1. 函数声明：声明一个变量，把函数对象赋值给它，会提升到脚本、代码块顶部

function f(x){ return x; }

2. 函数表达式：不会声明变量，不会提升

let f = function(x){ return x; }

3. 箭头函数：从定义自己的环境继承this的值

let f = (x,y)=>{ return x+y; }

词法作用域

词法作用域(lexical scoping)规则：JavaScript函数执行时，使用的是定义函数时生效的变量作用域，而不是调用函数时生效的变量作用域。

let scope  = "global scope";　// 全局变量

function checkScope(){
  let scope = "local scope":　// 局部变量
  function f(){ return scope; }　// 返回当前作用域中的值
  return f();
}
checkScope(); //返回什么？

以上代码，

• 创建了一个全局变量scope，赋值为"global scope"；
• 声明了一个新的变量checkScope，并且定义一个新的函数对象赋值给checkScope；
• 从全局执行上下文中查找变量checkScope，并作为函数执行；
• 函数调用创建新的执行上下文(checkScope函数执行上下文)；
• 在checkScope函数执行上下文中：
  • 创建局部变量scope，赋值为"local scope"
  • 声明变量f，并把函数对象赋值给f
  • 调用f函数，
  • checkScope函数执行上下文查找scope，返回scope的值"local scope"
  • 把f函数返回的东西(即"local scope")作为checkScope函数的返回
• 最后输出"local scope"

再看看以下例子：

let scope  = "global scope";

function checkScope(){
  let scope = "local scope":
  function f(){ return scope; }
  return f;
}
checkScope()(); //返回什么？

两个例子有什么分别呢？

第一个例子中，checkScope()返回的时f()调用后的值；
第二个例子中，checkScope()返回的是一个嵌套函数f()，而且()转移到了外部，函数外部调用这个嵌套函数。

返回值会不会变成"global scope"？运行一下可以看到结果依然是"local scope"

分析：根据词法作用域规则，定义嵌套函数f()时，变量scope绑定的值是"local scope"，该绑定在f()执行时仍然有效，无论它在哪里执行。

嵌套函数f()创建了一个闭包，闭包的一个强大性质：会捕获自身定义所在外部函数的局部变量（及参数）绑定。

严格来说，所有函数都是闭包，但是，由于多数函数调用和函数定义都在同一作用域内，所以闭包的存在无关紧要。对于上面的例子，存在嵌套函数，而且外部函数返回的时函数的时候，闭包的概念就变得重要。

闭包

闭包(closure)：一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure)

闭包有什么用呢？

模拟私有方法

闭包可以捕获一次函数调用的局部变量，可以将这些变量作为私有状态

let f = (function(){
  let counter = 0; // 以下函数的私有状态
  return function() { return counter++; }　// 返回一个函数
}())

f(); // 0
f(); // 1

第一行定义并调用一个函数，把函数的返回值赋给f，返回值是一个匿名函数，这个嵌套的函数有权访问其作用域的变量，而且可以使用用定义在外部函数的变量counter，外部函数一旦返回，就没有别的代码可以看到counter了，这时这个嵌套函数拥有对它的专有访问权。

使用闭包，我们就可以模拟Java，创建私有属性。

let counter = (function(){
  let n= 0;
  return {
    count: function() {return n++;},
    reset: function() { n=0;},
    value: function() { return n;}
  }
})();

counter.count();
counter.count();
counter.reset();
counter.count();
counter.value();

以上的例子可以看到，同一个外部函数中定义多个嵌套函数，它们共享作用域。

再来看一下，修改一点代码

let makeCounter = function(){
  let n= 0;
  return {
    count: function() {return n++;},
    reset: function() { n=0;},
    value: function() { return n;}
  }
};

let counter1 = makeCounter();
let counter2 = makeCounter();
counter1.count();
counter1.reset();
counter1.count();

counter1.value();
counter2.value();

两个计数器 Counter1 和 Counter2相互独立，因为每次调用makeCounter()的时候，都会改变变量的值。每个闭包都是引用自己词法作用域内的变量，在一个闭包内对变量的修改，不会影响到另外一个闭包中的变量。

注意：在循环中创建闭包

function f(){
  let funcArray = [];
  for(var i=0; i < 10; i++){
    funcArray[i] = () => i;
  }
  return funcArray;
}

let funcs = f();
funcs[3](); //　结果是3吗？

结果：10

分析：f()中创建是10个闭包，它们共享同一个var声明的变量i，for循环结束时，i的值是10。因为闭包关联的作用域是活的，所以10个闭包都共享了10个这值。

解决：把var改成let，因为通过var声明的变量作用域是整个函数体，ES6后增加的let和const的作用域是块极的，每次循环都会定义一个与其它循环不同的独立作用域。

function f(){
  let funcArray = [];
  for(let i=0; i < 10; i++){
    funcArray[i] = () => i;
  }
  return funcArray;
}

let funcs = f();
funcs[3](); //　3
funcs[7](); //　7

使用闭包时还需要注意一个问题：

• 箭头函数：会继承包含它们的函数中的this值，使用箭头函数创建的闭包可以访问外部的this值；
• function：它的this值指向全局对象或者undefined

参考以下三个例子：

//　例子1
let o = {
  a: 1,
  m: function(){
    function f() { return this.a; }
    return f();
  }
}
o.m(); // undefined
// f()中的this => Window {0: global, window: Window, self: Window, document: document, name: "", location: Location, …}

//　例子2
let o = {
  a: 1,
  m: function(){
    f = () => this.a;
    return f();
  }
}
o.m(); // 1
// 箭头函数中的this => {a: 1, m: ƒ}

//　例子3
let o = {
  a: 1,
  m: function(){
    let self = this; // 把this的值保存在变量中，让以下嵌套函数可以访问外部this的值
    function f() { return self.a; }
    return f();
  }
}
o.m(); // 1