【问题标题】:Anonymous functions syntax in jQueryjQuery中的匿名函数语法
【发布时间】:2015-03-22 10:34:48
【问题描述】:

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

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

截至目前,我遇到了语法理解问题:

我的 HTML:

<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 传递给它(带有 ($) 但我不知道为什么这在那时很重要)。从现在开始,我的函数'speaks' jQuery(它理解它的语法——我假设)。在我的 JavaScript 函数的最后,我再次将 jQuery 对象传递给它(但为什么有必要这样做呢?)。请赐教。

示例 2: 最后我尝试了相同的功能,但没有使用 (jQuery)。现在它不工作了。我明白缺少什么。但是为什么最后那个(jQuery)如此重要?

示例 3: 现在我用 $ 开始了我的 Javascript 函数,我假设从现在开始我的整个函数都被包裹在一个 jQuery 对象中。在这个 jQuery 对象中,我的函数理解 jQuery 语法。最后不需要(jQuery)。

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

我的问题基本上是:
在示例 1 中,为什么开头的 ($) 和结尾的 (jQuery) 是必需的?什么目的?

如果我能更深入地了解“正确阅读 jQuery 语法”并谈论 jQuery 语法及其要求,我真的很感激。谢谢。

【问题讨论】:

  • 问问自己——$是什么?
  • @u_mulder $ 代表 jQuery。据我所知。 $( ) === jQuery( )

标签: javascript jquery syntax


【解决方案1】:

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

不完全是。您创建一个函数表达式。

function () { }

然后您使用 () 关注它,稍后会调用它。

你可以这样做:

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

我将 jQuery-Object 传递给它(使用 ($) 但我不知道为什么这在那时很重要)。

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

从现在开始,我的函数 'speaks' jQuery(它理解它的语法 - 我假设)。

语法属于 JavaScript,而不是 jQuery。

在我的 JavaScript 函数的最后,我再次将 jQuery 对象传递给它(但为什么有必要这样做呢?)。请赐教。

您是第一次传递 jQuery 对象。它是您在调用函数时传递给函数的参数。 jQuery(jQuery 对象)的值被赋值给本地的$ 变量。

这有两个用途:

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

我在最后没有 (jQuery) 的情况下尝试了相同的功能。现在它不工作了。我明白缺少什么。但是为什么最后那个(jQuery)如此重要?

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

jQuery 很重要,否则$ 在函数中将是undefined


现在我用 $ 开始了我的 Javascript 函数

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

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

如果您向它传递一个函数,那么它将将该函数分配为文档ready 事件处理程序。

当 DOM 完成加载后,将触发事件并调用函数。


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

是的


【讨论】:

  • 我知道这个问题很老,但这是对匿名函数的一个很好的解释。谢谢。
【解决方案2】:

首先,没有“jQuery 语法”。 jQuery 是一个库,用 JavaScript 编写,所以语法是 JavaScript。

示例 1: 我创建了一个匿名 JavaScript 函数。这个函数在浏览器读取它的那一刻被执行。我将 jQuery-Object 传递给它(带有 ($) 但我不知道为什么这在那时很重要)。从现在开始,我的函数'speaks' 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 对象中。在这个 jQuery 对象中,我的函数理解 jQuery 语法。最后不需要(jQuery)。

现在您将 $ 作为带有一个参数的函数调用:您的匿名函数。

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

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

我的问题基本上是:
在示例 1 中,为什么开头的 ($) 和结尾的 (jQuery) 是必要的?目的是什么?

函数参数的目的是什么?

但你似乎不明白:$ 只是一个变量(或者你想要的函数,但在 JS 函数中变量)。

【讨论】:

    【解决方案3】:

    问题的解决方案归结为理解 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

    【讨论】:

      【解决方案4】:

      我只会关注那些不起作用的地方。以下sn-p:

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

      首先,您没有调用该函数。所以,里面的任何东西都不会运行。所以,你可能会想,最后加上() 可能会解决这个问题。

      但这还不是全部!

      因为$指的是jQuery,在sn-p之外。但是,由于您将命名参数包括为$ 并且没有向其传递任何内容,因此 sn-p 内部的$ 会遮蔽外部的参数。因为它没有被赋值,所以它是undefined。所以你最终会得到 ​​p>

      undefined is not a function
      

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2011-05-09
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2010-12-10
        相关资源
        最近更新 更多