danielhagnoul

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

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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)