JavaScript基础学习-作用域

JavaScript的名称

引擎：负责JavaScript的编译和执行
编译器：负责语法分析，代码生成
作用域：负责收集维护变量
JavaScript在代码执行前会经过编译
在编译的过程中会把代码中变量收集在 作用域中
作用域 说白了就是负责收集并维护变量

当执行一个var a = 1 时，会发生什么

1. 首先遇到var a 编译器会询问作用域中是否存在a，如果存在，则编译器会忽略这次声明，如果不存在，则在当前作用域中声明一个新的变量a。
2. 当遇到a = 1 时，引擎会询问当前作用域中是否存在a变量，如果是，则给a赋值，如果没有，则继续向外层作用域查找，一直找到全局变量，如果都没，普通模式会创建一个全局a变量，严格模式下则抛出异常ReferenceError

demo1

{
  console.log('---------------------变量提升----------------');
  console.log(a); // undefiend
  console.log(b); // Uncaught ReferenceError: b is not defined
  var a = 2;
  console.log('--------------------------------------------');
}

因为编译器会将 a 放到作用域中，但是当引擎执行到console.log(a)时还没有给a赋值，所以第一个console.log(a) 是undefiend。
变量b，并没有声明，所以作用域中不存在b，所以当执行到console.log(b)的时候会是ReferenceError。

引擎的查找过程LHS&RHS

• LHS
  在作用域中查找要赋值的变量（容器本身）
  比如 var a = 1

• RHS
  在作用域中查找变量

demo

  console.log('-----------------引擎查找LHS&RHS---------------------')
  function foo(a) {
    var b = a;
    return a + b;
  }

  var c = foo(2);
  console.log('-------------------------------------------------')

引擎和作用的对话
引擎：c=foo(2) 作用域你过c，我要给他赋值 LHS
作用域：见过鸭，给你
引擎：foo(2) 我要用foo，对foo进行RHS查询，你见过他吗 RHS
作用域：见过呀，给你
引擎：function foo(a){} 我要对a赋值，对a进行LHS查询，你见过吗 LHS
作用域：见过呀，给你
引擎：b = a 我要给b赋值，对b进行LHS查询，你见过吗 LHS
作用域：见过呀，给你
引擎：b = a 我要使用a，对a进行RHS查询，你见过吗 RHS
作用域：见过呀，给你
引擎：return a + b 我要用a，对a进行RHS查询，你见过吗 RHS
作用域：见过呀，给你
引擎：return a + b 我要用b，对b进行RHS查询，你见过吗 RHS
作用域：见过呀，给你

异常

• RHS查询
  如果在作用域中查找不到，引擎会抛出ReferenceError异常。
  如果找到了，但是对这个变量进行不合理的操作（比如，对非函数进行函数调用，引用null或undefined类型值的属性），引擎会抛出TypeError异常。
• LHS查询
  如果在作用域中查找不到，会创建一个变量（非严格模式下），严格模式（‘use strict’）下回抛出异常ReferenceError

函数作用域

外部作用域无法访问函数内部的变量
demo

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

块级作用域

虽然只是在for循环内部使用m,但是m会被绑定在外部作用域。

  for (var m = 0; m < 10; m++) {
    console.log(m);
  }
  console.log(m); // 10

是动态作用域吗

JavaScript没有动态作用域，只有词法作用域
demo
当执行foo方法是，会对a进行RHS查询，找到了全局作用域中a=2，而不是bar中的3

  function foo() {
    console.log('js不是动态作用域', ab); // 2
  }

  function bar() {
    var ab = 3;
    foo();
  }

  var ab = 2;
  bar();