JavaScript 变量作用域详解：全局与函数作用域机制

作用域定义了变量在代码中可被访问的有效范围。

全局作用域与 Window 对象

1. 全局作用域

(1) 全局作用域在页面加载时创建，页面关闭时销毁。 (2) 位于 script 标签内的变量和函数具有全局作用域，可在页面任意位置访问。 (3) 全局作用域包含全局对象 window，该对象由浏览器创建并代表当前浏览器窗口，可直接调用。 (4) 在全局作用域中声明的变量和函数，会作为 window 对象的属性和方法保存。

var a = 10;
b = 20;
function an(){
  console.log('an')
}
var bn = function(){
  console.log('bn')
}
console.log(window)

如图所示，变量 a、b 以及函数 an、bn 均存储在 window 对象上。

(5) 可直接调用 window 对象的属性和方法，例如 window.an() 可简写为 an()。

函数作用域与变量查找

2. 函数作用域

(1) 函数作用域在函数调用时创建，函数执行完毕后立即销毁。

function an(){
    var s = 'an'
    console.log(s);
}
//an();

此时函数 an 尚未执行，因此其作用域未被创建；当函数执行时，作用域随之创建，并输出结果 an。

an();

(2) 每次调用函数都会创建一个新的独立函数作用域，各作用域之间互不影响。

(3) 函数内部可以访问全局作用域中的变量，但函数外部无法访问函数作用域内的变量。

function an(){
  var s = 'an'
  console.log(s);
}
an();
console.log(s); // 此时，程序会从当前作用域和上级作用域及以上作用域中寻找变量s，并不会去下级作用域中寻找

(4) 在函数作用域中访问变量或函数时，系统会先在当前作用域内查找；若未找到，则向上级作用域查找，直至全局作用域。 (5) 函数作用域同样具备声明提前的特性，对变量和函数均有效。此时函数作用域类似于一个小型的全局作用域，关于声明提前的详细内容请参考声明提前部分。

an();
bn();
function an(){
    var s = 'an'
    console.log(s);
}
var bn = function(){
    console.log('bn')
}

下图结果显示，an() 可正常执行，因为函数 an 已提升并创建；而 bn 的变量名虽已提升但未赋值，因此此时 bn 并非函数。

(6) 在函数作用域中，若未使用变量关键字声明变量，赋值时会向上一级作用域查找同名已声明变量；若直至全局作用域仍未找到，则该变量将成为 window 对象的属性。

an(); // 输出结果 bn
function an(){
  var b = 'bn';
  function bn(){
    console.log(b); 
	b = 'bn2';  // b会往上一级寻找已经声明的同名变量,并赋值,直到全局作用域时还没找到,则会成为window的属性
  }
  bn();
  console.log(b); // 输出 bn2
}

(7) 在函数中定义的形参，等同于声明变量。

function an(name){
  console.log(name); // 输出 undefined
}
an();

等同于

function an(){
  var name
  console.log(name); // 输出 undefined
}
an();

本文介绍了 JavaScript 中的作用域及变量范围。如需了解更多 JS 作用域相关内容，请搜索本站往期文章或继续阅读后续文章，感谢支持！