par , 22/11/2014 à 18h40 (1649 Affichages)
On gagnera largement en remplaçant la valeur retournée par "typeof" par celle de la propriété "[[Class]]" (ES5 : The [[Class]] internal property).
En JS tout est objet et chaque objet hérite d'une méthode "toString".
En ES5, la méthode générique renvoie toujours "[[Class]]", cette propriété est disponible uniquement en lecture.
Lorsqu'on utilise explicitement ou implicitement "toString" on ne voit généralement pas cette propriété à cause des surcharges appliquées sur la méthode "toString" générique ou du traitement appliqué par le navigateur, lors d'un "console.log( Obj )" par exemple.
Nous devrons utiliser : "Object.prototype.toString.call( Obj )" qui retourne un array "[ object, [[Class]] ]".
Pour chaque type d'objet ES5, la valeur de cette propriété est la même dans tous les navigateurs conformes à la norme.
Pour les objets créés par le navigateur (window, document, objets du DOM) la valeur de la propriété [[Class]] n'est pas définie par la norme ES5, elle peut différer d'un navigateur à l'autre. Dans ce cas, il sera toujours possible de se servir de cette propriété pour détecter un changement de type pendant l'exécution du programme.
Fonction getType
1 2 3 4
| function getType( Obj ){
// retourne, en minuscule, la propriété [Class]]
return Object.prototype.toString.call( Obj ).match( /\s([a-zA-Z]+)/ )[ 1 ].toLowerCase();
} |
Exemples
1 2 3 4 5 6 7 8 9 10 11 12
| console.log( getType( { a : 4 } ) ); // object
console.log( getType( new ReferenceError ) ); // error
console.log( getType( new Date ) ); // date
console.log( getType( /a-z/ ) ); // regexp
console.log( getType( Math ) ); // math
console.log( getType( JSON ) ); // json
console.log( getType( 4 ) ); // number
console.log( getType( new Number( 4 ) ) ); // number
console.log( getType( "abc" ) ); // string
console.log( getType( new String( "abc" ) ) ); // string
console.log( getType( true ) ); // boolean
console.log( getType( new Boolean( true ) ) ); // boolean |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
| console.log( "*** Objet et héritage ***" );
var Animal = function( name ){
this.name = name;
},
Dog = function( name, pays ){
Animal.call( this, [ name ] );
this.pays = pays;
};
Animal.prototype = {
"sayName" : function() {
return this.name;
}
};
Dog.prototype = Object.create( Animal.prototype );
Dog.prototype.sayName = function( str ){
return ( str + Animal.prototype.sayName.call( this ) );
};
Dog.prototype.bark = function(){
return "Woof!";
};
var MonChien = new Dog( "Youki", "Belgique" ),
AutreChien = new Dog( "Caline", "France" );
Object.defineProperties( AutreChien, {
"vacciner" : {
"value" : true,
"enumerable" : true
}
});
console.log( getType( Animal ) ); // function
console.log( getType( Dog ) ); // function
console.log( getType( MonChien ) ); // object
console.log( getType( AutreChien ) ); // object
console.log( getType( MonChien ) ); // object
console.log( getType( AutreChien ) ); // object
console.log( getType( MonChien.sayName ) ); // function
console.log( getType( MonChien.sayName() ) ); // string
console.log( getType( MonChien.pays ) ); // string
console.log( getType( AutreChien.vacciner ) ); // boolean
console.log( getType( Object.keys( MonChien ) ) ); // array |
1 2 3 4 5 6 7
| console.log( "*** Les objets créés par le navigateur ***" );
console.log( getType( window ) ); // global (Chrome 39) window (Firefox, IE 11)
console.log( getType( document ) ); // htmldocument (Chrome 39, Firefox, IE 11)
console.log( getType( document.querySelector( "body" ) ) ); // htmlbodyelement (Chrome 39, Firefox 33, IE 11)
console.log( getType( document.querySelector( "div" ) ) ); // htmldivelement (Chrome 39, Firefox 33, IE 11)
console.log( getType( jQuery( "div" ).get( 0 ) ) ); // htmldivelement (Chrome 39, Firefox 33, IE 11) |