全局變量
常常定義在函數外,具有全局定義域,在整個js代碼的任何地方都可以使用,這個就叫全局變量
局部變量
定義在函數內部,只在當前函數的定義域可以被使用,而且不同的函數可以定義相同的局部變量,他們之間相互沒有關系,互不干擾,函數像酒店房間,而局部變量像入住的客人,只能在自己的房間活動,不能影響其他房間。
在今天寫輪播圖的時候我們需要寫一段代碼是當鼠標經過輪播圖的時候,輪播圖停止自動播放,而當鼠標離開輪播圖時,輪播圖繼續自動播放,在這段代碼中我一直無法實現這個功能,后來檢查代碼發現時因為全局變量和局部變量使用不妥,在命名定時器時,我在函數內命名,使其只能在該函數里使用,所以后面的代碼無法實現,這個問題也會成為我們寫代碼時難以注意到的一個小問題。
function time() {i++;img.src = sliderData[i].urlp.innerHTML = sliderData[i].titlefooter.backgroundColor = sliderData[i].colordocument.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 = 0let random = 0kaishi.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聲明變量