js的局部变量和全局变量

全局变量

常常定义在函数外，具有全局定义域，在整个js代码的任何地方都可以使用，这个就叫全局变量

局部变量

定义在函数内部，只在当前函数的定义域可以被使用，而且不同的函数可以定义相同的局部变量，他们之间相互没有关系，互不干扰，函数像酒店房间，而局部变量像入住的客人，只能在自己的房间活动，不能影响其他房间。

在今天写轮播图的时候我们需要写一段代码是当鼠标经过轮播图的时候，轮播图停止自动播放，而当鼠标离开轮播图时，轮播图继续自动播放，在这段代码中我一直无法实现这个功能，后来检查代码发现时因为全局变量和局部变量使用不妥，在命名定时器时，我在函数内命名，使其只能在该函数里使用，所以后面的代码无法实现，这个问题也会成为我们写代码时难以注意到的一个小问题。

 function time() {
      i++;
      img.src = sliderData[i].url
      p.innerHTML = sliderData[i].title
      footer.backgroundColor = sliderData[i].color
      document.querySelector('.slider-indicator .active').classList.remove('active')
      document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
      if (i === sliderData.length - 1) {
        i = -1;
      }
    }
    let timerId = setInterval(time, 1000)
    box.addEventListener('mouseenter', function () {
      clearInterval(timerId)
    })
    box.addEventListener('mouseleave', function () {
      timerId = setInterval(time, 1000)
    })

let和const

这俩个关键字也许我们细细品味，let用来定义变量而const用来定义常量，也就是let定义的变量还可以重新赋值，而const定义的常量不可重新赋值。

在随机点名案例中，我们按开始按钮，定时器函数开始运行，而按停止按钮，定时器停止，删除抽到的名字，因为名字的顺序是随机的，所以我们需要使用随机数函数，而在停止按钮那我们需要删除抽到的名字，所以随机数需要是一个全局变量，而且因为每一次随机数都相当于重新赋值，所以需要用let来定义。

 const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
        const name = document.querySelector('.qs')
        const kaishi = document.querySelector('.start')
        const jieshu = document.querySelector('.end')
        let n = 0
        let random = 0
        kaishi.addEventListener('click', function () {
            n = setInterval(function () {
                random = Math.floor(Math.random() * arr.length)
                name.innerHTML = arr[random]
                if (arr.length === 1) {
                    kaishi.disabled = true;
                    jieshu.disabled = true;
                }
            }, 100)
        })
        jieshu.addEventListener('click', function () {
            clearInterval(n)
            arr.splice(random, 1)
        })

那如果是没有小白点，随机出的数字只在定时器内使用，则我们可以使用const来定义，因为每一次循环都相当于一次新的定义，并不是重新赋值，与常量不冲突。

小tip

1. 如果在函数里面不定义直接使用，也可以变成全局变量，但是是流氓做法，不推荐

2.当全局变量和局部变量重名时，在函数里局部变量会覆盖全局变量，函数结束后覆盖结束

 <script>
        let str = "我是全局变量";

        function b() {
            let str = "我是局部变量";
            console.log(str); //结果：我是局部变量
        }
        b();
        console.log(str);//结果：我是全局变量
    </script>

3.js的特殊性决定它可以在js的任何地方声明变量，它可以先定义再使用，因为js在执行前会对整个脚本文件的声明部分做完整分析。

4.现在一般不使用var声明变量