前端面试题目解析

说说你对作用域链的理解

2021-09-04  本文已影响0人  JerisonPaul

一、作用域

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

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

举个例子

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()

上述代码改变成一张图

1.png

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

三、作用域链

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

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

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

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

2.png

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

下面代码演示下：

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();

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

作用域链详解

函数在执行的时候会创建一个执行环境作用域链，这个执行环境作用域链是怎么创建的呢?

首先函数在定义的时候，会把父函数的执行环境作用链保存到[[scope]]属性里，这个[[scope]]是一个数组，里面的元素是变量对象，

什么是变量对象?

函数在执行的时候，会初始化一个变量对象，这个变量对象一开始的属性只有arguments,随着函数内部代码的执行，会把声明的变量，当作属性添加到变量对象里面，

并且初始化变量对象后会把变量对象插入到作用域链的最前端，就是数组的最前面，

在函数内部获取变量的值时，会去作用链里查找，如果第一个变量对象有对应的属性就直接获取，没有的话就去查找下一个变量对象，直到找到全局变量对象为止，全局变量对象其实就是window对象，如果找不到，就报错，说明当前变量没有定义.

所以如果一个函数内部又定义了一个函数，以下简称父函数和子函数，父函数外部是全局作用域，

重点分析一下子函数的作用域链

子函数创建的时候，正是父函数在执行的时候，父函数执行的时候会创建一个执行环境作用域链，这个作用链会包含两个变量对象，一个是父函数变量对象，里面保存了当前父函数声明的变量,一个是全局变量对象就是window对象

子函数创建时会把父函数执行时的作用域链保存在[[scope]]属性里，

子函数执行的时候，会复制自己的[[scope]]属性创建作用域链，然后在作用域链的最前端插入自己的变量对象,那么子函数的作用域链里就有三个变量对象，分别是自己的变量对象，父函数变量对象，全局变量对象.

闭包 是指有权访问父函数变量对象的函数，所以如果一个函数执行返回另一个子函数，那这个子函数因为是在函数内部创建的，所以返回的这个函数的[[scope]]里会保存有父函数的变量对象，

因为js垃圾回收是通过标记清除方法，回收没有使用的变量的内存的，如何判断一个变量没有使用是通过从根对象就是window对象向下遍历，如果找不到这个变量就说明这个变量不可达，就是可以回收

也就是说如果这个子函数变量不设置为null的话，因为子函数的[[scope]]属性里保存了父函数的变量对象，导致父函数的变量对象具有可达性，所以如果子函数可访问，那么父函数的变量对象会因为可达性导致垃圾回收器无法进行回收处理

所以闭包使用的多了，会导致内存泄露问题，就是因为太多的父函数变量对象无法回收导致的

上一篇下一篇

猜你喜欢

热点阅读