谈JavaScript作用域和变量使用规则

谈JavaScript作用域和变量使用规则

什么是作用域呢？我们为什么要谈作用域？

作用域简单来说就是一个变量可以生效的范围，我们只有了解作用域才能合理地去使用变量。

在JavaScript中，作用域分为两种，一种是局部作用域，一种是全局作用域。

全局作用域

• 全局作用域是最大的作用域
• 在全局作用域中定义的变量可以在任何地方去使用
• 浏览器页面打开的时候，会自动给我们生成一个全局作用域window
• 作用域一直会存在，直到页面关闭的时候会销毁
• 我们在浏览器控制台能够访问的变量都是全局作用域

局部作用域

• 局部作用域就是在全局作用域底下开辟出来的一个小作用域

• 在局部作用域中定义的变量只能在这个局部地区可以使用，不能越界

• 在JavaScript中只有函数能够生成一个局部作用域，别的都不行

• 每一个函数，都是一个局部作用域

  var name=100
  function fn(){
  	//下面这个变量就是一个fn 局部作用域内部的变量
  	//只能在fn 函数内部去使用
  	var name2=200
  }
  console.log(name)//100
  console.log(name2)//错误 name2 is not defined 说明name2连声明都出不去
  

有了前面的知识，我们来谈一下变量的使用规则

变量的使用规则分为两种：访问规则和赋值规则

访问规则—

• 当我们想获取这个变量的值的时候，我们管这个就叫做访问规则

• 获取变量的规则

• 变量的访问机制也叫作用域的查找机制，只能向上找，不能向下找

  首先，在自己的作用域内部查找，如果有，就直接拿来使用

  如果没有，就去上一级作用域寻找，再没有，再去上一级查找，以此类推。

  如果一直到全局作用域都没有这个变量，那么就会直接报错(该变量 is not defined)

  var num=100
  function fn(){
      var name2=200
      function fun(){
          var name3=300
          console.log(name3)//300
          console.log(name2)//200
          console.log(num)//100
          console.log(a)//报错
          
      }
  }
  

赋值规则

• 当你想给一个变量赋值的时候，那么就先要找到这个变量，再给他赋值

• 变量赋值规则：

  • 先在自己作用域内部查找，有就直接赋值
  • 没有就去上一级作用域内部查找
  • 还没有再去上一级
  • 如果一直到全局作用域都没有，那么就把这个变量定义为全局变量，再给他赋值

  function fn(){
  	num=100	
  }
  fn()
  // fn 调用以后，要给 num 赋值
  // 查看自己的作用域内部没有 num 变量
  // 就会向上一级查找
  // 上一级就是全局作用域，发现依旧没有
  // 那么就会把 num 定义为全局的变量，并为其赋值
  // 所以 fn() 以后，全局就有了一个变量叫做 num 并且值是 100
  console.log(num) // 100