你不知道的 JavaScript 笔记——作用域和闭包

2018-11-28 本文已影响0人 astak3

第一章：作用域是什么

程序中变量存储在哪里，需要是怎么找到它，这就需要设计一套存储以及能方便的找到它的规则，这个规则就是作用域

编译原理

JavaScript 是一门编译语言，它与传统编译语言不同，但编译步骤又非常相似；它不是提前编译的，编译结果也不能在分布式系统中进行移植。

传统编译步骤

分词 / 词法分析
将由字符组成的字符串分解成有意义的代码，例如：var a = 2;通常会被分解为var、a、=、;这些词法单元，判断a是独立的词法单元还是其他词法单元一部分时，如果调用的是有状态的解析规则那这个过程就是词法分析。

解析 / 语法分析
将词法单元流（数组）转换成一个由元素逐级嵌套所组成的代表程序语法结构的树，叫做“抽象语法树”（Abstract Syntax Tree，AST）

代码生成
将 AST 转换为可执行代码的过程被称为代码生成。简单说就是：将var a = 2;的 AST 转化为一组机器指令，用来创建一个a的变量（包括分配内存），并将一个值存储在a中。

理解作用域

var a = 2;在 JavaScript 引擎看来是两个完全不同的声明。

遇到var a首先编译器会向作用域询问是否有a变量存在这一作用域，如果有就忽略，没有就创建a。
接下来处理a = 2这个赋值操作，先向当前作用域询问是否有这个变量，如果有就使用这个变量，并赋值；如果没有，继续找。

LHS查询 RHS查询
LHS 赋值操作的目标是谁；RHS 谁是赋值操作的源头（我要查找×××，并把它给我）；简单说如果查找的目的是对变量进行赋值，会使用 LHS 查询，如果查找的目的是为了获取变量值，会使用 RHS 查询。
var a = foo(a){...} 这里的声明，a = ...并不会做 LHS 查询。

function foo(a){
  var b = a;
  return a + b;
}
var c = foo(2)

LHS
c = ...
a = 2(隐示变量分配)
b = ...

RHS
foo(...)
= a
a ...
... b

第二章：词法作用域

词法作用域是在写代码时，将变量和块级作用域写在哪里来决定的

词法阶段

function foo(a){
  var b = a * 2;
  function bar(c){
    console.log(a,b,c);     //2,4,12
  }
  bar( b * 3);
}
foo(2);

全局作用域下包含foo
foo作用域下包含a、b、bar
bar作用域下包含c
对b、c的 RHS 查询是在上一级作用域中完成的

欺骗词法

eval()接受一个字符串作为参数，把它当做代码来执行，在哪个作用域下调用它，它的作用域就在哪边

function foo(str,a){
  eval(str);
  console.log(a,b);     //2,3
}
var b = 2;
foo('var b = 3;',2)

with可以简化单调重复的赋值操作
如

var obj ={
  a = 1,
  b = 2,
  c = 3
};
//单调重复的赋值
obj.a = 4;
obj.b = 5;
obj.c = 6;
//用with简化
with(obj){
  a = 7;
  b = 8;
  c = 9;
}

function foo(obj){
    with(obj){      //相当于 obj.a = 2，区别 with 创建了全局变量 a
        a = 2;
    }
}
var o1 = {
    a:3;
}
var o2 ={
    b:3;
}
foo(o1)
console.log(o1.a)   //2
foo(o2)
console.log(o2.a)   //undefined
console.log(a)      //2

eval()、with实际工作中不推荐使用，会影响性能。

第三章：函数作用域和块作用域

函数中的作用域

函数内部可以访问函数外部的变量，函数外部不可以访问函数内部变量

函数作用域

函数的名称也会污染全局作用域，可以用匿名函数+立即执行函数来实现

立即执行函数

有一个bug，上一行表达式必须要分号结尾，省略会报错

var a = 2;
(function(global){
    var a = 3;
    console.log(a);     //3
    console.log(global.a)   //2
})(window)

var a = 2;
(function(){
    var a = 3;
    console.log(a);     //3
}())

作用域闭包

1. 在自己定义的作用域以外的地方执行
2. 使用回调函数也是闭包

function foo(){
  var a = 2
  function bar(){
    console.log(a)
  }
  return bar
}
var baz = foo()
baz() //2  这里就用了闭包

bar是在foo里面定义的，所以它是在foo作用域下，但调用它的地方是在foo作用域外，就这构成了闭包。
在来看一个

function foo(){
  var a = 2
  function bar(){
    console.log(a)
  }
  baz(bar)
}
function baz(fn){
  fn()      //2，在这里执行了bar，这里构成了闭包
}
foo()

还有

var fn 
function foo(){
  var a =2
  function bar(){
    console.log(a)
  }
  fn = baz
}
function baz(){
  fn()
}
foo()
baz()   //2，构成了闭包，这里执行了 bar，构成了闭包。

在循环中使用闭包
闭包是函数和声明该函数的词法环境的组合。

回到我们上面说的：在自己定义的作用域以外的地方执行，这里声明的i是全局变量，使用全局变量不构成闭包。

for(var i = 1; i <= 3; i++){
    setTimeout(function(){
        console.log(i)  //打印出 3 个 4，这里没有闭包
    },1000)
}

如果要写成闭包的样子，必须要在外面用函数包裹一层，并调用它，才能形成闭包

function xxx(){
    for(var i = 1; i <= 3; i++){
        setTimeout(function(){
            console.log(i)  //打印出 3 个 4，这是一个闭包没有立即执行
        },1000)
    }
}
xxx()

优化1：这里setTimeout里面的i和立即执行函数的形参构成闭包，阻隔了与for循环的i形成闭包。

function xxx(){
    for(var i = 1; i <= 3; i++){
        (function(i){    //这个形参 i 和外面的 i 不是同一个变量
            setTimeout(function(){
                console.log(i)  //1,2,3，用立即执行函数，
            },1000)
        })(i)
    }
}
xxx()

优化2：用let声明

function xxx(){
    for(let i = 1; i <= 3; i++){
        setTimeout(function(){
            console.log(i)  //1,2,3，用 let 声明变量，在循环的过程中不止一次的声明
        },1000)
    }
}
xxx()

模块中闭包
模块中闭包需要具备两个条件：

必须有外部的封闭函数，该函数至少被调用一次
封闭函数至少返回一个内部函数（可以用 return 或 window）
例：

var foo = function(){
  function a(){
    console.log(1)
  }
  function b(){
    console.log(2)
  }
  return {
    a:a,
    b:b
  }
}
var c = foo()
c.a() //1