JavaScript语法函数高级之作用域与作用域链

78 阅读 0 评论 52 点赞

我是靠谱客的博主优秀鞋垫，最近开发中收集的这篇文章主要介绍JavaScript语法函数高级之作用域与作用域链，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、作用域

1、理解作用域
1) 就是一块”地盘”, 一个代码段所在的区域
2) 它是静态的(相对于上下文对象), 在编写代码时就确定了

2、作用域定义：

广义上来说：
作用域是负责收集并维护由所有声明的标识符（变量）组成的一系列查询，并实施一套非常严格的规则，确定当前执行的代码对这些标识符的访问权限
狭义上来说：
作用域是程序代码中定义的一个区域,其控制着变量与参数的可见性及生命周期
总结：
作用域与变量的读取跟存储有着密不可分的联系。
作用域本质是一套规则，用来规范变量的查询。

3、作用域的作用： 隔离变量，不同作用域下同名变量不会有冲突
4、作用域分类：全局作用域、函数作用域和块级作用域({}，ES6新增)
这里写图片描述
5、作用域如何确定：静态编译（代码编写时）时已经确定。
6、如何确定作用域的个数？

n+1
n:函数的定义次数；
1：全局作用域

7、window挂载
在全局作用域下声明的变量和函数自动挂载在window。


var a = 1;
console.log(window.a);

window的作用：BOM挂载对象 ECMAS顶层对象

<!--
作用域：
定义：作用域本质是一套规则，用来规范变量的查询。
作用域分类：
全局作用域
函数作用域
范围如何确定？
静态编译（代码编写时）时已经确定。
如何确定作用域的个数？
n+1
n:函数的定义次数；
1：全局作用域
作用域变量查询
左查询：出现在等号左边的查询；
在整条作用域链中没有找到变量的声明，引擎会在全局作用域中自动声明。
右查询：出现在等号非左边的查询；
在整条作用域链中没有找到变量的声明就会报错。
注意：形参查询属于右查询，封闭在自己的作用域内部。function(b)~=function(var b)
-->
<script type="text/javascript">
function wrap() {
var c = "局部";
console.log(b);
console.log(c);
}
function wrap1(d) {
console.log(d);
//
console.log(c);
}
var a = 1,
b = "全局";
wrap();
wrap1(2);
console.log(a);
//在全局作用域下声明的变量和函数自动挂载在window。
/* window的作用：BOM挂载对象
ECMAS顶层对象*/
console.log(window.a);
//
console.log(c);
</script>

二、作用域链

1、理解作用域链
1)多个上下级关系的作用域形成的链, 它的方向是从下向上的(从内到外)。
2) 查找变量时就是沿着作用域链来查找的。

总结： 多个上下级关系的作用域形成的链, 它的方向是从下向上的(从内到外)

<!--
作用域链：
多个上下级关系的作用域形成的链, 它的方向是从下向上的(从内到外)
变量查找规则：
1. 在当前作用域下的执行上下文中查找对应的属性, 如果有直接返回, 否则进入上一级
2. 在上一级作用域的执行上下文中查找对应的属性, 如果有直接返回, 否则进入上一级
3. 直到全局作用域, 如果还找不到就抛出找不到的异常
-->
<script type="text/javascript">
var a = 1;
(function wrap() {
var b = 2;
//
console.log(a)
function inner() {
var c = 3;
function inner_1() {
var d = 4;
function inner_2() {
var e = 5;
function inner_3() {
var f = 6;
console.log(f);
console.log(e);
console.log(d);
console.log(c);
console.log(b);
console.log(a);
//
console.log(g);
}
return inner_3();
}
return inner_2();
}
return inner_1();
}
return inner();
})()
</script>

三、作用域变量查询

1、左右查询
左查询：出现在等号左边的查询；
在整条作用域链中没有找到变量的声明，引擎会在全局作用域中自动声明。
右查询：出现在等号非左边的查询；
在整条作用域链中没有找到变量的声明就会报错。
注意：形参查询属于右查询，封闭在自己的作用域内部。


function(b)相当于function(var b)

2、左查询&右查询的区别
如果整条作用域都没有找到对应变量的申明；
左查询：在全局作用域自动申明一份。
右查询：报错。

3、变量查找规则：
1)在当前作用域下的执行上下文中查找对应的属性, 如果有直接返回, 否则进入上一级
2) 在上一级作用域的执行上下文中查找对应的属性, 如果有直接返回, 否则进入上一级
3) 直到全局作用域, 如果还找不到就抛出找不到的异常

四、使用细节和注意事项

1、变量声明的注意点
var a=b=2;相当于 var a=2;b=2;

<script type="text/javascript">
var a=1,b=1;
var c=d=2;//var c=2;d=2;
var e,f=3;
g=5;
function wrap(){
var c=d=4;// d的作用域提升为全局作用域
}
wrap();
console.log(a);//1
console.log(b);//1
console.log(c);//2
console.log(d);//4
console.log(e);//underfined
console.log(f);//3
console.log(g);//5
</script>