JavaScript作用域

JavaScript作用域

---

了解作用域

• 作用：生效，可以使用

• 域：范围

  • 一个东西可以生效的范围
  • 什么东西？变量（变量名，函数名）
  • 其实就是一个变量可以生效的范围

---

作用域分类

一、全局作用域

• 一个html页面就是一个全局作用域

• 打开页面的时候，作用域就生成了，直到页面关闭为止

二、局部作用域（私有作用域）

• 只有函数生成私有作用域

• 每一个函数就是一个私有作用域

---

作用域的上下级关系

• 全局作用域最大，所有私有作用域都是在全局作用域下面的

• 函数生成的私有作用域，函数写在哪个作用域里面，就是哪个作用域的子集

	// 这个位置就是全局作用域

    function fn() {

      // 这个位置就是 全局作用域的一个叫做 fn 的子级作用域

      function fun() {
        // 这个位置就是 全局下的 fn 私有作用域下的 fun 私有作用域
      }

    }

---

作用域的三大规则（背诵）

• 变量定义规则

• 变量使用规则

• 变量复制规则

定义、使用、赋值 概念

• 定义

  • 有 var 关键字 或者 function 函数名 ( ) { }

	var num           // 定义变量
	function fn() {}  // 定义变量

• 使用

  • 就是当你需要拿到一个变量的值去使用的时候

	console.log(num) // 我要使用 num 的值去打印出来
	1 + num          // 我要使用 num 的值去和 1 进行运算
    var abc = num    // 我要使用 num 的值赋值给 abc

• 赋值

  • 给一个变量进行赋值的操作

    num = 100             // 要把 100 这个值赋给 num 这个变量
	num = function () {}  // 要把 函数 这个值赋给 num 这个变量

一、变量定义规则

• 当你在定义一个变量的时候

• 你把这个变量定义在哪个作用域里面

• 就只有这个作用域及其后代作用域可以使用

• 当前作用域的所有祖先级作用域不能使用

	// 全局作用域里面的变量 a
	var a = 100

    function fn() {

      var b = 200 // fn 私有作用域里面的变量 b

      function fun() {
        var c = 300 // fun 私有作用域里面的变量 c
      }

    }

二、变量使用规则

• 当你需要使用一个变量的时候

• 首先，在自己作用域内部查找

• 如果有：就直接使用，停止查找

• 如果没有，就去上一级作用域查找，有就使用，停止查找

• 如果还没有，就再去上一级作用域查找，有就使用，停止查找

• 直到全局作用域都没有，那么就报错 “变量 is not defined”

	var a = 100

    function fn() {
      var a = 'fn 里面的'
      var b = 200

      function fun() {
        var a = 'fun 里面的 a 变量'
        var b = 'fun 里面的'
        var c = 300

        console.log(d) // 报错：d is not defined
      }

      fun()

    }

    fn()

• 注：分清变量的赋值和访问

  • 赋值：是把一个变量的值给到另外一个变量
    • 赋值时，找到全局都没有就定义一个全局变量
  • 访问：需要拿到某一个变量存储的值来使用
    • 访问时，找到全局都没有就报错
  • 全局不能访问局部，局部可以拿到全局

三、变量赋值规则

• 当你需要给一个变量赋值的时候

• 先在自己作用域内部查找

• 如果有，就给自己作用域内部的变量赋值

• 如果没有，就向上一级查找，如果有就给父级的变量赋值

• 如果还没有，就继续向上查找，直到全局作用域都没有，那么就把这个变量定义为全局变量，再进行赋值

	var a = 100 // 全局 a 变量

    function fn() {

      a = '后来赋值操作'

      console.log(a) // 后来赋值操作

    }

    fn() // 因为 fn 函数的执行, 给全局变量 a 从新进行了赋值操作

    console.log(a)  // 后来赋值操作

	var a = 100 // 全局 a 变量

    function fn() {

      var a = 200 // fn 私有变量 a

      a = '后来赋值操作'

      console.log(a) // 后来赋值操作

    }

    fn() 

    console.log(a)  // 100

---

作用域小案列

 	var a = b = 10 // 这里代码执行完, 全局两个变量, 一个 a 一个 b
    console.log(a) // 10
    console.log(b) // 10
    
    /*
      代码解析
      var a = b = 10
      实际上是三个部分
        1. var a
        2. a = b
        3. b = 10
      等于号(赋值) 的规则是从右往左

      1. 预解析
        var a
      2. 代码执行的时候
        b = 10 // 标准的变量赋值操作, 根据变量赋值规则, 会把 b 定义成全局变量再赋值
        a = b
        console.log(a) // 10
        console.log(b) // 10
    */

	var a = b
    b = 20
    a = 10
    console.log(a)
    console.log(b)
   
   /*
      代码执行过程
      1. 预解析
        var a
        在浏览器里面声明了一个 a 变量可以使用
      2. 代码执行
        b = 20 // 对于变量 b 来说是变量的赋值
        a = b // 对于变量 b 来说, 是变量的使用, 报错:b is not defined, 后面就没有代码了
    */

 	function fn() {
 	  // 如果一个变量在全局和局部都没有被声明过，那么这个变量就会被升级为全局变量
      // 这个 fn 里面没有定义过 a 变量, 这个只是一个单纯的赋值操作
      a = 100 
     
     console.log(a) // 100
    }
    fn()
    console.log(a) // 100

	// 在js中变量没有被声明过也可以使用
	a = 100
    console.log(a) // 100