为什么避免使用全局变量

.js 文件中定义的全局变量，都是在全局作用域中

一个 .js 文件中声明的 变量 或 函数，在另一个 .js 文件中是可以访问的

同时也会产生 命名冲突，如：5个前端程序员，在当前项目中创建5个 .js 文件，如果都声明全局变量 book 或 函数 Person，就会导致 bug

解决

使用自调用函数

自调用函数

自行调用，无需借助其他函数或方法来启动
将其他 变量、函数定义在该自调用函数内

注意： 自调用函数中 所有 变量 和 方法 都是 局部作用域 内的，即：只能在自调用函数内访问。
想要设置成 全局作用域供外部访问 ，可以在函数体内设置 window.fn=fn;

写法一

定义匿名函数，并用 () 将匿名函数括起来，然后在后面在加上 () 表示调用

注意：多个自启动函数，前面要有 ;，否则报错

(function(形参) {
    // 函数体
})(实参)

写法二

定义匿名函数，然后在后面在加上 () 表示调用，在外面用 () 括起来

注意：多个自启动函数，前面要有 ;，否则报错

(function(形参) {
    // 函数体
}(实参))

写法三

定义匿名函数，然后在后面在加上 () 表示调用
在前面要有 !，可以换作其他运算符或者 void

!function(形参) {
    // 函数体
}(实参)

案例

传统写法

var a = 1
var b = 2
function add(){
    console.log(a+b)
}
add()

打开页面后，控制台打印 3

自调用函数写法一

(function(){
    var a = 1
    var b = 2
    function add(){
        console.log(a+b)
    }
    add()
})()

打开页面后，控制台打印 3

自调用函数写法二

(function(){
    var a = 1
    var b = 2
    function add(){
        console.log(a+b)
    }
    add()
}())

打开页面后，控制台打印 3

自调用函数写法三

!function(){
    var a = 1
    var b = 2
    function add(){
        console.log(a+b)
    }
    add()
}()

打开页面后，控制台打印 3