在 JavaScript 中,作用域指的是变量和函数的可访问性和可见性。
JavaScript 中的作用域有以下几种:
1. 全局作用域(Global Scope):全局作用域是指在代码中任何地方都可以访问的作用域。在全局作用域中声明的变量和函数可以被代码中的任何其他部分访问。
2. 函数作用域(Function Scope):函数作用域是指在函数内部声明的变量和函数只能在该函数内部访问,外部无法访问。这意味着在不同函数中可以使用相同名称的变量而互不干扰。
3. 块级作用域(Block Scope):块级作用域是指由一对花括号({})包裹起来的代码块内部声明的变量和函数,只能在该代码块内部访问。在 ES6(ECMAScript 2015)之后引入了 let 和 const 关键字,使得 JavaScript 中可以使用块级作用域。
作用域的优先级规则如下:
1. 变量在当前作用域中查找,如果找到则使用,否则向上一级作用域查找,直到找到全局作用域。
2. 如果在嵌套的作用域中存在同名的变量,则内层作用域中的变量会覆盖外层作用域中的同名变量。
3. 如果使用了 let 或 const 声明的变量,则其作用域限制在当前的块级作用域内,而不会受到函数作用域的限制。
JavaScript 中的作用域优先级遵循就近原则,内部作用域可以访问外部作用域的变量,但外部作用域无法访问内部作用域的变量。
代码示例及其注释
当谈到 JavaScript 中的作用域和优先级时,一个常见的示例是使用函数作用域和块级作用域来说明。下面是一个简单的代码示例:
// 全局作用域
let globalVar = "global";
function outerFunction() {
// 函数作用域
let outerVar = "outer";
function innerFunction() {
// 函数作用域
let innerVar = "inner";
console.log(innerVar); // 可以访问内部变量 innerVar
console.log(outerVar); // 可以访问外部函数作用域的变量 outerVar
console.log(globalVar); // 可以访问全局作用域的变量 globalVar
}
innerFunction();
console.log(innerVar); // 无法访问内部变量 innerVar,会报错
console.log(outerVar); // 可以访问外部函数作用域的变量 outerVar
console.log(globalVar); // 可以访问全局作用域的变量 globalVar
}
outerFunction();
console.log(globalVar); // 可以访问全局作用域的变量 globalVar
console.log(outerVar); // 无法访问外部函数作用域的变量 outerVar,会报错
console.log(innerVar); // 无法访问内部变量 innerVar,会报错
在这个示例中,我们定义了一个全局变量 globalVar,以及一个外部函数 outerFunction。在 outerFunction 中又定义了一个内部函数 innerFunction。我们可以看到:
- innerFunction 可以访问到外部函数作用域的变量 outerVar 和全局作用域的变量 globalVar。
- 在 outerFunction 中无法直接访问 innerFunction 中的变量 innerVar。
- 在全局作用域中无法直接访问 outerFunction 中的变量 outerVar 和 innerFunction 中的变量 innerVar。
这个示例说明了 JavaScript 中作用域的嵌套关系以及变量的可访问性规则。
Hi,我是贝格前端工场,10年前端和UI老司机了,持续为大家分享有价值、有见地的观点、作品、干货,欢迎评论、关注、点赞、有事请私信。