Question

jQuery被定义为功能

jQuery.extend被定义为函数属性，并且本身就是一个函数 - 但不适用于任何this范围。

jQuery.fn.extend被定义为原型对象属性 - 因此可在this

范围内使用

为什么以这种方式定义jQuery.extend因为jQuery实际上不是一个对象呢？

供参考，令人困惑的代码行是：

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

注意到

jQuery.fn === jQuery.prototype

是一个对象{}，jQuery是一个函数

这意味着直接使用jQuery.extend，没有为此上下文实例化对象。

我没有在jQuery代码中看到jQuery被设置为新的jQuery（）实例的任何地方。在jQuery构造器中，我看到的唯一实例返回的是init函数，即返回新的jQuery.fn.init（）。

在文档就绪函数的运行时，如果你检查jQuery和$是什么类型的对象，你会发现它仍然是一个函数（不是对象实例）。因此，每当使用一个参数调用jQuery.extend时，该函数将尝试扩展jQuery本身，但使用“this”作为目标对象，即代码片段

// Extend jQuery itself if only one argument is passed
    if (i === length) {
        target = this;
        i--;
    }

现在在我的测试中，extend函数中的“this”指的是jQuery 函数而不是对象实例，因此函数正在使用函数的额外“属性”进行扩展。我不理解的是，当没有使用任何 new 实例创建实例化对象属性时，如何添加/扩展对象属性？

Answer 1

jQuery.extend实际上只是一个用于合并对象的实用函数。它类似于jQuery库启动时不存在的更现代的Object.assign()

它在核心中广泛使用，为jQuery对象本身添加属性，但开发人员也可以使用$.extend(target [, object1 ] [, objectN ] )

来合并自己的对象。

由于它用作静态方法，因此没有new实例。

还有一些其他jQuery方法在内部用作实用程序函数，并公开显示，例如jQuery.each和jQuery.fn.each，它们位于现代Array#forEach()之前，但也可用于迭代对象

在您自己的代码中使用它可以让您

＆＃13;

var a = {x:1},
    b = {y:2},
    res = $.extend({}, a, b)

console.log(res) // new object { "x": 1,  "y": 2}
console.log(a) // unmodified - still {x:1}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

至于您注意到的部分，target = this;可以使用具有函数作为属性的简单对象来解释。由于调用上下文，函数中的this是对象本身。

在源核心内调用时，对象为jQuery

简单对象示例：

＆＃13;

var obj = function() {};
obj.x = 1;
obj.log = function() {
  // `this` is `obj`
  console.log('this.x = ', this.x)
}


obj.log()

＆＃13;

为什么将jQuery.extend定义为jQuery函数属性，将jQuery.fn.extend定义为jQuery原型对象属性

1 个答案: