目录
一、什么是作用域
作用域指一个变量的作用的范围
。通常来说,一段程序代码中所用到的名字并不总是有效和可用
的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑
的局部性,增强了程序的可靠性,减少了名字冲突。
在 JavaScript 中有两种作用域类型:
(1)全局作用域
(2)函数作用域 (局部作用域)
二、作用域
2.1、全局作用域
直接写在
script
标签中的
JavaScript
代码都是全局作用域。当页面打开运行时全局作用域就会自
动创建,而当页面关闭时就会销毁。在全局作用域中有一个全局的
window
对象可以使用,而所
有全局作用域对象都会作为
window
对象的属性来使用。
示例:
<script>
console.log(window);
var a = 10;
console.log(window.a);
function aa() {
console.log('aa')
}
window.aa();
var aaa = {
name: '张三'
}
console.log(window.aaa.name);
</script>
注意:如果这个对象
/
属性
/
方法是
window
的,那么在使用这些对象
/
属性
/
方法时,可以省略 window
的编写。
2.2、函数作用域
作用于函数内的代码环境,就是局部作用域。由于跟函数有关,所以也称为函数作用域。
局部作用域(函数作用域)是在调用函数时才会被创建,函数执行完毕后就自动销毁。同时,每
调用一次函数就会创建一个新的函数作用域,它们之间是相互独立的。
在函数作用域中可以访问全局作用域,而在全局作用域中不能访问函数作用域。当在函数作用域
中使用一个变量时,它会先在自身作用域内查找,如果找到就直接使用,如果没有找到则会向上
一级作用域查找,直到找到全局作用域为止。如果都没有找到则会报错。
示例:
<script>
var age = 18;
function fn() {
var age = 20;
console.log(age); // 20
console.log(this.age); // 18
//console.log(this);
console.log(window.age); // 18
}
window.fn();
</script>
2.3、自动全局作用域
如果您为尚未声明的变量赋值,此变量会自动成为全局变量。
示例:
function fn() {
age = 19;
console.log(age);
}
fn();
console.log(window);
console.log(age);
注意:如果在函数中定义变量时没有指定
var
关键字,那么这个变量会自动提升为全局作
用域的变量。
三、作用域内部原理
作用域内部原理分为
5
个阶段:
(1)
编译阶段
(2)执行阶段
(3)查询阶段
(4)嵌套阶段
(5)异常阶段
3.1、编译阶段
编译过程就是编译器把程序分解成词法单元,将词法单元解析成 AST,再把 AST 转换成机器指 令,等待执行的过程。
3.2、执行阶段
引擎运行代码时首先查找当前的作用域,看
a
变量是否在当前的作用域下,如果是,引擎就会直
接用这个变量;如果否,引擎会继续查找该变量。
如果找到了变量,就会将
2
赋值给当前的变量,否则引擎就会抛出异常。
var a = 2;
console.log(a);
3.3、查询阶段
当变量在赋值操作的左侧时就叫
LHS
(左查询) 查询,出现在右侧时叫
RHS
(右查询) 查询。
var a = 2;// LSH 查询
function add() {
return 2;
}
var b = add(); // RHS 查询
下面以示例进行分析查询过程:
function fn(a) {
console.log(a);
}
fn(1);
查询过程:
(1)fn()
:会对
fn
函数对象进行
RHS
查询;
(2)
函数传参
a = 1
,对变量
a
进行
LSH
查询;
(3)console.log(a)
:对
console
对象进行
RHS
查询,并检查是否有
log()
方法;
(4)console.log(a)
:对变量
a
进行
LHS
引用,并把的值传给
log()
方法。
3.4、嵌套阶段
下面以一个例子来说明作用域变量的查找机制。
function fn(a) {
console.log(a + b);
}
var b = 2;
fn(4);
3.5、异常阶段
function fn(a) {
a = b; // b is not defined
}
fn(2);
function fn2() {
var b = 0;
b(); // b is not a function
}
fn2();
function fn3() {
a = 1;
}
fn(); // 如果不先执行这名,会报 a is not defined
案例分析:
function fn(a) {
console.log(a);
}
fn(2);
首先引擎会对
fn
进行
RHS
查询,找到后返回执行,然后对
a
进行
LHS
引用查询,找到后把 2
对其进行赋值。接下来对
console
进行
RHS
引用查询,由于
console
是内置对象, 能够成功找到,然后在 console
中
RHS
引用查询
log()
方法,找到后执行这个方法,最后RHS 引用查询变量
a
,由于在函数作用域中能够查找到,因此进行
RHS
引用查询并输出。
四、词法作用域
词法作用域是指在当前作用域下的所有声明的标识符。
function fn(a) {
var b = a * 2;
function bar(c) {
console.log(a, b, c);//2 4 12
}
bar(b * 3);
}
fn(2);
五、遮蔽效应
作用域查找从运行时所处的最内部作用域开始,逐级向上进行查找,直到遇到第一个匹配的标识
符为止。
在多层的嵌套作用域可以定义同名的标识符,这就叫做遮蔽效应。
<script>
var a = 0;
function fn() {
var a = 1;
console.log(a);
}
fn();
</script>
说明:从上面代码运行结果可以得到:局部变量
a
遮蔽了全局变量
a
(或者叫覆盖了全局变
量),这种情况就叫遮蔽效应。