当前位置:

ES6 之 作用域

本文最后更新于2020-01-29,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!

温馨提示:本文共2603个字,读完预计7分钟。

文章目录

什么是作用域?

 

几乎所有编程语言就是在变量中存储值,并且能读取和修改此值。事实上,在变量中存储值和取出值的能力,给程序赋予了状态。
如果没有这样的概念,一个程序虽然可以执行一些任务,但是它们将会受到极大的限制而且不会非常有趣。
但是这些变量该存储在哪,又给如何读取?为了完成这个目标,需要制定一些规则,这个规则就是:作用域。

 

常见的作用域主要分为几个类型:全局作用域、函数作用域、块状作用域、动态作用域。

 

对象 类型
global/window 全局作用域
function 函数作用域(局部作用域)
{} 块状作用域
this 动态作用域

 

[!TIP]
如果一个 变量 或者其他表达式不在 “当前的作用域”,那么 JavaScript 机制会继续沿着作用域链上查找直到全局作用域(global 或浏览器中的 window)如果找不到将不可被使用。 作用域也可以根据代码层次分层,以便子作用域可以访问父作用域,通常是指沿着链式的作用域链查找,而不能从父作用域引用子作用域中的变量和引用

全局作用域

 

变量在函数或者代码块{}外定义,即为全局作用域。不过,在函数或者代码块{}内未定义的变量也是拥有全局作用域的(不推荐)。

 

var carName = ' Volvo'

// 此处可调用 carName 变量
function myFunction() {
  // 函数内可调用 carName 变量
}

 

上述代码中变量 carName 就是在函数外定义的,它是拥有全局作用域的。这个变量可以在任意地方被读取或者修改,当然如果变量在函数内没有声明(没有使用 var 关键字),该变量依然为全局变量。

 

// 此处可调用 carName 变量

function myFunction() {
  carName = 'Volvo'
  // 此处可调用 carName 变量
}

 

以上实例中 carName 在函数内,但是拥有全局作用域,它将作为 global 或者 window 的属性存在。

 

[!Warning]
在函数内部或代码块中没有定义的变量实际上是作为 window/global 的属性存在,而不是全局变量。换句话说没有使用 var 定义的变量虽然拥有全局作用域,但是它是可以被 delete 的,而全局变量不可以。

函数作用域

 

在函数内部定义的变量,就是局部作用域。函数作用域内,对外是封闭的,从外层的作用域无法直接访问函数内部的作用域!

 

function bar() {
  var testValue = 'inner'
}

console.log(testValue) // 报错:ReferenceError: testValue is not defined

 

如果想读取函数内的变量,必须借助 return 或者闭包。

 

function bar(value) {
  var testValue = 'inner'

  return testValue + value
}

console.log(bar('fun')) // "innerfun"

 

这是借助 return 的方式,下面是闭包的方式:

 

function bar(value) {
  var testValue = 'inner'

  var rusult = testValue + value

  function innser() {
    return rusult
  }

  return innser()
}

console.log(bar('fun')) // "innerfun"

 

通俗的讲,return 是函数对外交流的出口,而 return 可以返回的是函数,根据作用域的规则,函数内部的子函数是可以获取函数作用域内的变量的。

 

说到这其实大家会想到嵌套函数的作用域问题,如果 inner 函数再嵌套函数呢?这就涉及到另一个概念:作用域链。
其实不难理解作用域链是什么,因为你可以按照原型链那样去理解。任何一个作用域链都是一个堆栈,首先先把全局作用域压入栈底,再按照函数的嵌套关系一次压入堆栈。在执行的时候就按照这个作用域链寻找变量。

 

块状作用域

 

在其他编程语言中,块状作用域是很熟悉的概念,但是在 JavaScript 中不被支持,就像上述知识一样,除了全局作用域就是函数作用域,一直没有自己的块状作用域。在 ES6 中已经改变了这个现象,块状作用域得到普及。关于什么是块,只要认识 {} 就可以了。

 

if (true) {
  let a = 1
  console.log(a)
}

 

在这个代码中, if 后 {} 就是“块”,这个里面的变量就是拥有这个块状作用域,按照规则,{} 之外是无法访问这个变量的。

 

ES6 中的 Let

 

动态作用域

 

在 JavaScript 中很多同学对 this 的指向时而清楚时而模糊,其实结合作用域会对 this 有一个清晰的理解。不妨先来看下这段代码:

 

window.a = 3
function test() {
  console.log(this.a)
}

test.bind({ a: 2 })() // 2
test() // 3

 

在这里 bind 已经把作用域的范围进行了修改指向了 { a: 2 },而 this 指向的是当前作用域对象,是不是可以清楚的理解了呢?

 

接下来我们再思考另一个问题:作用域是在代码编写的时候就已经决定了呢,还是在代码执行的过程中才决定的?

 

var carName = ' Volvo'

// 此处可调用 carName 变量
function myFunction() {
  // 函数内可调用 carName 变量
}

 

在看看这段代码,写代码的时候就知道 carName 就是全局作用域,函数内部的用 var 定义的变量就是函数作用域。这个也就是专业术语:词法作用域。
通俗的讲变量的作用域是在定义时决定而不是执行时决定,也就是说词法作用域取决于源码,通过静态分析就能确定,因此词法作用域也叫做静态作用域。
相反,只能在执行阶段才能决定变量的作用域,那就是动态作用域。

 

function foo() {
  console.log(a)
}

function bar() {
  var a = 3
  foo()
}

var a = 2

bar()

 

为什么会这样?

 

因为当 foo() 不能为 a 解析出一个变量引用时,它不会沿着嵌套的(词法)作用域链向上走一层,而是沿着调用栈向上走,以找到 foo() 是 从何处 被调用的。因为 foo() 是从 bar() 中被调用的,它就会在 bar() 的作用域中检查变量,并且在这里找到持有值 3 的 a。

 

本文链接:,转发请注明来源!

猜您还喜欢

评论已关闭。