jquery - 为什么 jQuery.extend 定义为 jQuery 函数属性,而 jQuery.fn.extend 定义为 jQuery 原型(prototype)对象属性

标签 jquery function properties prototype extend

jQuery 被定义为一个函数

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

jQuery.fn.extend 被定义为原型(prototype) object 属性 - 因此在 this

范围内可用

为什么要以这种方式定义jQuery.extend,因为 jQuery 实际上并不是一个对象,而是一个函数?

供引用,令人困惑的代码行是:

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

注意到

jQuery.fn === jQuery.prototype 

这是一个对象 {},jQuery 是一个函数

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

我在 jQuery 代码中没有看到任何地方将 jQuery 设置为新的 jQuery() 实例。在 jQuery 构造函数中,我看到返回的唯一实例是 init 函数,即返回 new jQuery.fn.init()。

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

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

现在,在我的测试中,扩展函数中的“this”指的是 jQuery 函数,而不是对象实例,因此该函数正在使用函数的额外“属性”进行扩展。我不明白的是,当函数尚未通过任何实例创建实例化时,如何向函数添加/扩展对象属性?

最佳答案

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

它在核心中广泛用于向 jQuery 对象本身添加属性,但开发人员也可以使用 $.extend(target [, object1 ] [, objectN ] ) 来合并自己的对象。

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

还有其他几种 jQuery 方法,它们既在内部用作实用函数,又公开公开,例如 jQuery.eachjQuery.fn.each,它们先于现代Array#forEach() 但也可用于迭代对象

<小时/>

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

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}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<小时/>

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

当在源核心内调用时,该对象是 jQuery

简单对象示例:

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


obj.log()

关于jquery - 为什么 jQuery.extend 定义为 jQuery 函数属性,而 jQuery.fn.extend 定义为 jQuery 原型(prototype)对象属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48520067/

相关文章:

javascript - 如何保存 Asp :Image Element Generated on the Client Side

javascript - InStr 与 indexOf

sql-server - 在函数内执行WITH语句

mysql - 从垃圾箱中删除帖子,为其添加自定义字段

java - 通过 Get & Set 与构造函数初始化实例变量

javascript - 按钮放置(添加一组字段,当多于一个字段时启用禁用按钮)

javascript - 如何让 JS 函数产生的字符串出现在 div 中?

java - 如何使用 Tomcat 从属性文件中检索数据库属性以便在多台计算机上工作

Swift:有条件地设置私有(private) Ivar

javascript - 单击链接时关闭导航覆盖(一个寻呼机)