Warum ist es möglich, jQuery ('div') wie ein Array abzufragen?

8

Ich habe eine andere Frage bezüglich der Architektur von jQuery. $('div') erstellt ein neues jQuery -Objekt:

%Vor%

Ich würde gerne wissen, warum es möglich ist, es wie ein Array abzufragen, obwohl es kein Array ist?

%Vor%

Ich liebe diese Syntax, es sieht so sauber aus! Ich bemerkte auch, dass dies die DOM-Knoten als Array zurückgibt:

%Vor%

Kann mir jemand erklären, wie ich dieses Verhalten auf meine eigenen Objekte anwenden kann?

Mein eigener Ansatz bestand darin, ein Array mit einigen Methoden wie folgt zu erstellen:

%Vor%

Dies scheint jedoch nicht die Art zu sein, wie jQuery es tut, da dies tatsächlich ein Array ist:

%Vor%

Ich würde gerne wissen, wie jQuery das lernt und ob es eine bessere Lösung ist als meine.

    
js-coder 09.01.2012, 18:05
quelle

5 Antworten

10

Ein jQuery-Objekt nennen wir Array-like object . Das heißt, es ist tatsächlich ein "wahres" Objekt (tatsächlich sind alle "Arrays" Objekte in ECMAscript), aber es besitzt bestimmte Eigenschaften, die es wie ein "wahres" Array aussehen lassen. Diese Eigenschaften sind

  • es als .length Eigenschaft
  • besitzt die Methode .splice()

Diese beiden Fakten reichen aus, dass die meisten js Engines Konsolen dieses Objekt als Array interpretieren.

Beispiel :

%Vor%

Wenn wir jetzt unser Objekt protokollieren

%Vor%

Wir erhalten das typische jQuery'ish-Ergebnis

%Vor%

Sehen Sie das in Aktion

aber wir können immer noch unsere Methode .aNiceFunction() für dieses Objekt aufrufen. Indem wir neue Elemente mit der Methode Array.prototype.push() auf unser Objekt schieben, indexiert ECMAscript diese Elemente automatisch für uns. Das war eine kurze Beschreibung was unter der jQuery-Haube passiert.

Noch ein Wort zu "Arrays" in ECMAscript. Es gibt keine echten Arrays in dieser Sprache (wenn wir typisierte Arrays für eine Sekunde vergessen). Es gibt nur Object . Wenn wir ein Objekt haben, das von Array.prototype erbt, würden wir es fast als Array bezeichnen. Alles, was wir noch tun müssten, ist, die Eigenschaft .length auf 0 zu setzen.

    
jAndy 09.01.2012, 18:09
quelle
2

jQuery-Objekte sind array-ähnliche Objekte.

Ein Array-artiges Objekt ist ein gewöhnliches Objekt, das dieselben Eigenschaften wie ein Array hat.
Ein Array-ähnliches Objekt hat eine length -Eigenschaft, die auf eine positive ganze Zahl festgelegt ist, und die Eigenschaften 0 , 1 , ... length − 1 , die die Array-Objekte enthalten.

    
SLaks 09.01.2012 18:08
quelle
1

Das Behandeln eines jQuery-Objekts wie eines Arrays ist eine Anwendung der Enttippung . Aus Wikipedia :

  

In der Computerprogrammierung mit objektorientierten Programmiersprachen   Duck-Typisierung ist ein Stil der dynamischen Typisierung, in dem die aktuelle Objektgröße angegeben wird   Eine Menge von Methoden und Eigenschaften bestimmt vielmehr die gültige Semantik   als seine Vererbung von einer bestimmten Klasse oder Implementierung von a   spezifische Schnittstelle.

Mit anderen Worten, es ist nicht wichtig, dass die Funktion jQuery tatsächlich eine Array-Instanz zurückgibt, solange sie die erforderlichen Eigenschaften ( zB length , numerische Indizes) und Methoden zu agiere wie ein Array.

JavaScript hat andere array-ähnliche Objekte. Zum Beispiel ist das Objekt arguments auch kein Array, aber es hat Eigenschaften (wie length ), die es erlauben, so zu tun.

    
Wayne Burkett 09.01.2012 18:13
quelle
0

jQuery-Objekte sind array-ähnliche Objekte. Betrachten Sie den folgenden Code:

%Vor%

Wenn Sie Ihren Code ändern, können Sie denselben Effekt erzielen:

%Vor%     
doogle 09.01.2012 18:10
quelle
0

Ich bin nicht sicher, was diese "Array-artige" Verrücktheit von den anderen Antworten ist. Es gibt keine Standardterminologie für "array-like".

Der tatsächliche Unterschied ist hier der Unterschied zwischen einem tatsächlichen Array, das eine Sammlung von Elementen ist, und einer verknüpften Liste, die eine Sammlung von Referenzen darstellt. In Bezug auf das DOM wird eine verkettete Liste korrekt als eine Knotenliste bezeichnet. Diese Artikel haben mehr Informationen:

Ссылка

Ссылка

Ссылка

    
austincheney 09.01.2012 18:16
quelle

Tags und Links