我可以在 JavaScript 窗口全局对象中定义的某个对象中找到 JQuery 函数吗？

Posted 2023-02-22

【中文标题】我可以在 JavaScript 窗口全局对象中定义的某个对象中找到 JQuery 函数吗？

【英文标题】：Can I find a JQuery function inside some object defined into the JavaScript window global object?

【发布时间】：2016-03-22 10:49:10

【问题描述】：

我是 javascript 和 JQuery 的新手，我有以下疑问。

我知道如果我打开 FireBug 控制台键入 window 我会看到 global object 的内容在运行到浏览器的 JavaScript 应用程序中是当前浏览器选项卡（窗口）。

好的，所以在这个全局对象中我可以看到所有的全局变量和所有的全局函数（变量和没有在另一个函数中定义的函数）。

所以我有一个链接我的 .js 文件的页面。

这个文件将包含一些像这样的纯 JavaScript 函数：

function myFunction() 
    .................................
    .................................
    .................................

所以我会将 myFunction 函数视为 window 全局对象的一个​​字段，因为该函数是 global（它没有定义在另一个函数中）。这一点我很清楚。

所以，在我的页面内链接的 .js 文件中，我也有这样的内容：

$(document).ready(function() 

    $("#myButton").click(function() 
        ............................................
        ............................................
        DO SOMETHING WHEN THE BUTTON HAVING id="myButton" IS CLICKED
        ............................................
        ............................................
     );
);

所以，这是一个 JQuery 代码，它应该以这种方式工作（如果我做错了断言，请纠正我）。

$ 是 JQuery 对象（或者它是什么？）。

在这个 JQuery 对象上，我调用 ready() 函数，该函数是在 DOM 完全呈现时执行其内部回调函数的函数。

所以内部回调函数包含：

$("#myButton").click(function() ...DO SOMETHING...);

选择一个具有 id="myButton" 的按钮并向其添加 click 事件侦听器，该事件侦听器本身定义了在单击按钮时执行的内部回调函数.

是真的吗？

好的...所以我认为所有这些东西都不是直接在全局对象中，因为它不是直接定义到我的 .js 文件中，而是必须在一些专用于 JQuery 的内存空间中。

所以查看 FireBug 控制台内的 window 对象，我发现了两个对象：

$：我认为是 JQuery 对象...所以我认为我以前的自定义 JQuery 函数必须在这里，但我找不到它。

JQuery：这是 window 全局对象内的另一个对象。

所以，我的疑问是：当我在 ready() 函数中声明类似

$("#myButton").click(function() ...DO SOMETHING...);

在哪里可以找到 function() ...DO SOMETHING... 在 window 全局对象中定义的某个对象的定义？我能找到吗？还是我错过了什么？

【问题讨论】：

问题到底是什么？您希望能够检索分配为单击处理程序的函数吗？

我想了解 JQuery 函数在窗口对象结构中的位置，以便深入了解 JQuery 是如何工作的（我需要它来调试其他一些奇怪的情况）

好的-该功能不在窗口的正下方。它是提供给元素本身的点击处理程序的匿名函数。

好的，但是我在哪里可以找到特定选定 div 的点击处理程序？

@AndreaNobili - 如果您看到我的回答，有一种方法可以让您看到单击按钮时正在应用的确切功能。尽管其他人在这里指出了什么，但函数是否匿名并不重要，因为 jQuery 存储有关应用的事件侦听器的信息。

【参考方案1】：

jQuery 将其与事件相关的数据存储在应用于每个元素的数据对象events 中。您可以使用$._data() 获取此信息：

$._data($('#myButton')[0], 'events')

或

$._data(document.getElementById('myButton'), 'events')

要获取您为按钮的点击监听器申请的回调函数，您可以简单地抓取该处理程序。例如：

$("#myButton").click(function ()  console.log('clicked'); );

var eventsInfo = $._data(document.getElementById('myButton'), 'events');

console.log(eventsInfo.click[0].handler);

上面应该打印出“function () console.log('clicked'); ”。

请记住，$._data() 没有可用的公共文档，尽管知道这是一件好事！

以下blog post 在 jQuery v1.8 发布时提到了$._data()，但确实对此发出了警告：

请注意，这不是受支持的公共接口；实际数据结构可能因版本而异。

那是在 2012 年。直到今天，它似乎在最新的 1.x 和 2.x 版本上运行良好，所以我认为这种情况不会很快消失。

【参考方案2】：

这是一个匿名函数，基本上是一段你不想为其编写命名函数的独特代码。

这是一个一次性用例，或者更确切地说，它用于绑定自定义点击事件，而不会在全局对象中乱扔变量。

匿名函数的作用与您所要求的完全相反，因为您无法在全局对象中找到它（匿名函数）。

.click 是在$.fn 中定义的函数，并且由于$ 是window 对象的一部分，您可以遍历那里找到点击，例如window.$.fn.click 将是$(...).click(func...) 源的路径，但匿名函数是一个被设置然后被遗忘（或多或少）的函数。

毕竟，你没有给它一个名字，所以它没有可以指向的参考。

如果您使用命名函数作为另一个函数的参数，则称为 callback function

匿名函数基本上是一个无名回调函数，回调函数是一个普通函数，可以作为callable传递给其他函数> 参数 - 这个普通函数将在内部使用 .call() 或 .apply() 来执行提供的回调，例如，当您绑定 click 时，jQuery 会执行此操作

这里的好处是，事实上，您根本没有遗漏任何东西 - 您问的问题是正确的，因为如果您刚刚开始，但一旦掌握了窍门，这看起来就像魔术一样其中很容易理解和使用（误用所以要小心！）

如果您想知道这种构造是如何工作的，您可以随时构建自己的函数来接受回调/匿名函数，例如

function result_based_on_callback(a, b, fn) 
    fn.call(null, a, b);

上面的函数接受两个参数和一个函数，它会调用函数并提供两个参数给它（null 是this 的上下文，这是一个不同的问题:)）

如果我们要使用上述构造进行计算，我们可以这样做：

console.log(result_based_on_callback(1, 2, function(a, b)  return a + b; ));

这将返回3，您也可以使用普通函数执行此操作，否则该函数将接受两个数字并将它们相加 - 它的工作原理相同，只是传入函数 name 而不是身体

像这样：

function do_add(a, b) 
    return a + b;


console.log(result_based_on_callback(1, 2, do_add));

这将完全一样。 我希望这能让你了解它是如何工作的，祝你好运！