全局變量不能用
<body>
<div id="parent"></div>
<div id="x"></div>
<script>
console.log(parent) // Window
console.log(x) // <div id="x"></div>
</script>
</body>
上面代碼中分別打出 parent 和 x 煎谍，發(fā)現(xiàn) parent 打出Window 诚镰，因?yàn)?parent 被全局變量parent 所覆蓋专普。parent 為 window 默認(rèn)的擁有的屬性雀哨。
<body>
<div id="parent"></div>
<div id="x"></div>
<script>
var parent = document.querySelector('#x')
console.log(parent) // <div id="x"></div>
console.log(window.parent) // <div id="x"></div>
</script>
</body>
發(fā)現(xiàn)使用全局變量var 聲明,使得全局屬性window.parent被覆蓋了艇拍，輸出結(jié)果只有 <div id="x"></div> 。
同理骏掀，其他全局變量名字如 alert ,self 等也有這樣的情況。
使用局部變量柱告，發(fā)現(xiàn)全局變量和局部變量不會(huì)相互覆蓋截驮。
<body>
<div id="parent"></div>
<div id="x"></div>
<script>
function x(){
var parent = document.querySelector('#x')
console.log(parent)
}
x.call() // <div id="x"></div>
console.log(window.parent) // Window
</script>
</body>
所以，最好不要用全局變量际度，可以使用局部變量葵袭。
上面的代碼涉及到一個(gè)概念：立即執(zhí)行函數(shù)
立即執(zhí)行函數(shù)
即為了使用一個(gè)函數(shù)以內(nèi)的局部變量，聲明函數(shù)后立即調(diào)用它乖菱。
函數(shù)可以是匿名函數(shù)坡锡，然后立即調(diào)用，所以代碼可以簡化為以下：
function(){
var parent = document.querySelector('#x')
console.log(parent)
}.call()
**但是聲明一個(gè)匿名函數(shù)窒所，然后立即調(diào)用會(huì)瀏覽器認(rèn)為語法錯(cuò)誤而報(bào)錯(cuò)鹉勒。解決方法有以下幾種
- 把函數(shù)和函數(shù)調(diào)用用括號括起來
(function(){
var parent = document.querySelector('#x')
console.log(parent)
}.call())
- 把函數(shù)用括號括起來
(function(){
var parent = document.querySelector('#x')
console.log(parent)
}).call()
- 在匿名函數(shù)開頭添加標(biāo)記
-function(){
var parent = document.querySelector('#x')
console.log(parent)
}.call()
+function(){
var parent = document.querySelector('#x')
console.log(parent)
}.call()
~function(){
var parent = document.querySelector('#x')
console.log(parent)
}.call()
!function(){
var parent = document.querySelector('#x')
console.log(parent)
}.call()
block(代碼塊）和 let
{
var parent = document.querySelector('#x')
console.log(parent)
}
// <div id="x"></div>
console.log(window.parent) // <div id="x"></div>
此處不能使用var ， 使用后會(huì)覆蓋全局變量吵取，要使用 let禽额，主要是因?yàn)殛P(guān)鍵字 var 進(jìn)行聲明導(dǎo)致變量提升。
{
let parent = document.querySelector('#x')
console.log(parent)
}
// <div id="x"></div>
console.log(parent) // Window
{
var parent = document.querySelector('#x')
console.log(parent)
}
console.log(parent)
// 相當(dāng)于
var parent
{
parent = document.querySelector('#x')
console.log(parent)
}
//<div id="x"></div>
console.log(parent) // <div id="x"></div>
// 所以實(shí)際上還是在聲明一個(gè)全局變量皮官。代碼塊包不住 var脯倒，函數(shù)才可以
