JS作用域菜鸟教程（）新手必看

ES5中

函数作用域： 在 JavaScript函数中声明的变量，会成为函数的局部变量。

函数内部声明的变量，在函数外部不能访问。

全局作用域：函数之外声明的变量，会成为全局变量。

函数外部声明的变量，在函数内部可以访问。

当函数嵌套，在这个时候，内部函数与外部函数的这个变量就组成了闭包。

// ES5中没有块级作用域
{
  var a = 10
}
console.log(a); // 10

//全局作用域：global/window/本文件内
var v1 = 10;
v2 = 20; // 所有末定义直接赋值的变量自动声明为拥有全局作用域
function foo() {
  //函数作用域、局部作用域
  var a = 3;
  console.log(v1, v2); 
  console.log(this);
}
foo()
console.log(a); // a is not defined

案例

var a = 10;

function foo() {
  // 当函数内部有变量a时，会产生局部作用域，外界全局作用域中的a不会对函数内部造成影响
  // 如果把函数内部的变量a注释掉是，函数内部的a输出的就是全局作用域中的a
  console.log(a); //undefined
  var a = 100;
  console.log(a); // 100

  function fn() {
    console.log(a); //undefined
    var a = 200;
    console.log(a); // 200
  }
  fn()
}
foo()

作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突

作用域链

• 什么是自由变量

首先认识一下什么叫做 自由变量 。如下代码中，console.log(a)要得到a变量，但是在当前的作用域中没有定义a（可对比一下b）。当前作用域没有定义的变量，这成为 自由变量 。自由变量的值如何得到 —— 要到创建这个函数的那个父级作用域寻找，如果没有就一直向上级祖先元素寻找（这就是所谓的"静态作用域"，静态作用域是指函数的作用域在函数定义时就已经确定了）

var a = 100
function fn() {
    var b = 200
    console.log(a) // 这里的a在这里就是一个自由变量  // 100
    console.log(b)
}
fn()

• 什么是作用域链

如果父级也没呢？再一层一层向上寻找，直到找到全局作用域还是没找到，就宣布放弃。这种一层一层的关系，就是作用域链 。

var a = 100
function F1() {
  var b = 200
  function F2() {
    var c = 300
    console.log(a) // 自由变量，顺作用域链向父作用域找 //100
    console.log(b) // 自由变量，顺作用域链向父作用域找 //200
    console.log(c) // 本作用域的变量  //300
  }
  F2()
}
F1()

综合案例-作用域链-闭包-经典面试题

var a = 10
function fn() {
  var b = 20
  function bar() {
    console.log(a + b) //30
  }
  return bar
}
var x = fn(), // 执行fn() 返回的是bar
b = 200
x() //执行x，就是执行bar函数