Was ist jQuery.fn und wie funktioniert es?

jQuery.fn: Prototyp-Aliasing in jQuery

In jQuery bezieht sich der in jQuery.fn.jquery vorkommende Begriff „fn“ auf eine Alias ​​für die Prototypeigenschaft der jQuery-Konstruktorfunktion ($). Um dies zu verstehen, ist es wichtig, das Konzept der Konstruktorfunktionen in JavaScript zu verstehen.

Eine Konstruktorfunktion wird verwendet, um Instanzen von Objekten zu erstellen, die jeweils Eigenschaften und Methoden vom Prototyp des Konstruktors erben. Im Fall von jQuery dient der $-Bezeichner als Konstruktorfunktion.

Betrachten Sie beispielsweise die folgende Konstruktorfunktion:

<code class="javascript">function Test() {
  this.a = 'a';
}
Test.prototype.b = 'b';

var test = new Test(); 
test.a; // "a", own property
test.b; // "b", inherited property</code>

Die Test-Konstruktorfunktion erstellt einen Instanztest, der von seinem Prototyp erbt . Die Testinstanz hat ihre eigene Eigenschaft a, während b vom Prototyp geerbt wird.

In ähnlicher Weise verfolgt jQuery einen ähnlichen Ansatz:

<code class="javascript">(function() {
  var foo = function(arg) { // core constructor
    // ensure to use the `new` operator
    if (!(this instanceof foo))
      return new foo(arg);
    // store an argument for this example
    this.myArg = arg;
    //..
  };

  // create `fn` alias to `prototype` property
  foo.fn = foo.prototype = {
    init: function () {/*...*/}
    //...
  };

  // expose the library
  window.foo = foo;
})();

// Extension:

foo.fn.myPlugin = function () {
  alert(this.myArg);
  return this; // return `this` for chainability
};

foo("bar").myPlugin(); // alerts "bar"</code>

Hier zeigt der fn-Alias ​​auf den Prototyp von die Konstruktorfunktion foo. Durch die Erweiterung der fn-Eigenschaft können neue Methoden (wie im Beispiel myPlugin) zu allen Instanzen des foo-Konstruktors hinzugefügt werden.

Das obige ist der detaillierte Inhalt vonWas ist jQuery.fn und wie funktioniert es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!