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

Question

我意识到一个是原型有人可以告诉我这两者之间的区别吗？

$.addMessage = function () { 

和

$.fn.addMessage = function () {

从我可以看到一个扩展 JQuery 和打字稿中的另一个 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()。$(...)在内部使用new $(...)，这意味着它确实使用$构造函数创建新对象。这意味着$.fn.addMessage也可以访问为

$(".messageContainer").addMessage()

从语义上讲，$.fn.addMessage与特定的 jQuery 实例有关。这意味着函数this内部addMessage不是引用$.fn，而是引用$(...)。$.fn因此可以认为是Java中的一个实例方法（属于一个实例）的等价物。

---

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

$.addMessage = function(){ 

, 你把它当作

$.addMessage()

如果您将其声明为您的功能

$.fn.addMessage = function(){

, 你把它当作

$(".messageContainer").addMessage()