作用域/作用域链 闭包及其使用

一、作用域、作用域链

作用域(scope)

浅显的理解： 作用域就是变量的可用范围(scope)

为什么要有作用域： 目的是防止不同范围的变量之间互相干扰

js中包含2级作用域：全局作用域 & 函数作用域。

1. 全局作用域

   不属于任何函数的外部范围称为全局作用域，保存在全局的作用域的变量称为全局变量。

   优点：可反复使用；缺点：会造成全局污染。

2. 函数作用域

   一个函数内部的范围称为函数作用域，保存在函数作用域的变量为局部变量。

   【注】函数形参变量也是函数内的局部变量。

   优点：不会污染；缺点：无法反复使用。

3. 作用域的形成

   只有函数的{}可以形成作用域，其他情况的{}不能形成作用域。比如对象的大括号不是作用域，对象的属性不是局部变量。

   【注】es6的块级作用域是实现其实是匿名函数自调用形成的，实际上也是函数作用域的原理。

作用域链(scopes / scope chain)

js规定，一个函数，及能用自己的作用域，又能用外层的作用域变量。所以需要一个访问变量的"路线图"。

每个函数在定义时，就已经规划好了自己专属的查找变量的”线路图“，蹭我作用域链。

【注】给从未声明的变量赋值，不会报错，但会生成全局变量。（非严格模式）

总结: Js中只有两种局部变量: 1. 函数内var出来的 2. 函数的形参变量 看不见var，形参里也没有， 就不是局部变量。

var a=10;
function fun(){
    var a=100;
    a++;
    console.log(a);
}
fun(); // 101
console.log(a);  // 10
// 形参题目---------
var a=10;
function fun(a){
  a++;
  console.log(a); 
}
fun(a); //11
console.log(a); //10

作用域的本质

js中的作用域和作用域链都是对象结构：

debug时查看作用域

在fun函数还未调用时，fun的作用域链：

fun的作用域链

进入fun函数时，作用域链增加一个local作用域

作用域链增加一个local作用域

作用域本质	函数作用域释放

总结: 函数作用域 其实是js引擎在调用函数时才临时创 建的一个作用域对象。其中保存函数 的局部变量。而函数调用完，函数作 用域对象就释放了。

所以，JS中函数作用域对象，还有个别名 ——”活动的对象(Actived Object)” 简称, AO。 所以，局部变量不可重用

二、闭包

闭包closure：能够读取其他函数内部变量的函数。

既重用变量又保护变量不被污染的一种编程方法。

只要希望给一个函数，保存一个即可反复使用，又不会被 外界污染的专属局部变量时，就用闭包。

使用闭包3步：

1. 用 外层函数包裹 要保护的变量和使用变量的内层函数
2. 外层函数 返回 内层函数
3. 调用外层函数，用变量接住返回的内层函数

//第1步: 用外层函数包裹要保护的变量和内层函数
function mother(){
    var total=1000;
    //第2步: 返回内层函数对象
    return function (money){
        total-=money
        console.log(`花了${money}还剩${total}元`)
    }
}
//第3步: 调用外层函数，用变量接住内层函数对象
var pay=mother();
//pay接住的就是mother()返回出来的内层函数对象
pay(100);//应该剩900
total=0;//别人程序执行了代码
pay(100);//应该剩800

pay函数的作用域

可以看出pay函数的作用域中有个闭包来自mother其中保存了total变量。

一句话概括：

闭包如何形成： 外层函数调用后， 外层函数的作用域对象， 被返回的内层函数的作用域链引用着， 无法释放， 就形成了闭包对象

闭包缺点：容易造成内存泄漏。解决办法：及时释放不用的闭包：将保存内存函数的变量赋值为null。

题目：闭包的应用

1. 柯里化

// 要求定义函数add 实现add(1)(2)(4)得到1+2+4的结果。
// 函数柯里化：可以给一个函数反复传参，传的参数还可以累计到函数中
var add = function(x1){
  var sum = x1;
  var fun = function(x2) {
    sum+=x2;
    return fun;
    // 因为柯里化要求可以连续传参，所以需要return出这个累加函数，确保可以继续传参时继续调用。如果直接返回sum，那么只传两个参数，该过程就结束了。
  }
  fun.toString = function() {
    // toString方法在隐式转字符串时调用，可以返回fun中函数闭包中的sum变量的值
    return sum
  }
  fun.valueOf = function() {
    // valueOf方法在隐式转number时调用，可以通过该方法返回sum值
    return sum
  }
  return fun; // 为了可以传入第二个参数，add()第一次调用时，需要返回函数，才能继续第二次的传参调用
}
alert(add(2)(3)(4)(1))
console.log(0+add(1)(2)(3)(3))

2. 二维游戏：2048/消消乐类型