Discussion :

[Benjamin Delespierre]

Bonjour à tous.

Quelqu'un saurait-il m'expliquer pourquoi l'ajout de méthodes à un objet rends cette méthode visible lors de l'itération for ?

Exemple:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
Array.prototype.min = function () {
	var min;
	for (i in this) {
		write(this[i]);
		if (min == undefined || min > this[i])
			min = this[i];
	}
	return min;
}
 
write([1,2,3].min());

Le problème c'est que j'ai besoin d'ajouter des fonctionnalités à des objets natifs mais cela à tendance à perturber jQuery (surtout quand on ajoute des méthodes à Object, c'est la cata).

[TheGwy]

Cela est du au mécanisme d'héritage en javascript. Lorqu'une propriété ne peut être résolue le runtime va chercher de manière récursive dans la chaine de prototypage.

De la même manière lors d'une itération sur les clés tu itère sur les clés de l'objet (instances) mais aussi sur les clés visibles dans ta chaine de prototypage.

Pour itérer sur un objet sans itérer les clés héritées il faut faire :

Code :

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

1
2
3
for(var i on obj) if (obj.hasOwnProperty(i)){
    // loop
}

De plus tu ne dois pas itérer un tableau par clés, mais par indexs, sinon tu traversera aussi des propriétés de l'instance comme length (ce que tu ne veux pas faire) :

Code :

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

1
2
3
for(var i = 0, n = arr.length; i<n; i++){
    // loop
}

PS : il est considéré comme une mauvaise pratique d'augmenter les objets natifs. Il y a toujours une meilleure solution que d'ouvrir cette boîte de Pandore.

[Willpower]

Effectivement, c'est dangereux d'ajouter des prototypes à tous les Objets et jQuery a parfois un peu du mal avec ça.

essaye de faire des trucs du genre :

Code :

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
48
49
50
51
 
// nouvelle classe MyObject avec héritage(extend) basique
function MyObject(h) {
    if (h) this.extend(h);
    return this;
}
MyObject.prototype.extend = function (o) {
    for (var i in o)
        this[i] = o[i];
    return this;
};
 
// déclaration de prototypes personalisés
MyObject.prototype.toArray = function () {
    var r = [];
    for (var i in this)
        if (typeof (this[i]) != 'function' && typeof (this[i]) != 'object') r.push(this[i]);
    return r;
}
 
// création d'un nouvel objet "myObject" à partir d'un objet et utilisation de méthode prototypée
var obj = new MyObject({
    name: 'john',
    age: 22
});
alert(obj.toArray());
 
 
//--------------------------------------------------------
// après tu peux facilement faire des nouvelles classes à partir de myObject :
//--------------------------------------------------------
 
// nouvelle classe personalisée
function human(h) {
    return (new MyObject(h)).extend(this);
}
human.prototype.sing = function () {
    alert('lalala');
};
 
// utilisation
var me;
me = new human({
    eyes: 'blues',
    height: '1m80'
});
me = me.extend({
    hair: 'red'
});
me.sing();
alert(me.toArray());

edit: indentation

[Benjamin Delespierre]

Merci @TheGwy. Ce que je ne comprenais pas c'est pourquoi les membre natifs des objets ne se retrouvent pas dans la liste des clés. Pourtant cela fait effectivement partie de leur prototype. Dois-je en déduire que c'est la VM qui "masque" ces clés ?

PS : il est considéré comme une mauvaise pratique d'augmenter les objets natifs. Il y a toujours une meilleure solution que d'ouvrir cette boîte de Pandore.

C'est noté. En revanche c'est une alternative séduisante pour palier les insuffisances du langage au niveau fonctionnel (c'est vrai quoi, y'a même pas trim sur les chaines )
Vu qu'on ne devrait pas les augmenter, peut-on au moins en hériter ?

[Bovino]

c'est vrai quoi, y'a même pas trim sur les chaines

Heu... si : Le "core" JavaScript s'enrichit de nouvelles méthodes.

[TheGwy]

Merci @TheGwy. Ce que je ne comprenais pas c'est pourquoi les membre natifs des objets ne se retrouvent pas dans la liste des clés. Pourtant cela fait effectivement partie de leur prototype. Dois-je en déduire que c'est la VM qui "masque" ces clés ?

Exactement, il y a une propriété interne DontEnum qui n'est pas accessible au code client.
https://developer.mozilla.org/en/ECM...Enum_attribute
Les nouvelles API ES5 permettent d'avoir accès à cette propriété, mais d'ici la que ce soit utilisable partout, tu as le temps de venir voir.

C'est noté. En revanche c'est une alternative séduisante pour palier les insuffisances du langage au niveau fonctionnel (c'est vrai quoi, y'a même pas trim sur les chaines )
Vu qu'on ne devrait pas les augmenter, peut-on au moins en hériter ?

Oui, comme Willpower l'a montré tu peux parfaitement faire un Objet qui hérite ou encapsule un objet natif, et étendre celui-ci de manière sûre.

Personnellement je suis plutôt adepte de l'objet avec des fonctions utilitaires statiques (genre StringUtils, etc). C'est un peu plus "lourd" syntaxiquement mais très clair niveau compréhension.

Après si c'est un projet de petite ampleur où tu es l'auteur de tout le code (pas de passif, source externes, mashups, librairies, plugins) tu peux te permettre d'étendre les objets natifs car tu ne risque pas de casser du code qui n'est pas le tiens. Mais c'est quand même rare de se retrouver dans ce cas.

Un bon article sur la question avec plusieurs approches décortiquées :
http://perfectionkills.com/extending...s-evil-or-not/

[Benjamin Delespierre]

Oui, comme Willpower l'a montré tu peux parfaitement faire un Objet qui hérite ou encapsule un objet natif, et étendre celui-ci de manière sûre.

Encapsuler ça va, mais pour l'héritage je galère comme un veau...

J'ai tenté ça mais visiblement il manque quelque chose:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
myString.prototype = new String;
myString.prototype.constructor = myString;
 
function myString ( str ) {
	String.call(this, str);
}
 
var str = new myString('test');
 
dump(str instanceof String); // true
 
write(str); // TypeError: String.prototype.valueOf called on incompatible Object