当前焦点![JavaSript]闭包

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

当前焦点![JavaSript]闭包

2023-02-02 17:00:45 来源：博客园

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

(资料图片)

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

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

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

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

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

//file_name:前端.html        Title    <script src = "A开发.js"></script>    <script src = "B开发.js"></script>

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

可以看到，控制台输出的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();

完事!!!

关键词：开发人员全局变量局部变量