js作用域详解

作用域分类

（1）全局作用域
一个 html 页面就是一个全局作用域
打开页面的时候, 作用域就生成了, 直到关闭页面为止
（2）局部作用域(私有作用域)
只有函数生成私有作用域
每一个函数就是一个私有作用域

作用域的上下级关系
全局作用域最大, 所有的私有作用域都是再全局作用域下面的
函数生成的私有作用域, 函数写在那个作用域里面
就是哪个作用域的子级.

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

    function fn() {

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

      function fun() {

        // 这个位置就是 全局下的 fn 私有作用域下的 fun 私有作用域

      }

    }

作用域的三大规则

• 首先 清晰什么是 定义 / 使用 / 赋值 概念

  1. 定义
     有 var 关键字
     或者 function 函数名() {}
     var num // 定义变量
     function fn() {} // 定义变量

  2. 使用
     就是当你需要拿到一个变量的值去使用的时候
     console.log(num) // 我要使用 num 的值去打印出来
     1 + num // 我要使用 num 的值去和 1 进行运算
     var abc = num // 我要使用 num 的值赋值给 abc

  3. 赋值
     给一个变量进行赋值的操作
     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
			console.log(c)   //这个时候就会报错 "c is not defined",fn（）里面获取不到fun里面的值
            function fun() {

                var a = 'fun 里面的 a 变量'
                var c = 100
				console.log(a) // 得到的是 fun 作用域里面的 a 变量的值
                console.log(b) // 得到的是 fn 作用域里面的 b 变量的值
                console.log(d) //这个时候就会报错 "d is not defined"

            }

            fun()

        }

        fn()
        //这里打印只能得到a，函数里面的变量是得不到的

• 变量赋值规则
  当你需要给一个变量赋值的时候
  先在自己作用域内部查找, 如果有, 就给自己作用域内部的变量赋值
  如果没有, 就向上一级查找, 如果有就给父级的变量赋值
  如果还没有, 就继续向上查找
  直到全局作用域都没有, 那么就把这个变量定义为全局变量, 再进行赋值

 	var a = 100 // 全局 a 变量

       function fn() {

			a = '后来赋值操作'
			b = 500
            console.log(a) //这里出来的结果是 '后来赋值操作'
			console.log(b) //这里出来的结果是 500
       }
		 console.log(a) //这里出来的结果是 100, 因为fn这个函数还没有执行
		 
         fn() // 因为 fn 函数的执行, 给全局变量 a 从新进行了赋值操作

     	 console.log(a) //这里出来的结果是 fn 里面的 '后来赋值操作'
     	 console.log(b) //这里出来的结果也是 500， 因为 fn里面没有变量b，所以b这个变量被定义为全局变量