Skip to content

Latest commit

 

History

History
128 lines (90 loc) · 4.18 KB

JS 作用域和作用域链.md

File metadata and controls

128 lines (90 loc) · 4.18 KB
Raw

JS 作用域和作用域链

作用域

JavaScript 中的作用域是我们可以有效访问变量或函数的区域。作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。

JavaScript 有两种类型的作用域：全局作用域、局部作用域。局部作用域又可以分为：函数作用域、块作用域（ES6）和其他更具体的作用域。

全局作用域

let age = 18

function foo() {
  // 不是嵌套函数
  // 函数内部可以访问函数外部变量
  return age
}

foo() // 18

函数作用域

function text() {
  var age = 18
}

// 函数外部访问不到函数内部变量
console.log(age) // ReferenceError

块作用域

{
  let age = 18
}

// let、const 关键字声明的变量，只在其所在的代码块 {} 内有效。
console.log(age) // error

词法作用域和动态作用域

词法作用域是在定义时确定的，它关注函数在何处声明。

动态作用域是在运行时确定的（this 也是），它关注函数从何处调用（常与 this 挂钩）。

JavaScript 采用的是词法作用域，又称静态作用域。下面我们来看看示例：

var value = 1

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

function bar() {
  var value = 2
  foo()
}

bar() // 1

分析：

如果是词法作用域，调用 foo 函数时，会先在其内部作用域中查找，如果找不到，往上一层查找，找到了 value，结果为 1。

如果是动态作用域，调用 foo 函数时，同样会先在其内部作用域中查找，如果找不到，会到调用 foo 函数的作用域中查找（这里是 bar），结果为 2。

作用域链

一般情况下，变量取值应到创建这个变量的函数的作用域中取值。如果在当前作用域找不到，向上级作用域查找，直到全局作用域，这么一个查找过程形成的链条就叫做作用域链。

  1. 每当编译器遇到变量或对象时，它都会遍历当前执行上下文的整个作用域链（Scope chain），以查找它。
  2. 如果没有在那里找到它，它遍历原型链（prototype chain），如果它也没有找到，它会抛出未定义的错误。
  3. 编译器通过查看函数在代码中的位置来创建函数的作用域。
  4. 编译器创建称为作用域链（Scope chain） 的等级层次结构，全局作用域（Global Scope） 位于此层次结构的顶部。
  5. 当代码中使用变量时，编译器会向后查看作用域链，如果找不到，则抛出未定义的错误。

来看一下下面两道题：

var name = 'O.O'

;(function () {
  if (typeof name == 'undefined') {
    name = 'D.O'
    console.log('Goodbye ' + name)
  } else {
    console.log('Hello ' + name)
  }
})()

// Hello O.O

首先进入函数作用域当中，判断是否存在 name 属性，然而 JS 解析器发现在当前作用域中并没有找到 name 属性，接着会通过作用域链找到最外层，得到 name 属性，最后执行 else 的内容，得到 Hello O.O。

看下面这一道：

var name = 'O.O'

;(function () {
  if (typeof name == 'undefined') {
    var name = 'D.O'
    console.log('Goodbye ' + name)
  } else {
    console.log('Hello ' + name)
  }
})()

// Goodbye O.O

仔细看一下，你会发现在立即执行函数中，name 变量前使用了 var 变量声明，它存在一个变量提升，name 属性会提升到当前作用域的最顶部，但不会提升赋值，在 if 语句判断时，name 属性暂时没有赋值的情况下为 undefined，所以打印 Goodbye O.O。

更多资料