面试官：说说你对Javascript中作用域的理解?

雨点打透心脏的1/2处 2022-10-30 15:21 228阅读 0赞

![format_png][]

## 一、作用域 ##

作用域，即变量（变量作用域又称上下文）和函数生效（能被访问）的区域或集合

换句话说，作用域决定了代码区块中变量和其他资源的可见性

举个例子

function myFunction() {
        let inVariable = "函数内部变量";
    }
    myFunction();//要先执行这个函数，否则根本不知道里面是啥
    console.log(inVariable); // Uncaught ReferenceError: inVariable is not defined

上述例子中，函数`myFunction`内部创建一个`inVariable`变量，当我们在全局访问这个变量的时候，系统会报错

这就说明我们在全局是无法获取到（闭包除外）函数内部的变量

我们一般将作用域分成：

*  全局作用域
 *  函数作用域
 *  块级作用域

### 全局作用域 ###

任何不在函数中或是大括号中声明的变量，都是在全局作用域下，全局作用域下声明的变量可以在程序的任意位置访问

// 全局变量
    var greeting = 'Hello World!';
    function greet() {
      console.log(greeting);
    }
    // 打印 'Hello World!'
    greet();

### 函数作用域 ###

函数作用域也叫局部作用域，如果一个变量是在函数内部声明的它就在一个函数作用域下面。这些变量只能在函数内部访问，不能在函数以外去访问

function greet() {
      var greeting = 'Hello World!';
      console.log(greeting);
    }
    // 打印 'Hello World!'
    greet();
    // 报错：Uncaught ReferenceError: greeting is not defined
    console.log(greeting);

可见上述代码中在函数内部声明的变量或函数，在函数外部是无法访问的，这说明在函数内部定义的变量或者方法只是函数作用域

### 块级作用域 ###

ES6引入了`let`和`const`关键字,和`var`关键字不同，在大括号中使用`let`和`const`声明的变量存在于块级作用域中。在大括号之外不能访问这些变量

{
      // 块级作用域中的变量
      let greeting = 'Hello World!';
      var lang = 'English';
      console.log(greeting); // Prints 'Hello World!'
    }
    // 变量 'English'
    console.log(lang);
    // 报错：Uncaught ReferenceError: greeting is not defined
    console.log(greeting);

## 二、词法作用域 ##

词法作用域，又叫静态作用域，变量被创建时就确定好了，而非执行阶段确定的。也就是说我们写好代码时它的作用域就确定了，`JavaScript` 遵循的就是词法作用域

var a = 2;
    function foo(){
        console.log(a)
    }
    function bar(){
        var a = 3;
        foo();
    }
    n()

上述代码改变成一张图

![format_png 1][]

由于`JavaScript`遵循词法作用域，相同层级的 `foo` 和 `bar` 就没有办法访问到彼此块作用域中的变量，所以输出2

## 三、作用域链 ##

当在`Javascript`中使用一个变量的时候，首先`Javascript`引擎会尝试在当前作用域下去寻找该变量，如果没找到，再到它的上层作用域寻找，以此类推直到找到该变量或是已经到了全局作用域

如果在全局作用域里仍然找不到该变量，它就会在全局范围内隐式声明该变量(非严格模式下)或是直接报错

这里拿《你不知道的Javascript(上)》中的一张图解释：

把作用域比喻成一个建筑，这份建筑代表程序中的嵌套作用域链，第一层代表当前的执行作用域，顶层代表全局作用域

![format_png 2][]

变量的引用会顺着当前楼层进行查找，如果找不到，则会往上一层找，一旦到达顶层，查找的过程都会停止

下面代码演示下：

var sex = '男';
    function person() {
        var name = '张三';
        function student() {
            var age = 18;
            console.log(name); // 张三
            console.log(sex); // 男 
        }
        student();
        console.log(age); // Uncaught ReferenceError: age is not defined
    }
    person();

上述代码主要主要做了以下工作：

*  `student`函数内部属于最内层作用域，找不到`name`，向上一层作用域`person`函数内部找，找到了输出“张三”
 *  `student`内部输出cat时找不到，向上一层作用域`person`函数找，还找不到继续向上一层找，即全局作用域，找到了输出“男”
 *  在`person`函数内部输出`age`时找不到，向上一层作用域找，即全局作用域，还是找不到则报错

面试官JavaScript系列正在更新：8/33

[面试官：谈谈 JavaScript 中的类型转换机制][JavaScript]

[面试官：== 和 ===区别，分别在什么情况使用？][Link 1]

[面试官：深拷贝浅拷贝的区别？如何实现一个深拷贝？][Link 2]

[面试官：说说你对闭包的理解？闭包使用场景?][Link 3]

[@同学你好，前端语音社群给你派发了一份开工利是][Link 4]

篇副有限，扫下方二维码查看往期

![format_png 3][]

[format_png]: /images/20221024/0321514faca54a7cb08bbda7c50b9b54.png
[format_png 1]: /images/20221024/aa81d7c87b674e13a8a29ef5758a988d.png
[format_png 2]: /images/20221024/c9fe8bfaebaf406fb5dee6760bb0b612.png
[JavaScript]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10cac0cb6743d68b8e9d057cabc31e71d12dbacd6e9270c9491a96128ea8a7c6cd7dfd50ad&idx=2&mid=2247485590&scene=21&sn=57ed26681ff87e881772b040ce06e006#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10ca92cb6743841f718fdcba9f816cd40db17d2c52b7697473f11064509ed8b7b881181838&idx=1&mid=2247485636&scene=21&sn=6e74b10bb37d668c29ba94875e878ab2#wechat_redirect
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10ca80cb674396a700986921b539124eedae7e0b4538dda46f4743719cfda64c62049d9b30&idx=1&mid=2247485654&scene=21&sn=75ac1fe9e0b702367accca477caa61df#wechat_redirect
[Link 3]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10cab6cb6743a082c677e31892d007454f0868f71eef815524a0faa425379ee6d2b85e0445&idx=1&mid=2247485664&scene=21&sn=4d7169d22bce23083b9137ff356ea19a#wechat_redirect
[Link 4]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10cab1cb6743a70747d74e10d6fa12fb7682b91945376c08a60e318ff3eac1b0f4e1e0dc53&idx=1&mid=2247485671&scene=21&sn=6e5d91964a09edc22944bdc273cc9bd1#wechat_redirect
[format_png 3]: /images/20221024/c2a5ae7ada8442a9adce78bd2c57ef3e.png