jQuery中的匿名函数语法

Anonymous functions syntax in jQuery

本文关键字：函数 语法 jQuery      更新时间：2023-09-26

我读了很多关于jQuery及其语法的文章。但是，我还没有完全理解它的语法，我真的很想对它有更好更深入的理解。

许多文章没有指出简单的语法规则(以及它们的必要性(。

截至目前，我遇到了语法理解问题：

我的网页：

<body>
    <a href="http://www.jquery.com" title="anchor1">jQuery.com</a>
    <a href="http://www.jquery.com" title="anchor2">jQuery.com</a>
    <a href="http://www.jquery.com" title="anchor3">jQuery.com</a>
    <!-- JQUERY -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
        (function ($) {
            // EXAMPLE 1
            $("a").each(function () {
                console.log(this.title);
            });
        })(jQuery);                      // ... everything works fine.

        (function ($) {
            // EXAMPLE 2
            $("a").each(function () {
                console.log(this.title);
            });
        });           // ... missing (jQuery). Why isn't this working?

        $(function () {  // ... notice the $ at the beginning.
            // EXAMPLE 3
            $("a").each(function () {
                console.log(this.title);
            });
        });           // ... missing (jQuery). Why IS this working?

            // EXAMPLE 4
            $("a").each(function () {
              console.log(this.title);
            });                          // ... everything works fine.
    </script>
</body>
我将

澄清我如何理解代码，如果您以非常基本的方式回答我，我将不胜感激。请指出我所有的误解！

到目前为止我的理解和问题：
示例 1：我创建了一个匿名的JavaScript函数。此函数在浏览器读取它的那一刻执行。我传递给它jQuery-Object(带有($(，但我不知道为什么这在这一点上很重要(。从现在开始，我的函数"说话"jQuery(它理解它的语法 - 我假设(。在我的JavaScript函数的最后，我再次向它传递jQuery对象(但为什么这是必要的？(。请开导我。

示例 2：我尝试了相同的函数，最后没有 (jQuery(。现在它不起作用。我明白缺少什么。但是为什么最后的jQuery如此重要呢？

示例 3：现在我用 $ 启动了我的 Javascript-函数，我假设从现在开始我的整个函数都在 jQuery 对象中被 WRAGED。在这个jQuery对象中，我的函数理解jQuery语法。最后不需要 NO (jQuery(。

示例 4：在这里我没有构建 JavaScript 函数。我只是使用 jQuery 来选择并返回 ("a"(。此代码在浏览器读取它的那一秒立即执行。无需等待文档准备就绪。

我的问题基本上是：
在示例 1 中，为什么开头的 ($( 和结尾的 (jQuery( 是必需的？目的是什么？

我真的很感激更长的答案，在那里我可以更深入地理解"正确阅读jQuery语法"，并谈论jQuery语法及其需要什么。谢谢。

我创建了一个匿名的JavaScript函数。此函数在浏览器读取它的那一刻执行。

差一点。创建函数表达式。

function () { }

然后你跟着它()，片刻后调用它。

你可以这样做：

var myfunction = function ($) { ... };
myfunction(jQuery);

我传递给它jQuery-Object(带有($(，但我不知道为什么这在这一点上很重要(。

不。您正在定义一个函数。它接受单个参数，其值被分配给一个名为 $ 的局部变量。

从现在开始，我的函数"说话"jQuery(它理解它的语法 - 我假设(。

语法属于JavaScript，而不是jQuery。

在我的JavaScript函数的最后，我再次向它传递jQuery对象(但为什么这是必要的？(。请开导我。

您是第一次传递 jQuery 对象。它是调用函数时传递给函数的参数。jQuery的值(jQuery 对象(分配给局部$变量。

这有两个目的：

  1. 它允许您使用 $ 变量，而不必担心它被 Prototype JS、Mootools 或任何其他库覆盖，这些库认为使用像 $ 这样通用的东西作为变量名称是个好主意。
  2. 它允许您拥有不会污染全局范围的局部变量。

我尝试了相同的函数，最后没有(jQuery(。现在它不起作用。我明白缺少什么。但是为什么最后的jQuery如此重要呢？

()很重要，因为没有它们，您将无法调用该函数。

jQuery很重要，因为否则$将在函数中undefined。

现在我用 $ 启动了我的 JavaScript 函数

在这里，您将以函数表达式作为参数调用函数$()。

$是一个可怕的重载函数，它根据你传递的参数类型做许多不同的事情。

如果向它传递一个函数，那么它将把该函数作为事件处理程序ready文档。

当 DOM 完成加载时，事件将触发并调用该函数。

在这里，我没有构建JavaScript函数。我只是使用 jQuery 来选择并返回 ("a"(。此代码在浏览器读取它的那一秒立即执行。无需等待文档准备就绪。

是的

首先，没有"jQuery语法"。 jQuery是一个库，用JavaScript编写，所以语法是JavaScript。

示例 1：我创建了一个匿名 JavaScript 函数。此函数在浏览器读取它的那一刻执行。我传递给它jQuery-Object(带有($(，但我不知道为什么这在这一点上很重要(。从现在开始，我的函数"说话"jQuery(它理解它的语法 - 我假设(。在我的JavaScript函数的最后，我再次向它传递jQuery对象(但为什么这是必要的？(。请开导我。

你似乎知道函数和参数是如何工作的。所以看看你的代码：

(function ($) {
        // EXAMPLE 1
        $("a").each(function () {
            console.log(this.title);
        });
    })(jQuery);

定义一个接受一个参数的匿名函数：一个名为 $ 的变量，在语句 $("a") 中使用。然后你调用你的匿名函数并传递给它jQuery对象，所以在函数内部，$ === jQuery .

示例 2：我尝试了相同的函数，最后没有 (jQuery(。现在它不起作用。我明白缺少什么。但是为什么最后的jQuery如此重要呢？

  1. 如果没有最后的()，你甚至不会调用你的函数。您只需定义它，然后丢失它，因为您没有将其分配给变量。
  2. 如果你只输入 () ，它也不会起作用，因为函数参数$将是未定义的，并且覆盖全局$ (window.$ (。

但是，如果您将函数声明为 function() ，我认为它会起作用，因为$会引用window.$。

示例 3：现在我用 $ 启动了我的 Javascript-函数，我假设从现在开始我的整个函数都在 jQuery 对象中被 WRAGED。在这个jQuery对象中，我的函数理解jQuery语法。最后不需要 NO (jQuery(。

现在，您将$调用为具有一个参数的函数：您的匿名函数。

示例 4：在这里我没有构建 JavaScript 函数。我只是使用 jQuery 来选择并返回 ("a"(。此代码在浏览器读取它的那一秒立即执行。无需等待文档准备就绪。

是的，您确实构建了一个函数，并将其作为参数传递给$("a")返回的对象的each()函数。

我的问题基本上是：
在示例 1 中，为什么开头的 ($( 和结尾的 (jQuery( 是必需的？目的是什么？

函数参数的目的是什么？

但是你似乎不明白的是：$只是一个变量(或者如果你愿意的话是一个函数，但在JS函数中是变量(。

问题的解决方案归结为理解 JavaScript 中的闭包......而不是jQuery - jQuery只是使用闭包。

使用闭包，

您可以限定其中的内容范围，还可以将参数传递给该闭包以在其中使用。

对于您的示例 2，如果您将 jQuery 传递给闭包，它将正常工作。喜欢：

(function ($) 
{
  $("a").each(function () {
    console.log(this.title);
  });
})(jQuery); // arguments passed in here

由于您没有在最后传递 jQuery，因此参数$是未定义的，因此在 $('a') 的情况下无法调用。当按照我更改它的方式编写时，jQuery 被分配给 $ 参数，该参数可用于闭包中的代码。

同样，对于示例 3，您没有传入 jQuery，并且您的闭包中也没有变量$，因此它不起作用。请注意，您可以将其更改为类似(仅用于说明目的(：

(function (thisIsJquery) 
{
  thisIsJquery("a").each(function () {
    console.log(this.title);
  });
})(jQuery);

现在jQuery被分配给参数thisIsJquery，它在闭包中可用。

至于您的示例 4，$ 正在它定义的闭包中使用(而不是其中的另一个闭包(，因此它随时可用。

闭包是隐藏实现的绝佳方法，并提供一种在 JavaScript 中private的方法。

延伸阅读：

http://www.w3schools.com/js/js_function_closures.asp

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

我只会关注不起作用的内容。以下代码片段：

(function ($) {               
   $("a").each(function () {
     console.log(this.title);
   });
}) // not calling function

首先，你没有调用函数。因此，它里面的任何东西都不会运行。因此，您可能会认为通过最终添加()可能会解决它。

但这还不是全部！

因为$指的是jQuery，在片段之外。但是，由于您将命名参数包含在$并且没有向其传递任何内容，因此代码段内的$会遮蔽外部的。而且由于它没有被分配任何值，因此它是 undefined .所以你最终会得到 

undefined is not a function

为了证明这一点，添加($)将起作用，就像现在一样，命名参数$引用指向 jQuery 的$。

相关文章：