javaScript | 闭包

Rev_RoastDuck

已于 2024-01-02 00:32:18 修改

阅读量109

点赞数 1

分类专栏： javaScript 文章标签： javascript 前端开发语言

于 2023-02-02 16:54:40 首次发布

本文链接：https://blog.csdn.net/m0_72760466/article/details/128853447

版权

javaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章讨论了在JavaScript中如何处理全局变量导致的冲突问题，提出了两种解决方案：使用let声明（但不能在同一作用域内声明同名变量）和将代码封装在自执行函数内。对于不想自执行的函数，可以通过返回函数并存储到变量来调用。如果需要提供多个函数，可以返回一个包含这些函数的对象。

摘要由CSDN通过智能技术生成

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

开发人员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();

请添加图片描述