Javascript 和匿名函数 - 如何在运行时调用这些函数进行调试答案

【问题标题】：Javascript and Anonymous functions - how to call these during runtime for debuggingJavascript 和匿名函数 - 如何在运行时调用这些函数进行调试
【发布时间】：2018-04-23 15:31:16
【问题描述】：

我是 javascript 新手，我正在尝试在浏览器开发工具中调试 Angular 应用程序，并希望从控制台调用匿名函数。有没有办法做到这一点？在浏览器中调试此应用程序时，我什至可能不理解我正在查看的代码。下面是我在其中放置断点的 .js 文件示例。

我有点困惑这个功能是什么。它不是自动执行的，但它是匿名的。应用程序如何调用此函数？谁能帮我理解下面的代码？

它似乎是一个具有角度模块工厂的匿名函数 - 我正在阅读的是定义服务的方式？如果是这样，我该如何调用控制台中的“A”函数进行调试？

!function() {
    "use strict";
    angular.module("customPlugin", ["coreFw"]),
    angular.module("naviBar", ["coreCw", "customPlugin"])
}(),
function() {
        "use strict";
        angular.module("moduleName").factory("naviBar", ["$q", "$window", function(a, i, s) {
            var n = function(e) {
                return !0 === e || !1 === e || "[object Boolean]" === toString.call(e)
            }, 
            A = {
                init: function() {
                    a(A.watch, A.watchInterval)
                },
                watch: function() {
                    A.session.monitor(),
                    A.height.monitor(),
                    a(A.watch, A.watchInterval)
                }
            };
        }
        ])
}();

【问题讨论】：

代码显示为语法错误，因为它试图成为没有名称的函数声明。函数声明必须有名字。如果这是在表达式上下文中，它确实是一个立即调用的匿名函数（由末尾的 () 调用），但不是如图所示。
我知道的文件没有语法错误（我不得不减少代码示例，因为实际的 .js 文件超过 3000 行长）。但是这个函数的定义方式如图所示，并且在应用程序运行时不断调用“watch”。正如我所说，我是 javascript 新手。让我添加文件的开头部分，以防阐明这个函数是如何声明的，并帮助你们为我解释一下？
代码什么也不做，因为 A 和 n 没有在服务工厂内部使用，也没有从它返回。
您的编辑添加了上下文。 “它不是自执行的，但它是匿名的。” 是inline-invoked/immediately-invoked，这通常是人们所说的自执行（它不是 self-执行——那是一个递归函数——但它由紧随其后的() 立即执行）。（正如我上面所说的。）
啊，我没有注意到函数声明后的（）。不过，让我感到困惑的是，我认为立即调用的函数必须包含在 () 之间，如您包含的链接中所示。不过，在我上面发布的代码中，该函数未包含在 () 中。这只是偏好但不是必需的吗？

标签： javascript angularjs factory anonymous-function

【解决方案1】：

尝试如下调试器：然后在您的浏览器控制台中，它将停在那里，逐步进入调试...

function() {
debugger;
    "use strict";
    angular.module("moduleName").factory("naviBar", ["$q", "$window", function(a, i, s) {
        var n = function(e) {
            return !0 === e || !1 === e || "[object Boolean]" === toString.call(e)
        }, 
        A = {
            init: function() {
                a(A.watch, A.watchInterval)
            },
            watch: function() {
                A.session.monitor(),
                A.height.monitor(),
                a(A.watch, A.watchInterval)
            }
        };
    }
    ])
}()

【讨论】：

【解决方案2】：

我一直在研究类似于 ES6 导入/导出的客户端模块系统。它使用 Promises 和 requestAnimationFrame 进行排序，然后排队并执行函数（它只会在较旧的浏览器上使用 requestAnimationFrame）。它在依赖排序的函数队列上运行，您可以随时暂停，因此对您的目的很有用。

那么在最简单的情况下是什么样子的呢？我对this 问题的回答可能会有所帮助。

基本上，库将在加载事件触发后开始执行您推送到队列的函数。可以查看仓库here；

这是dummy project。每次绘制一个点时，您实际上是在重新执行一个函数（脚本），并且暂停按钮会暂停浏览器的执行。 A bit more detailed explanation.

【讨论】：