Vérifier si l'objet est un objet jQuery

602

Existe-t-il un moyen rapide de vérifier si un objet est un objet jQuery ou un objet JavaScript natif?

exemple:

var o = {};
var e = $('#element');

function doStuff(o) {
    if (o.selector) {
        console.log('object is jQuery');
    }
}

doStuff(o);
doStuff(e);

évidemment, le code ci-dessus fonctionne mais ce n'est pas sûr. Vous pouvez potentiellement ajouter une touche de sélection à l' oobjet et obtenir le même résultat. Existe-t-il une meilleure façon de s'assurer que l'objet est bien un objet jQuery?

Quelque chose en ligne avec (typeof obj == 'jquery')

David Hellsing
la source
3
Depuis jQuery 3.0, ce n'est certainement pas un moyen correct de vérifier qu'un objet est un objet jQuery car la selectorpropriété a été dépréciée il y a longtemps et supprimée dans 3.0. Même dans les versions antérieures, un objet jQuery peut avoir une chaîne de sélecteur vide, par exemple $(window)sans sélecteur. Utilisez instanceofplutôt.
Dave Methvin

Réponses:

878

Vous pouvez utiliser l' instanceofopérateur:

if (obj instanceof jQuery){
    console.log('object is jQuery');
}

Explication : la jQueryfonction (aka $) est implémentée en tant que fonction constructeur . Les fonctions constructeur doivent être appelées avec le newpréfixe.

Lorsque vous appelez $(foo), jQuery en interne traduit cela par new jQuery(foo)1 . JavaScript procède à l'initialisation thisà l'intérieur de la fonction constructeur pour pointer vers une nouvelle instance de jQuery, en définissant ses propriétés sur celles trouvées sur jQuery.prototype(aka jQuery.fn). Ainsi, vous obtenez un newobjet où instanceof jQueryest true.


1 C'est en fait new jQuery.prototype.init(foo): la logique constructeur a été déchargée vers une autre fonction constructeur appelée init, mais le concept est le même.

Croissant frais
la source
8
Alors tu veux dire if (obj instanceof jQuery){...}?
Nigel Angel
2
@NigelAngel: Oui, c'est ce qu'il veut dire :)
ChaseMoskal
12
Cela ne fonctionne pas en cas de plusieurs instances jQuery sur une page.
Georgii Ivankin
5
@CrescentFresh Je veux dire si j'ai dans mon espace de noms actuel pointant vers jQuery2 et que j'ai un objet de l'espace de noms externe (où $ est jQuery1) que je n'ai aucun moyen d'utiliser instanceof pour vérifier si cet objet est un objet jQuery.
Georgii Ivankin du
6
Si vous ne savez pas si jQuery est chargé au moment de l'instruction if, vous pouvez étendre la vérification typeof jQuery === 'function' && obj instanceof jQuerycar il jQueryn'est pas nécessaire de le déclarer pour que l' typeofopérateur fonctionne sans générer d'erreur.
Patrick Roberts
105

Vous pouvez également utiliser la propriété .jquery comme décrit ici: http://api.jquery.com/jquery-2/

var a = { what: "A regular JS object" },
b = $('body');

if ( a.jquery ) { // falsy, since it's undefined
    alert(' a is a jQuery object! ');    
}

if ( b.jquery ) { // truthy, since it's a string
    alert(' b is a jQuery object! ');
}
mt81
la source
12
Comme David l'a souligné dans la question, vérifier une propriété d'une variable dont la valeur pourrait être nulle (c'est-à-dire si "a" ou "b" étaient nuls) n'est pas sûr (il lèvera une TypeError). Il est préférable d'utiliser "b instanceof jQuery".
rstackhouse
23
Cette méthode fonctionne si jQuery n'est pas chargé, tandis que b instanceof jQueryrenvoie une ReferenceError si jQuery n'est pas disponible sur la page. Les deux approches sont utiles dans des cas différents.
Nate
Plus efficace peut-être, mais toujours pas sûr. Cela peut nécessiter try ... catch, en particulier dans oldIE.
ClarkeyBoy
Dans les cas où il est possible que jQuery ne soit pas chargé, vous pouvez utiliserif ((typeof jQuery !== 'undefined') && (obj instanceof jQuery)) {...
Harry Pehkonen
Ce n'est pas un si bon exemple. Il est plus probable que ace soit un nœud DOM, document.bodyet puis, théoriquement, il est possible que la jqueryclé soit en quelque sorte sur la chaîne de ce nœud.
vsync
30

Découvrez l' opérateur instanceof .

var isJqueryObject = obj instanceof jQuery
Corey Sunwold
la source
26

La meilleure façon de vérifier l'instance d'un objet est via l' opérateur instanceof ou avec la méthode isPrototypeOf () qui inspecte si le prototype d'un objet se trouve dans la chaîne de prototypes d'un autre objet.

obj instanceof jQuery;
jQuery.prototype.isPrototypeOf(obj);

Mais parfois, il peut échouer dans le cas de plusieurs instances jQuery sur un document. Comme l'a mentionné @Georgiy Ivankin:

si j'ai $dans mon espace de noms actuel pointant vers jQuery2et que j'ai un objet de l'espace de noms externe (où $est jQuery1) alors je n'ai aucun moyen d'utiliser instanceofpour vérifier si cet objet est un jQueryobjet

Une façon de résoudre ce problème consiste à aliaser l'objet jQuery dans une fermeture ou IIFE

//aliases jQuery as $
(function($, undefined) {
    /*... your code */

    console.log(obj instanceof $);
    console.log($.prototype.isPrototypeOf(obj));

    /*... your code */
}(jQuery1));
//imports jQuery1

Pour résoudre ce problème, vous pouvez également demander à la jquerypropriétéobj

'jquery' in obj

Cependant, si vous essayez d'effectuer cette vérification avec des valeurs primitives, cela générera une erreur, vous pouvez donc modifier la vérification précédente en vous assurant objd'être unObject

'jquery' in Object(obj)

Bien que la méthode précédente ne soit pas la plus sûre (vous pouvez créer la 'jquery'propriété dans un objet), nous pouvons améliorer la validation en travaillant avec les deux approches:

if (obj instanceof jQuery || 'jquery' in Object(obj)) { }

Le problème ici est que tout objet peut définir une propriété jquerycomme propre, donc une meilleure approche serait de demander dans le prototype, et de s'assurer que l'objet n'est pas nullouundefined

if (obj && (obj instanceof jQuery || obj.constructor.prototype.jquery)) { }

En raison de la contrainte , la ifdéclaration fera un court - circuit en évaluant l' &&opérateur lorsque objest l' un des falsy valeurs ( null, undefined, false, 0,"" ), et procède ensuite à effectuer les autres validations.

Enfin, nous pouvons écrire une fonction utilitaire:

function isjQuery(obj) {
  return (obj && (obj instanceof jQuery || obj.constructor.prototype.jquery));
}

Jetons un coup d'œil à: Opérateurs logiques et vérité / fausse

jherax
la source
Mais comment cela améliore-t-il la sécurité? Les objets non jQuery avec une propriété jquery seraient toujours mal détectés. Je ne vois pas non plus quoi d'autre utiliser les deux approches pourrait "s'améliorer".
Gui Prá
c'est un moyen facile de vérifier si un objet est un objet jQuery, si pour une raison quelconque vous soupçonnez que quelqu'un crée des objets avec des propriétés telles que jquery , alors vous pouvez créer un validateur plus robuste, c'est-à-dire vérifier les propriétés dans le prototype: myObj .constructor.prototype.jquery ou mieux encore, vous pouvez utiliser la fonction Object.prototype.isPrototypeOf ()
jherax
1
Si vous faites ||cela avec un 'jquery' in Object(obj), cependant, cela va s'écouler, car cela n'empêchera pas les objets non jQuery avec cette propriété de passer la vérification. Je crois cependant que la vérification de cette propriété dans le prototype améliore la situation. Vous devriez peut-être ajouter cela à votre réponse! Je ne pense pas qu'une autre réponse ici mentionne cette possibilité :)
Gui Prá
1
n'est pas obj.__proto__.jqueryau lieu de obj.constructor.prototype.jqueryassez? juste un peu court :)
Axel
1
@Axel oui, ça marche aussi :). J'ai utilisé constructor.prototypecar objest censé être une instance du constructeur, c'est-à-dire jQuery. D'autre part __proto__est disponible pour tout type d'objet.
jherax
3
return el instanceof jQuery ? el.size() > 0 : (el && el.tagName);
johnchou
la source
Pour vérifier un élément DOM, mieux utiliser la nodeTypepropriété et garantir qu'une booleanvaleur soit renvoyée, vous pouvez utiliser la double négation!!(el && el.nodeType)
jherax
3

Cependant, il existe un autre moyen de vérifier l'objet dans jQuery.

jQuery.type(a); //this returns type of variable.

J'ai fait exemple pour comprendre les choses, lien jsfiddle

Shaunak Shukla
la source
2

Pour ceux qui veulent savoir si un objet est un objet jQuery sans avoir installé jQuery, l'extrait de code suivant devrait faire le travail:

function isJQuery(obj) {
  // Each jquery object has a "jquery" attribute that contains the version of the lib.
  return typeof obj === "object" && obj && obj["jquery"];
}
Karl.S
la source
1

Vous pouvez vérifier si l'objet est produit par JQuery avec la jquerypropriété:

myObject.jquery // 3.3.1

=> retourne le numéro de la version JQuery si l'objet produit par JQuery. => sinon, il retourneundefined

Jérôme-Victor Toulouse
la source
-9
var elArray = [];
var elObjeto = {};

elArray.constructor == Array //TRUE
elArray.constructor == Object//TALSE

elObjeto.constructor == Array//FALSE
elObjeto.constructor == Object//TRUE
Gabriel Seg
la source
11
Les vidages de code sans explication sont rarement utiles. Veuillez envisager d'ajouter un peu de contexte à votre réponse.
Chris