JavaScript 作用域详解：全局、函数与块级作用域

什么是作用域

作用域指的是变量存在的范围。

在 JavaScript 中, 对象和函数同样也是变量，可以理解作用域为可访问变量，对象，函数的集合

在 ES5 的规范中，JavaScript 只有两种作用域：一种是全局作用域，变量在整个程序中一直存在，所有地方都可以读取；另一种是函数作用域，变量只在函数内部存在。ES6 又新增了块级作用域

全局作用域

所有顶层函数声明或者大括号之外定义的变量，都在全局作用域里。

function fxFn() {
  fxs = 2;
}

var fx = 1;
console.log(window.fx); // 1
// console.log(fxs) 未定义
fxFn(); // 执行后fxs成为全局变量
console.log(fxs); // 2

var 声明的变量与不使用 var 声明的变量区别

局部作用域（函数作用域与块级作用域）

函数作用域

在 JavaScript 中，任何定义在函数体内的变量或者函数都将处于函数作用域中，这些变量通常无法被在函数外部使用

局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。
当函数体内局部变量和函数体外的变量重名的话，内部局部变量将会遮盖同名的全局变量

var fx = 'fx is a good girl';

function fxFn() {
  console.log(fx);
  var fx = 'fx is a great girl';
  console.log(fx);
  fx = 'very good';
  console.log(fx);
}

console.log(fx);
fxFn();
console.log(fx);

// 依次输出 1. fx is a good girl 2. undefined 3. fx is a great girl 4. very good 5.fx is a good girl

var fx = 'fx is a girl';
var fxs = 'yes';

function fxFn() {
  console.log(fx); // undefined
  console.log(fxs); // yes
  fx = 'very good';
  fxs = 'not';
  console.log(fx); // very good
  console.log(fxs); // not
  var fx = 'fx is a great girl';
  console.log(fx); // fx is a great girl
  console.log(fxs); // not
}

console.log(fx); // fx is a girl
console.log(fxs); // yes
fxFn();
console.log(fx); // fx is a girl
console.log(fxs); // not

作用域链

函数中变量作用域的问题

如下代码，我们将 var a、b 包裹在了 fnn() 这个函数中，这样的好处是将内部的变量（var a、b）和函数定义“隐藏”起来，外部作用域无法访问包装函数内部的任何内容。但同时我们将在外部的作用域创建了一个具名函数 fnn()，这本身也污染了其所在的外部作用域。同时还需要显式地通过函数名 fnn() 调用这个函数才能运行其中的代码。

function fnn() {
  var a = 1024;
  var b = a * 2;
  console.log(b);
}

fnn();

如何解决上述问题 函数不需要函数名（或者至少函数名可以不污染所在作用域），并且能够自动运行，如下代码

(function fnn() {
  var a = 1024;
  var b = a * 2;
  console.log(b);
})();

详细用法见立即执行函数表达式