js--高级JavaScript之作用域

素颜马尾好姑娘i 2021-09-27 04:24 347阅读 0赞

# 前言 #

前面的博客基本上已经将JavaScript的基础知识介绍完毕，现在开始总结一些更高端一点的JavaScript技术。这篇博客就从作用域、作用域链这方面来介绍。

# 内容 #

所谓作用域就是指代码有效的区域

> 常常使用某些设计模式起到封装作用，因为变量容易被替换，所以我们的js代码就不安全，在我们实际使用的时候，应该杜绝使用全局变量，这个时候就用到了设计模式，大家统称`沙箱模式`

## JavaScript高级之词法作用域和作用域链 ##

### 主要内容： ###

1.  分析JavaScript的词法作用域的含义
2.  解析变量的作用域链
3.  变量名提升时什么

### 一、关于块级作用域 ###

说到JavaScript的变量作用域，与咱们平时使用的类C语言不同.  
例如C\#中下面代码：

static void Main(string[] args)
    {
        if(true)
        {
            int num = 10;
        }
        System.Console.WriteLine(num);
    }

这段代码如果进行编译，是无法通过的，因为”当前上下文中不存在名称num”. 因为这里变量的作用域是由花括号限定的，称为块级作用域. 在块级作用域下，所有的变量都在定义的花括号内，从定义开始到花括号结束这个范围内可以使用. 出了这个范围就无法访问. 也就是说代码

if(true)
    {
        int num = 10;
        System.Console.WriteLine(num);
    }

这里可以访问，因为变量的定义与使用在同一个花括号内.但是在JavaScript中就不一样，JavaScript中没有块级作用域的概念.

### 二、JavaScript中的作用域 ###

在JavaScript中，下面代码：

if(true) {
        var num = 10;
    }
    alert(num);

运行的结果是弹窗10. 那么在JavaScript中变量的作用范围是怎么限定的呢？

#### 2.1 函数限定变量作用域 ####

在JavaScript中，只有函数可以限定一个变量的作用范围. 什么意思呢？  
就是说，在JavaScript中，在函数里面定义的变量，可以在函数里面被访问，但是在函数外无法访问. 看如下代码：

var func = function() { 
        var num = 10;
    };
    try {
        alert(num);
    } catch ( e ) {
        alert( e );
    }

这段代码运行时，会抛出一个异常，变量num没有定义. 也就是说，定义在函数中的变量无法在函数外使用，当然在函数内可以随意的使用， 即使在赋值之前. 看下面代码：

var func = function() { 
        alert(num);
        var num = 10;
        alert(num);
    };
    try {
        func();
    } catch ( e ) {
        alert( e );
    }

这段代码运行后，不会抛出错误，弹窗两次，分别是 undefined 和 10. 从这里可以看得出，变量只有在函数中可以被访问. 同理在该函数中的函数也可以访问.

#### 2.2 子域访问父域 ####

前面说了，函数可以限定变量的作用域，那么在函数中的函数就成为该作用域的子域. 在子域中的代码可以访问到父域中的变量. 看下面代码：

var func = function() { 
        var num = 10;
        var sub_func = function() { 
                alert(num);
        };
        sub_func();
    };
    func();

这段代码执行得到的结果就是 10. 可以看到上文所说的变量访问情况. 但是在子域中访问父域的代码也是有条件的. 如下面代码：

var func = function() { 
        var num = 10;
        var sub_func = function() { 
            var num = 20;
            alert(num);
        };
        sub_func();
    };
    func();

这段代码比前面就多了一个”var num = 20;”，这句代码在子域中，那么子域访问父域的情况就发生了变化，这段代码打印的结果是 20. 即此时子域访问的num是子域中的变量，而不是父域中的. 由此可见访问有一定规则可言. 在JavaScript中使用变量，JavaScript解释器首先在当前作用域中搜索是否有该变量的定义，如果有，就是用这个变量；如果没有就到父域中寻找该变量. 以此类推，直到最顶级作用域，仍然没有找到就抛出异常”变量未定义”. 看下面代码：

(function() { var num = 10; (function() { var num = 20; (function(){ alert(num); })() })(); })();

这段代码执行后打印出20. 如果将”var num = 20;”去掉，那么打印的就是10. 同样，如果再去掉”var num = 10”，那么就会出现未定义的错误.

### 三、作用域链 ###

有了JavaScript的作用域的划分，那么可以将JavaScript的访问作用域连成一个链式树状结构. JavaScript的作用域链一旦能清晰的了解，那么对于JavaScript的变量与闭包就是非常清晰的了. 下面采用绘图的办法，绘制作用域链.

#### 3.1 绘制规则： ####

1.  作用域链就是对象的数组
2.  全部script是0级链，每个对象占一个位置
3.  凡是看到函数延伸一个链出来，一级级展开
4.  访问首先看当前函数，如果没有定义往上一级链检查
5.  如此往复，直到0级链

#### 3.2 举例 ####

看下面代码：

下面分析一下这段代码：  
**eg1.**  
\-> 首先整段代码是一个全局作用域，可以标记为0级作用域链，那么久有一个数组  
var link\_0 = \[ num, func1, func2 \];// 这里用伪代码描述  
\-> 在这里func1和func2都是函数，因此引出两条1级作用域链，分别为  
var link\_1 = \{ func1: \[ num, func2 \] \};// 这里用伪代码描述  
var link\_1 = \{ func2: \[ num, func3 \] \};// 这里用伪代码描述  
\-> 第一条1级链衍生出2级链  
var link\_2 = \{ func2: \[ num \] \};// 这里用伪代码描述  
\-> 第二条1级链中没有定义变量，是一个空链，就表示为  
var link\_2 = \{ func3: \[ \] \};  
\-> 将上面代码整合一下，就可以将作用域链表示为：  
// 这里用伪代码描述

var link = [ // 0级链
        num,
            { func1 : [// 第一条1级链
                num,
                    { func2 : [// 2级链
                        num
                        ] } ]}, { func2 : [// 第二条1级链
                num,
            { func3 : [] } ]} ];

**eg2.**

![这里写图片描述][70]  
1. 在script中表示第一个作用域练，我将其称为0链  
2. 凡是在该作用域链中的变量都是一个按照顺序存放的数组  
3. 如果有函数，表示在这个位置引出的第二个链，我记为1链  
4. 一次类推得到2链、3连  
5. 在js中变量的访问规则  
○ 丶 首先在当前作用于链中找是否存在这个变量，如果存在，直接使用这个变量  
○ 丶 如果不存在，那么向上移级别（2链找1链）寻找该变量，也是在上一个作用域链中寻找，那么找到就使用  
○丶 如果没有就继续向上找，直到第0链，还没有就抛异常

> 注意：  
> 如第二个例子，将链式的图用js代码表现出来，再有高亮显示的时候就非常清晰了. 有了这个作用域链的图，那么就可以非常清晰的了解访问变量是如何进行的：  
> 在需要使用变量时，首先在当前的链上寻找变量，如果找到就直接使用，不会向上再找；如果没有找到，那么就向上一级作用域链寻找，直到0级作用域链. 如果能非常清晰的确定变量所属的作用域链的级别，那么在分析JavaScript代码与使用闭包等高级JavaScript特性的时候就会非常容易(至少我是这样哦).

### 四、变量名提升与函数名提升 ###

有了作用域链与变量的访问规则，那么就有一个非常棘手的问题. 先看下面的JavaScript代码:

var num = 10;
    var func = function() { 
        alert(num);
        var num = 20;
        alert(num);
    };
    func();

执行结果会是什么呢？你可以想一想，我先不揭晓答案.先来分析一下这段代码. 这段代码中有一条0级作用域链，里面有成员num和func. 在func下是1级作用域链，里面有成员num. 因此在调用函数func的时候，就会检测到在当前作用域中变量num是定义过的，所以就会使用这个变量. 但是此时num并没有赋值，因为代码是从上往下运行的. 因此第一次打印的是 ndefined，而第二次打印的便是20. 你答对了么？

像这样将代码定义在后面，而在前面使用的情况在JavaScript中也是常见的问题. 这时就好像变量在一开始就定义了一样，结果就如同下面代码：

var num = 10;
    var func = function() { 
        var num;// 感觉就是这里已经定义了，但是没有赋值一样
        alert(num);
        var num = 20;
        alert(num);
    };
    func();

那么这个现象常常称为变量名提升. 同样也有函数名提升这一说. 如下面代码：

好了，这段代码结果如何？或则应该有什么不一样，我先不说没留着读者思考吧!下一篇再做解答.  
由于有了这些不同，因此在实际开发的时候，推荐将变量都写在开始的地方，也就是在函数的开头将变量就定义好，类似于C语言的规定一样. 这个在js库中也是这么完成的，如jQuery等.

### 五、小结 ###

好了这篇文章主要是说明JavaScript的词法作用域是怎么一回事儿，以及解释如何分析作用域链，和变量的访问情况，最后留再一个练习收尾吧！！！  
看下面代码执行结果是什么：

if(! "a" in window) {
        var a = "定义变量";
    }
    alert(a);

# 总结 #

看完这篇博客之后，应该能对作用域和作用域链有一些了解了吧，如果需要更详细的了解这方面的知识，可以购买基本相关类型的书看看。

# end #

谢谢您的阅读！

[70]: /images/20210923/a34b6b33a0844aa88e0df54c89b2dd57.png