JS之使用局部变量

全局变量的危害

html里有一个id="parent"的div
<div id="xxx"></div>

<script>
    var parent = document.getElementById('xxx');
    //这句已经有问题了  你无意之间把window.parent覆盖了
    console.log(parent)  //现在parent已经是那个id="xxx"的div了
</script>

所以你应该避免使用全局变量，使用局部变量

局部变量

JS里的var声明只有在函数内才有块级作用域

function x(){
    var parent = document.getElementById('xxx');
    console.log(parent) //这里的是 id="xxx"的div
}
x.call();
console.log(parent) //这里的parent是window的属性

立即调用函数

如上节代码所示，立即调用函数就是声明一个函数然后立刻调用

因为避免使用全局变量所以你不该声明这个「x」的函数，因为这样已经产生了一个全局变量「x」

function(){
    var parent = document.getElementById('xxx');
    console.log(parent) //这里的是 id="xxx"的div
}()

但是这样会报错，原因是如果你直接声明一个「匿名函数 」并调用，浏览器里会直接报错说语法错误

我们可以使用如下小技巧

1. 直接把匿名函数加调用的整体用 「括号」括起来

   (
       function(){
           //相关处理
       }()
   )

2. 直接把匿名函数用「括号」括起来，然后再调用

   (function(){
           //相关处理    
   })()

3. 加减号或者取反(「+」「-」「!」「~」)

这些运算符是告诉浏览器我不是再声明一个函数而是在求值，但是这个值我不关心(爱是多少是多少)

+function(){}()

-function(){}()

!function(){}()

~function(){}()

4. 因为这个局部变量问题的使用太过麻烦,ES6终于狠心给JS升级了

{
    let parent = document.getElementById('xxx');
    let a = 1;
}
console.log(parent) // 全局变量的window的parent属性
console.log(a) //报错  因为 a是局部变量

{ } 左大括号右大括号之内的内容代表块级作用域，但是你不能用var

{
    var parent = 1;
}
console.log(parent)  // 1 又把window.parent给覆盖了

因为var会变量提升，所以实际的代码是这个效果

var parent; //变量提升
{
    parent = 1;
}
console.log(parent)

所以在ES6出来之前也就是2015年以前如果你想用局部变量就要这样

~function(){}()