详解JavaScript 作用域：局部、全局与块级变量

JavaScript 作用域概述

作用域定义了程序中可访问变量的范围集合。

JavaScript 作用域概述

在 JavaScript 语言中，对象和函数本质上也是变量的一种形式。

因此，JavaScript 中的作用域指的是可访问的变量、对象以及函数的集合范围。

JavaScript 函数作用域：变量在函数内部进行修改和定义。

局部作用域与全局变量

JavaScript 局部作用域

当变量在函数内部被声明时，该变量具有局部作用域。

局部变量的特点在于其访问权限仅限于声明它的函数内部。

// 此处不能调用 carName 变量
function myFunction() {
  var carName = "Volvo";
  // 函数内可调用 carName 变量
}

由于局部变量的作用范围限制在函数内部，不同的函数可以使用相同名称的变量而互不干扰。

局部变量在函数开始执行时被创建，并在函数执行结束后自动销毁。

JavaScript 全局变量

变量若在函数外部定义，则被视为全局变量。

全局变量拥有全局作用域，意味着网页中的所有脚本和函数均可访问该变量。

var carName = " Volvo";
 
// 此处可调用 carName 变量
function myFunction() {
  // 函数内可调用 carName 变量
}

如果在函数内部声明变量时未使用 var 关键字，该变量将自动成为全局变量。

在以下示例中，carName 虽然在函数内部定义，但由于未使用 var 声明，它实际上是一个全局变量。

// 此处可调用 carName 变量
 
function myFunction() {
  carName = "Volvo";
  // 此处可调用 carName 变量
}

变量生命周期与函数参数

JavaScript 变量生命周期

JavaScript 变量的生命周期从其被声明并初始化时开始。

局部变量的生命周期随函数执行结束而终止，即被销毁。

全局变量的生命周期则持续到页面关闭为止。

函数参数

函数参数仅在函数内部生效，被视为局部变量。

HTML 全局变量与 window 对象

HTML 中的全局变量

在 HTML 环境中，全局变量属于 window 对象，所有数据变量均归属于 window 对象。

//此处可使用 window.carName
 
function myFunction() {
  carName = "Volvo";
}

你知道吗?

你的全局变量或函数可以覆盖 window 对象的变量或函数。此外，局部变量（包括 window 对象）也可以覆盖全局变量和函数。

补充

ES6 let 关键字与块级作用域

ES6 中的 let 关键字

let 关键字允许声明一个作用域被限制在块级中的变量、语句或表达式。与 var 关键字不同，let 声明的变量只能是全局的或整个函数块的，无法在块级作用域外访问。

let 语法：

let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];

let 声明的变量仅在其声明的块或子块中可用，这一点与 var 相似。二者之间最主要的区别在于，var 声明的变量的作用域是整个封闭函数，而 let 则是块级作用域。

let 和 var 的区别代码实例：

function varTest() {
 var x = 1;
 if (true) {
  var x = 2; // 同样的变量!
  console.log(x); // 2
 }
 console.log(x); // 2
}

function letTest() {
 let x = 1;
 if (true) {
  let x = 2; // 不同的变量
  console.log(x); // 2
 }
 console.log(x); // 1
}

以上就是详解JavaScript 作用域的详细内容，更多关于JavaScript 作用域的资料请关注本站其它相关文章！