[JavaSript]闭包

假设有一个场景，有一个前端开发项目。

开发人员A写下的js程序：

//file_name:开发人员A.js
var name = "RoastDuck";
setTimeout(function(){
    console.log("开发人员A的内容应该是RoastDuck,控制台输出了"+name);
},2000);
setTimeout()

开发人员B写下的js程序：

//file_name:开发人员B,js
var name = "Rev";
(function(){
    console.log("开发人员B的内容应该是Rev,控制台输出了"+name)

})()

现在，把脚本组合到html里：

//file_name:前端.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src = "A开发.js"></script>
    <script src = "B开发.js"></script>
</body>
</html>

很不幸，他们写的是同一个项目。

可以看到，控制台输出的name值都是Rev，那是因为“开发B”的js文件是后执行的，对“开发A”的js文件中的name进行了修改。那如何保护自己的变量呢？
因为开发A和B定义的变量都是全局变量，我们只要把它变成局部变量就可以了！现在有两个方案。方案一：用let声明；方案二：把代码整合到函数内部。

方案一：
开发A：

let name = "RoastDuck";

开发B：

let name = "Rev";

但是但是但是，由于不可以用let声明同一个变量，程序报错了

方案二：
以开发B为例：

//file_name:开发人员B,js
(function(){
    var name = "Rev";
    console.log("开发人员B的内容应该是Rev,控制台输出了"+name)
})()

方案二可行，如果不想让下面这句代码自动执行，那该怎么办？

  console.log("开发人员B的内容应该是Rev,控制台输出了"+name)

我们是不是给这个函数起个名字,它就不是自执行函数了？

//file_name:开发人员B,js
(function(){
    var name = "Rev";
    var f = function(){
        console.log("开发人员B的内容应该是Rev,控制台输出了"+name)}
        })()

现在出现的问题是，怎么调用里面这个函数？
标准答案：return
把需要被调用的函数，返回给一个变量，然后通过这个变量调用函数。

//file_name:开发人员B,js
// shuchu:"输出"用于接受返回的函数
var shuchu_function = (function() {
        var name = "Rev";
        var f = function () {
            console.log("开发人员B的内容应该是Rev,控制台输出了" + name)
        };
        return f;//这里返回的是一个函数
})();

//调用
shuchu_function();

眼睛特别大的读者就发现了一个问题：变量冗余

仔细一想，这个f似乎没什么用处，这个变量只不过是创建函数和返回函数之间的一道桥梁，不妨让这两个过程靠近些。
我们可以这样做，在return后面直接创建函数

//file_name:开发人员B,js
// shuchu:"输出"用于接受返回的函数
var shuchu_function = (function() {
        var name = "Rev";
        return function () {//看这里
            console.log("开发人员B的内容应该是Rev,控制台输出了" + name)
        };
})();

//调用
shuchu_function();

想要提供多个函数给外部使用，那有该怎么办？
标准答案：面向对象
此时，return返回的是一个对象

//file_name:开发人员B,js
// shuchu:"输出"用于接受返回的函数
var shuchu_object = (function() {
        var name="Rev";
        var shuchu={
         f1:function () {
            console.log("我是f1,控制台输出了" + name)
        },
         f2:function () {
            console.log("我是f2,控制台输出了" + name)
        },
}//看这里
        return shuchu;
})();

//调用
shuchu_object.f1();//看这里
shuchu_object.f2();//看这里

最后的最后，写一下关于传参到外部的问题。
我们可以在函数体内，使用"window"让一个变量成为全局变量

//file_name:开发人员B,js
var shuchu_function = (function() {
        var name = "Rev";
        window.name_global=name;//看这里
})();

//调用函数内部参数
console.log(name_global);//看这里

完事!!!

posted @ 2023-02-02 15:21  Rev_RoastDuck  阅读(36)  评论(0)    收藏  举报