📒【作用域】JavaScript中的作用域类型

几乎每一种编程语言，它最基本的能力都是能够存储变量当中的值、并且允许我们对这个变量的值进行访问和修改。那么有了变量之后，应该把它放在那里、程序如何找到它们？这是不是需要我们提前约定好一套存储变量、访问变量的规则？这套规则，就是我们常说的作用域。作用域本质上就是程序存储和访问变量的规则。更多时候，我们提到作用域的时候，指的是这个规则约束下的一个变量、函数、标识符可以被访问的区域（这时它就更具体了）。

ES5中的作用域

ES5只有全局作用域和函数作用域，其有两条比较重要的规则：

使用var声明的变量会被自动添加到最接近的环境中。
如果初始化时没有使用var声明，该变量会自动被添加到全局环境中。
例如：

function add(num1,num2){
    var sum = num1+num2;
    return sum;
}
var result = add(10,20);
alert(sum);  //报错　由于sum不是有效的变量

由于使用var 所以sum被添加到add函数的局部环境中，alert(sum)是其父执行环境，故无法访问。
将sum前的var去掉就可以访问，这时sum被添加到全局环境中

全局作用域
声明在任何函数之外的顶层作用域的变量就是全局变量，这样的变量拥有全局作用域。

var char1="A";
function doSomething(){
    var char2="B";
    char3 = "C";
    function innerSay(){
       console.log(char2);
    }
    innerSay();
}
window.char4 = "D";
console.log(char1); // A 在最外层函数外面定义的变量拥有全局作用域
console.log(char2); // Uncaught ReferenceError: char2 is not defined
doSomething(); //B 最外层函数拥有全局作用域
doSomething();console.log(char3); // C，前提doSomething()需要先执行  所有末定义(没有var)直接赋值的变量自动声明为拥有全局作用域
innerSay() // Uncaught ReferenceError: innerSay is not defined
console.log(window.char4); // D 所有window对象的属性拥有全局作用域

局部作用域（函数作用域）
声明在函数内部的变量，局部作用域一般只在固定的代码片段内可访问到，最常见的是函数内部，因此也称函数作用域。
上述代码中变量char2仅拥有局部作用域，只能在函数doSomething内部访问到。

在严格模式下，函数只能在顶层作用域和函数内声明，其他情况(比如if代码块，循环代码块)下的声明都会报错．

ES6中的块作用域

块作用域是伴随ES6而生的一个概念。
ES6 开始，我们迎来了了两个用于声明变量的新关键词: let 和 const。这两个关键字定义的变量，如果被一个大括号 { } 这样括住了，那么这个大括号就是一个代码块，大括号括住的这些变量集就形成了一个块作用域。

let，const声明的变量只在所处于的块级有效；
const声明恒定变量，声明的同时就必须赋值，否则会报错；赋值后，值不可以再被更改。

const 是用来被声明常量的，它的内存空间在哪个位置，这一点一开始就锁死了，不要尝试把 const 定义的变量指向新的内存空间。这个规则在声明引用类型时有点不同—— 引用类型的属性值（包括数组的元素）可以被更改，只要你不修改引用的指向。 比如这样：

const me = {
  name: 'xiuyan'
}
me.name = 'Bear' // 没问题

像这样修改 name 这个属性值，而 me 对象的引用仍然指向原有的内存地址，这种更改就可以被接受。而类似这种：

const me = {
  name: 'xiuyan'
}
me = {
  name: 'Bear'
} // 报错

这样就相当于重新给 me 赋值了，是在尝试把 me 的引用指向一个全新的对象、指向另一块内存空间，这种做法就是不被接受的。

Q：为什么需要块作用域？

如何没有块级作用域，会带来以下问题：

变量提升导致内层变量可能会覆盖外层变量

var temp = new Date()
  function fn () {
    console.log(temp)
    if (true) {
      var temp = 'hello world'
    }
}
fn() // undefined

用来计数的循环变量泄露为全局变量

for(var i=0;i<10;i++){
    doSomething(i);
}
alert(i);  // 10

对于有块级作用域的语言来说，for语句初始化变量的表达式所定义的变量，只会存在于循环的环境之中．循环一结束即被销毁．而对于JS来说，由for语句创建的变量i即使在for循环执行结束后，也依旧存在与循环外部的执行环境中。

关于对象的私有属性的实现
ES5中没有块级作用域的概念，同样也没有私有属性的概念，但是存在私有变量。可以通过闭包+私有变量的方式来实现对象的私有属性。

实例私有属性
实例私有属性的特点就是每个对象都会包含独立的属性，对象和对象之间没有共享。为了实现这一目标，可以在构造函数中增加一个私有变量，然后定义公共方法来访问这个私有变量。
静态私有属性
如果希望数据全局共享，就需要用到静态属性。如果希望这个属性是私有的，那么要实现静态私有属性。首先这个私有应该在构造函数外部，为把构造函数外部的变量和构造函数结合，可以使用闭包把私有变量和构造函数都包含在其作用域中，为了在闭包外访问内部构造函数，可以使用一个全局变量来引用构造函数。
块级作用域的出现，使得获得广泛应用的立即执行匿名函数IIFE不再必要了

// IIFE写法
((function(){
    var tmp = ...
})())
// 块级作用域写法
{
    let tmp = ...
}

for循环的计数器,很适合用let命令

1. for无块级作用域

var a = []
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i)
  }
}
a[6]() // 10

执行结果：10
结果分析：由于ES5没有块级作用域,所以for中变量i，由于使用var声明的故会被添加到最近的环境中，在这里就是全局环境。
每一次循环，新的i值就会覆盖旧值．所以全局i保存的是最后一轮循环后的值10.
由于a[i]的值是一个函数,在函数内部是一个新的作用域，执行a[6]()会现在当前a[6]()的函数作用域内部查找i，找不到便会去父作用域查找,这里它的父作用域即全局作用域．所以输出10

作用域链如下：
全局作用域window: a i
　　函数a[i]()内部作用域:

2. let 构造块级作用域

var a = []
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i)
  }
}
a[6]() // 6
console.log(i) // 报错　ReferenceError: i is not defined

执行结果：6
结果分析：
ES6提供新增let命令，其所声明的变量只在let命令所在的代码块内有效．
for中的变量i用let定义的，当前的i只在本轮循环有效．所以每次的i都是一个新的变量．
报错的原因是当前是全局作用域无法访问到内部变量

作用域链如下：
全局作用域window: a
　　块级作用域for: i
　　　　函数a[i]()内部作用域:

关于let补充

不存在变量提升的特性
🤔️ Q：什么是变量提升？
A：在ES2015之前，引擎用 var 关键字声明所有的变量。在 var 时代，不管我们的变量声明是写在程序的哪个角落，最后都会被提到作用域的顶端。（变量提升的本质和JS的编译机制有关。）
🤔️ Q：区别在哪里？
A：let 和 const 区别于 var ，它们不存在"变量提升"。用let 和 const 声明的变量，它们的声明生效时机和具体代码的执行时机保持一致。所以，变量一定要在声明后使用。ES6规定了在let声明变量前不能使用该变量。
🤔️ Q：为什么要限制变量提升？
A：这样做是因为，早期的声明提升机制，其实容纳了很多程序员的误操作——那些忘记被声明的变量无法在开发阶段被明显地察觉出来，而是以 undefined 这样危险的形式藏匿在你的代码里。为了减少运行时错误，防止暗中使坏的 undefined 带来不可预知的问题，ES6 特意将“声明前不可用”这一点做了强约束。

console.log(a) // 报错　ReferenceError: a is not defined
let a = 0

不允许重复声明
let不允许在相同作用域内重复声明同一个变量

function () {
    let a = 10
    var a = 1
}  // SyntaxError: Unexpected token (

有暂时性死区的特性
只要块级作用域中存在let命令，它所声明的变量就绑定这个区域，不再受外部的影响．

var tmp = 123
  if (true) {
    tmp = 'abc'
    let tmp
  }
// ReferenceError: tmp is not defined

🤔️ 报错原因：
存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。
🤔️ Q：什么是暂时性死区？
A：ES6规定：如果区块中存在let和const命令，则这个区块对这些命令声明的变量从一开始就形成封闭作用域．只要在声明之前使用这些变量，就会报错。
在代码块内，使用let命令声明变量之前，该变量都是不可用的．这种语法上称"暂时性死区Temporal dead zone，简称TDZ"

有些死区比较隐蔽，不容易被发现

function bar(x = y，y = 2) {
    return [x, y]
}
bar(); // SyntaxError: Invalid or unexpected token

报错原因：参数x默认值等于另一个参数y，而此时y还没有声明,属于"死区"　如果修改为 function bar(x = 2，y = x)就不会报错

词法作用域和动态作用域

站在语言的层面来看，作用域其实有两种主要的工作模型：

词法作用域：也称为静态作用域。这是最普遍的一种作用域模型，JS 的作用域遵循的就是词法作用域模型。在代码书写的时候完成划分，作用域链沿着它定义的位置往外延伸。
动态作用域：相对“冷门”，但确实有一些语言采纳的是动态作用域，如：Bash 脚本、Perl 等。在代码运行时完成划分，作用域链沿着它的调用栈往外延伸。

var value = 1;
function foo() {
    console.log(value);
}
function bar() {
    var value = 2;
    foo();
}

bar();

当采用静态作用域时，执行foo函数，先从foo函数内部查找是否有局部变量value，如果没有，就根据书写的位置，查找上面一层的代码，在这里是全局作用域，也就是value等于1，所以最后会打印1。
当采用动态作用域时，执行foo函数，依然是从foo函数内部查找是否有局部变量value。如果没有，就从调用函数的作用域，也就是bar函数内部查找value变量，所以最后会打印2。

Q：如何“欺骗”词法作用域？

JS 不是只在书写阶段对作用域进行划分吗？能在运行过程中把划分好的作用域改掉吗？ —— eval 和 with可以帮你！

eval对作用域的修改

function showName(str) {
  eval(str)
  console.log(name)
}
var name = 'global'
var str = 'var name = "part"'
showName(str) // 输出 BigBear

eval函数的入参是一个字符串。当 eval 拿到一个字符串入参后，它会把这段字符串的内容当做一段 js 代码（不管它是不是一段 js 代码），插入自己被调用的那个位置。
这个改变确实只有在 eval (str) 这行代码被执行后才发生 ——eval 在运行时改变了作用域的内容，它成功地 “修改” 了词法作用域规则约束下在书写阶段就划分好的作用域。

image.png

with对作用域的修改

function changeName(person) {
  with(person) {
    name = 'BigBear'
  }
}

var me = {
  name: 'xiuyan',
  career: 'coder',
  hobbies: ['coding', 'footbal']
}
var you = {
  career: 'product manager'
}
changeName(me)
changeName(you)
console.log(name) // 输出 'BigBear'

with 会原地创建一个全新的作用域，这个作用域内的变量集合，其实就是传入 with 的目标对象的属性集合。
因为 “创建” 这个动作，是在 with 代码实际已经被执行后发生的，所以这个新作用域确实是在运行时被添加的， with 因此也实现了对书写阶段就划分好的作用域进行修改。

image.png

事实上， with 和 eval 因为其恼人的副作用（比如对语言性能的拖累、比如我们上面 “横空出世” 的全局变量等等），一直是我们 JS 程序员眼中的过街老鼠。实际编码中早就没人用了，极力推荐大家不要用。

思考题

var Test = {
  foo: 'test',
  func: function () {
    var self = this;
    console.log(this.foo); // test
    console.log(self.foo); // test
    (function () {
      console.log(this.foo); // undefined
      console.log(self.foo); // test
    })();
  }
}
Test.func();

function test() {
  for(let i = 0; i < 5;i++) {
    setTimeout(function () {
      console.log(i); // 0,1,2,3,4
    },1000);
  }
}
test();

function test() {
  for(var i = 0; i < 5;i++) {
    setTimeout(function () {
      console.log(i); // 5,5,5,5,5
    },1000);
  }
}
test();

📒【作用域】JavaScript中的作用域类型