谈谈作用域和作用域链

南山隐士 2022年06月25日 23 0

作用域

作用域您可以理解成它是存放代码的地方,它决定了变量和对象的可访问范围

作用域分为全局作用域局部作用域

全局作用域

只要能在任何地方都可以访问到并且使用它,那么该对象或者变量就具有全局作用域的特征

只要具有全局作用域特征的变量和对象,其实就是在window对象当中添加对应的变量和方法

function name () {
  var yaojin = '遥近'
  console.log(name)
  function showAge() {
    console.log(age) // 全局作用域下哪里都可以访问
    console.log(name)
  }
  showAge()
}
var age = 18
console.log(window.name) // 全局作用域下的函数
console.log(window.age)// 全局作用域下的变量
name()

从上面的代码中您可以看到,我在函数的内部再次打印外层的函数,也是可以访问到的,并且通过window读取对应的函数和变量也是可以访问到的,这就是全局作用域的特征

局部作用域

局部作用域跟全局恰恰相反了,它只会在特定的区域才可以访问到,而局部作用域又可以细分为函数作用域块级作用域(ES6提出的)

  1. 函数作用域

函数作用域,顾名思义就是只有在函数中有效,在函数定义的变量和函数只有在函数内部能访问,在全局中无法访问,除非通过 闭包 的形式

function name () {
  var yaojin = '遥近'
  console.log(yaojin) // 函数作用域下的变量全局没法访问
}	
name()
console.log(yaojin) // 报错
console.log(address) // 报错

我们可以看到在局部作用域下的变量和函数不是在任何地方都可以访问到的,这就是全局跟局部最大的区别

  1. 块级作用域

ES6提出新的let和const命令,这样使我们可以创建出块级作用域,通过let和const定义的变量和对象,它会限制该变量或对象的作用域只在的当前的代码块中有效,通过花括号包裹着的就属于一个块,并且不会存在 变量的提升

function name () {
   console.log(yaojin) // 报错
   function test () {
       console.log(yaojin1) // 报错了
   }
   test()
   let yaojin1 = 'yaojin2070' // 变量不会存在提升
}
const yaojin = 'yaojin'// 变量不会提升
name()

:::tip
作用域的作用就是为了隔离变量,不同的作用域下只能访问特定的变量,避免变量的滥用
:::

作用域链

作用域链就是多个作用域组成的,是由内到外形成的链式结构,它的作用是查找变量的一个规则

var yaojin = '遥近'
  function check () {
  function check1 () {
	  console.log(yaojin) // 通过作用域链最终在全局中找到,打印遥近
  }
  check1()
}
check()

作用域的查找规则就是,先会从自身的作用域中寻找,如果没有找到,就会从上一层作用域查找,最终到了全局作用域中还是找不到,就会报错

Last Updated: 2022/06/25 18:57:11
了解语法糖 Array方法小汇总