JS anonymous：无名函数的使用

- 日理万妓 2022-04-23 22:10 141阅读 0赞

这个无名函数名字是我起的，起这个名字的原因有两条。原因一是在改前端代码的时候发现这个东西，在调试台console用debug调试，会显示一个anonymous，但你发现他是一个函数。原因二是，这个在w3school上也有,在下面连接页面搜索anonymous，可以看打网站给的两个相关例子，其中据说这个是actually an anonymous function，所以索性就叫它无名函数吧。  
  
连接资料（1）  
[相关的例子介绍，要注意要搜索一下关键词，负责示例太多你不一定找到这两个][Link 1]

这个没有名字的函数很多语言都有，就是先声明用的时候再赋值，其实函数也可以这样的，C，JS都可以同样的Java也有类似的虚拟函数（然而我了解的不深）。

发现使用这个东西可以模块化，以组件的形式参与进来，比如说页面多个按钮触发都要激活相同的功能，调用成功后又要根据不同的按钮触发返回不同的结果。例如我要做一个试用和购买都要获取用户信息的一个功能，获取成功后试卖要去试卖的页面，购买要去购买的页面。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlaUNoYW5nV3VSYW8_size_16_color_FFFFFF_t_70]  
代码展示：  
（1）两个事件触发  
试用事件触发公用的获取用户信息模块：模块返回结果成功触发\_doAddShoppingcart

var _this = this;
        _this.showApplyAuthDialog(function () {
          _this._doAddShoppingcart();
        });
      },

购买事件触发公用的获取用户信息模块：某块结果返回结果成功

goToCheckOrder:function () {
        var _this = this;
        _this.showApplyAuthDialog(function(){
          _this._doGoToCheckOrder();
        });
      },

（2）公用模块

(3)公共用模块处理触发事件（还需要等待用户同意并获取信息成功，这时候applyUserAuthSuccessCallback，已经变成了“successCallback”，而这个successCallback就是事件1，事件2触发时里面的无名函数 function()\{ XXXXXX \}）

bindGetUserInfo: function (e) {
        var _this = this;
        app.applyUserAuthSuccessCallback(e, function () {
          _this.hideApplyAuthDialog();
          if (typeof _this.data.applyUserAuthSuccessCallback === "function"){
            _this.data.applyUserAuthSuccessCallback();
          }
        });
      },

当初我看这个代码理解的难点是，一是纠结于Java这种强类型的语言，一个变量声明他总有个类型，实际上JS什么的，类型是可以转换覆盖的，前者还是String形式我可以把他改成数字或者变成数组或者对象形式。二是没想到，先声明后赋值函数也可以这么搞，操作真的骚。三是没有看时间出发的哪一步，把这个无名函数错过去了，结果突然发现这个变量变成函数了而不知道这个函数从哪里来。

我要吸取这些代码，不要写胶水那种很混乱的代码，要优美要简洁从设计者的角度去考虑问题去设计代码，代码整洁之道还有设计模式这些书要多看，要多学习好的代码，优秀的代码。不要搞东西都耦合在一起，拆开。命名要规范，设计要合理函数名字是订单处理就是订单处理，订单检查就是订单检查不要搞在一起，可以分成两部分，用的时候再写一个处理订单的函数来调用这两个函数。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlaUNoYW5nV3VSYW8_size_16_color_FFFFFF_t_70 1]

[Link 1]: https://www.w3schools.com/js/js_function_definition.asp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlaUNoYW5nV3VSYW8_size_16_color_FFFFFF_t_70]: /images/20220222/e68e995a928544a88622c892afb91314.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlaUNoYW5nV3VSYW8_size_16_color_FFFFFF_t_70 1]: /images/20220222/6ad4d13130034cc68ff3c2f0feb39e5f.png