javascript - $.addMessage = function () { 和 $.fn.addMessage = function () { 有什么区别

Question

我意识到一个是原型(prototype)，有人能告诉我这两个之间的区别吗？

$.addMessage = function () { 

和

$.fn.addMessage = function () {

据我所知，一个扩展了 JQuery，另一个扩展了 typescript 中的 JQueryStatic

interface JQuery {
    addMessage();
}

interface JQueryStatic {
  addMessage();
}

Answer 1

如果你添加一个函数为

$.addMessage = function(){

您稍后可以访问该函数

$.addMessage()

从语义上讲，该函数与特定的 jQuery 实例没有关系，并且可以被视为 Java 中的静态方法的等价物(属于一个类)。

---

如果你添加一个函数为

$.fn.addMessage = function(){

由于 jQuery 将 $.fn 定义为 $.prototype 的别名，这等同于

$.prototype.addMessage = function(){

Javascript 自动将 Class.prototype 指定为使用 new Class() 创建的对象的原型(prototype)。 $(...) 在内部使用 new $(...)，这意味着它确实以 $ 作为构造函数来创建新对象。这意味着 $.fn.addMessage 也可以访问为

$(".messageContainer").addMessage()

在语义上，$.fn.addMessage 与特定的 jQuery 实例相关。这意味着 addMessage 函数中的 this 不引用 $.fn，而是引用 $(...)。 $.fn 因此可以被视为 Java 中的实例方法的等价物(属于实例)。

---

换句话说，如果您将函数声明为

$.addMessage = function(){ 

，你把它当作

$.addMessage()

如果你将它声明为你的函数

$.fn.addMessage = function(){

，你把它当作

$(".messageContainer").addMessage()