Question

举个例子，这是jQuery1.8的截图。 enter image description here

为什么我可以从jQuery源代码的角度做这样的事情？是addClass jquery的方法吗？但我所看到的是来自 jQuery.fn.extend 。

$("xid").addClass("xxx");

我对JavaScript比较陌生，写了一些非常简单的代码，比如在 .html 中直接添加方法。

 <html>
    <script>
        function m() {
            alert("simple");
        }
    </script>
 </html>

我无法理解复杂的语法，特别是在JavaScript框架中，比如ExtJs，jQuery，虽然我已经搜索了很多关于此的相关文档，但我仍然没有清楚的理解。也许我需要花时间认真阅读一本特别的JavaScript书籍，但这一刻我想知道答案。

感谢。

Answer 1

这个问题有几个层次。第一个是对象文字。 Javascript允许您使用对象文字语法声明对象（您可能听说过JSON，它只是在字符串中存储/传输的语法）。语法如下：

var obj = { key1 : "value1", key2 : "value2" };

更有条理/可读的方式是：

var obj = {
  key1 : "value1",
  key2 : "value2"
};

上面的代码与执行完全相同：

var obj = new Object();
obj.key1 = "value1";
obj.key2 = "value2";

所以你在行中看到了什么：

addClass : function () {

仅仅是对象文字声明的一部分。基本上代码是这样做的：

var tmp = new Object();
// ...
tmp.addClass = function () { /* ... */ };
// ...
jQuery.fn.extend(tmp).

除了它在extend()的调用中直接声明对象文字，因此没有必要使用临时变量。

第二件事是javascript中的函数并不特别。我的意思是，函数被视为与其他所有内容相同：字符串，数字，数组和放大器。对象。事实上，在javascript中，字符串，数字，数组和函数都是对象。因此，您可以为变量分配函数：

var n = function () {alert("Hello World");}

所以没有任何神奇的事情发生。它只是在对象文字语法中创建一个匿名对象，其中包含一组函数，这些函数作为参数传递给extend方法。

这是语法的解释。也就是说，javascript本身正在发生什么。

我们知道我们正在研究jQuery代码。这样就可以为我们提供更多有关正在发生的事情的线索。首先要做的是：jQuery.fn只是指向jQuery.prototype的指针。而jQuery本身就是一个构造函数。在javascript中，构造函数是可用于创建对象的常规函数。使用构造函数创建对象时，该对象将继承构造函数的原型。

jQuery已经修改了它的原型并添加了一个extend方法，它允许你为jQuery的原型添加其他方法和属性。它正在做什么。前面提到的对象文字中包含的所有函数都将由extend方法处理，以便添加到jQuery本身，这样当你创建新的jQuery对象时，它们将继承它们。

根据您的评论，您需要了解有关javascript的很多内容。我可以建议阅读Rhino书："JavaScript: The Definitive Guide"。一旦你了解更多并且对javascript更加满意，我还建议你阅读"Javascript: The Good Parts"。

我会尽力回答你的评论。要解释一切需要一本完整的书。

首先，关于这一行：

jQuery.extend = jQuery.fn.extend = function() {

如前所述，jQuery.fn只是指向jQuery.prototype的指针。所以它正在做的基本上是这样的：

jQuery.prototype.extend = function () { /* ... */ };
jQuery.extend = jQuery.prototype.extend;

两者有什么区别？您需要记住的第一件事是jQuery是一个构造函数。由构造函数创建的对象继承了它的原型（javascript没有类，但是用“class”切换单词“prototype”，你开始理解对象是如何工作的）。因此，extend的第一个声明将它定义为jQuery个对象的所有实例的方法：

// note: The following is not the recommended way to write jQuery code
//       but it does illustrate the point about inheritance:

var foo = new jQuery();
foo.extend(); // this works because foo inherits jQuery's extend method

现在，记得我说过在javascript函数中也是对象吗？第二个声明将jQuery函数视为对象，并直接向其添加函数。这主要是语法糖。这样你就可以写下：

jQuery.extend();

而不是更长的时间：

jQuery.prototype.extend();

或其他令人费解的事情：

new jQuery().extend.call(jQuery);

取决于如何编写扩展。

因此，jQuery.extend()只是jQuery构造函数本身的一种方法。它不是由jQuery构造函数创建的对象继承的。把它想象成一种类方法。

Answer 2

是的，addClass是jQuery方法。代码的屏幕截图是扩展jquery的方法，所以你可以像这样调用它：$（）。method。 $等于jQuery。看一下jquery源代码，如果你理解js，那就没有什么复杂的了。

你可以帮我解释一下Jquery的这种JavaScript语法吗？

2 个答案: