js三种作用域
- 作用域概念
变量可以起作用的范围区域 - ES5 有两种作用域
a.全局作用域(Global Scope) : 函数外面声明的变量,称之为全局变量。 可以在页面任何地方被访问
全局变量生命周期 : 从页面加载 -> 到页面关闭
b.局部作用域(Local Scope) : 函数里面声明的变量,称之为局部变量。 只能在函数里面被访问
局部变量生命周期 : 从函数开始执行 -> 到函数执行结束 - ES6 在ES5原有基础上新增第三种作用域
c.块级作用域(Block Scope) : (1)let/const关键字声明 (2) 大括号里面声明
块级变量声明周期 : 从大括号开始 -> 到大括号结束
全局作用域
//1.1 全局作用域 : 在函数外部声明的变量,可以在页面任何地方被访问
var a = 10;//全局变量
let b = 20;//全局变量
function fn() {
console.log(a, b);//10,20
};
fn();
console.log(a, b);//10,20
console.log(window.a);//10
console.log(window.b);//undefined
局部作用域
//1.2 局部作用域 : 在函数里面声明的变量, 只能在函数内部被访问
function fn() {
var a = 10;//局部变量
let b = 20;//局部变量
console.log(a,b);//10,20
};
fn();
console.log(a);//报错 a is not defined
console.log(b);//报错 b is not defined
块级作用域
//1.3 块级作用域 : 在大括号里面 且 使用let声明的变量
if(true){
var a = 10;//全局变量
let b = 20;//块级变量(块级作用域 :只在大括号内部起作用)
console.log(a,b);//10,20
};
console.log(a);//10
// console.log(b);//报错 b is not defined
块级作用域(let)与局部作用域(var)区别
-
相同点
都是只可以在局部被访问。 -
不同点
a. 局部范围不同
局部作用域 : 仅限于 ‘函数体’ 内部声明的变量
块级作用域 : 一切大括号{} 内部使用let/const声明的变量
b. 优先级不同(执行上下文不同)
局部作用域优先级 > 块级作用域 (在函数体大括号内部,无论使用什么关键字声明var/let/const都是局部作用域)
c. 预解析规则不同
var : 显示变量提升。 (在声明前可以访问变量,获取的是undefined)
js编译器在预解析阶段,会把变量的声明提升到当前作用域最顶端,赋值语句还是在原地
let : 隐式变量提升。 (在声明前不可以访问变量,会报错)
变量的声明也会提前,但是不允许被访问
暂时性死区(隐式变量提升)。一旦在当前作用域使用let,则js编译器在预解析阶段会将该变量"绑定"这个作用域,不受任何外部影响