什么是JavaScript作用域、作用域链?

·  阅读 335
什么是JavaScript作用域、作用域链?

「这是我参与2022首次更文挑战的第14天,活动详情查看:2022首次更文挑战

JavaScript作用域、作用域链也是面试中出镜率很高的问题之一,同时也是JavaScript中最重要的基础概念之一。

今天我们将通过最简单实际的代码来展示函数作用域和全局作用域,在下篇文章中,我们将介绍块级作用域和暂时性死区

作用域基本知识

简单来说,作用域就是用来规定变量的作用范围的,在任何语言当中都会有作用域的概念,在ES6以前,JavaScript只有函数作用域和全局作用域,ES6之后又增加块级作用域。

函数作用域和全局作用域

函数作用域非常简单,比如,执行下面的foo函数,变量a在函数foo的作用域内,所以在函数内可以正常的访问该变量,输出bar

function foo() {
  var a = 'bar'
  console.log(a)
}
foo()
复制代码

对上面代码稍做改动,如下

var a = 'bar'
function foo() {
  console.log(a)
}
foo()
复制代码

执行上面代码时,foo函数在自身的作用域并未找到变量a,但是它还是会向外层扩大范围查找,于是在全局作用域找到了变量a,输出bar

继续对代码进行修改,如下

function bar() {
  var b = 'bar'
}

function foo() {
  console.log(b)
}
foo()
复制代码

上面代码,foo和bar两个函数拥有彼此独立的函数作用域,所以在foo函数中也无法访问bar函数中定义的变量b,其作用域链中(直到最上层的全局作用域中)也并不存在变量b,所以代码会报错Uncaught ReferenceError: b is not defined

简单来说就是,在JavaScript执行某个函数时,如果需要取某个变量的值,就会就近首先在函数内查找变量是否声明赋值,如果函数内无法找到该变量,就跳出当前函数作用域,到上层作用域中进行查找,这里的上层作用域可能是也是一个函数作用域,也可能是全局作用域。

下面来看一个更具体的示例

function bar() {
  var b = 'bar'
  function foo() {
    console.log(b)
  }
  foo()
}
bar()
复制代码

在bar函数内的foo函数执行时,变量b不存在于foo函数内,所以就近在其上层函数bar作用域内寻找,所以最终输出bar

再来看另外一个示例

var b = 'bar'
function bar() {
  function foo() {
    console.log(b)
  }
  foo()
}
bar()
复制代码

执行上面的代码仍然会输出bar,因为执行foo函数时,foo内并未找到变量b,就近在上层bar函数内也未找到,于是最终在全局作用内找到变量b。变量作用域就是这样一层一层相套的关系,逐层寻找,这也就是被称之作用域链的原因。

在下篇文章中,我们将介绍块级作用域和暂时性死区的相关内容。

欢迎我的公众号【小帅的编程笔记】,让自己和他人都能有所收获!

分类:
前端
收藏成功!
已添加到「」, 点击更改