js的作用域

发布时间 2023-12-28 23:46:37作者: 前端自信逐梦者

全局作用域

全局作用域是指代码中任何地方都可以访问的变量,在整个应用程序中都是可见的

局部作用域(函数作用域)

局部作用域是指在函数内部定义的变量,它们只能在函数内部访问,函数外部无法访问

块级作用域

这是一个特殊的作用域,在es6之前,js中没有块级作用域。
在es6中,使用let和const关键字可以创建块级作用域。
块级作用域是指在代码块(通常指花括号包含的语句集合)中定义的变量,只能在代码块内部访问,代码块外部无法访问。

let和const不存在变量提升,这是因为let和const存在暂时性死区。

console.log(a); // 报错  Cannot access 'a' before initialization
let a = 1;

什么是暂时性死区(temporal dead zone,简称 TDZ)呢?
暂时性死区是一种语法,即在代码块内,使用let或const声明变量之前,该变量都是不可用的。

拓展

1.变量提升

变量提升是js的一个重要特性

// 代码顺序
console.log(a); // undefined
var a = 1;

// 执行顺序: js将变量提升到作用域顶部,并且是未赋值状态
var a;
console.log(a);
a = 1;

2.函数提升

函数也存在提升现象,这也解释了为什么js中可以在定义函数之前就可以调用

// 代码顺序
console.log(fn());  // 1
function fn() {
  return 1;
}

// 执行顺序: js将函数提升到作用域顶部
function fn() {
  return 1;
}
console.log(fn());

注意:与function声明的函数不同,使用函数表达式定义的函数的提升规则,遵从的是变量提升的规则

// 代码顺序
console.log(f);
var f = function fn() {
  return 1;
};

// 执行顺序: js将函数提升到作用域顶部
var f;
console.log(f); // undefined
f = function fn() {
  return 1;
};
// 通过赋值后才可以正常调用
console.log(f());

注意:在相同作用域内,如果变量名和函数名一样,提升的时候,变量的声明会被函数覆盖

// 代码顺序
console.log(fa);
var fa = 1;
console.log(fa);
function fa() {
  return 1;
}
console.log(fa);

// 执行顺序: js将函数提升到作用域顶部
function fa() {
  return 1;
}
console.log(fa); // 函数体
fa = 1;
console.log(fa); //1
console.log(fa); // 1