全局变量不可用和立即执行函数
程序员文章站
2022-04-25 07:56:26
...
全局变量不能用
<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 ，发现 parent 打出Window ，因为 parent 被全局变量parent 所覆盖。parent 为 window 默认的拥有的属性。
<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>
发现使用全局变量var 声明,使得全局属性window.parent被覆盖了，输出结果只有 <div id="x"></div> 。
同理，其他全局变量名字如 alert ,self 等也有这样的情况。
使用局部变量，发现全局变量和局部变量不会相互覆盖。
<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>
所以，最好不要用全局变量，可以使用局部变量。
上面的代码涉及到一个概念：立即执行函数
立即执行函数
即为了使用一个函数以内的局部变量，声明函数后立即调用它。
函数可以是匿名函数，然后立即调用，所以代码可以简化为以下：
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()
+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 ， 使用后会覆盖全局变量，要使用 let，主要是因为关键字 var 进行声明导致变量提升。
{
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)
// 相当于
var parent
{
parent = document.querySelector('#x')
console.log(parent)
}
//<div id="x"></div>
console.log(parent) // <div id="x"></div>
// 所以实际上还是在声明一个全局变量。代码块包不住 var，函数才可以