JavaScript教程:避免使用全局变量-自调用函数(自执行函数)

为什么避免使用全局变量

.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


原文出处:https://malaoshi.top/show_1IX3mKNfVufK.html