héritage array js

Bonjour à tous,
La méthode proposée nécessite IE 11 minimum ou tout autre navigateur récent. Si vous avez besoins de gérer les versions antérieurs de IE lisez cet article en anglais qui explique la complexité et les différentes solutions au problème.
Peut être avec vous déjà vu ce genre de code  sur internet permettant de rajouter une fonction à tous les tableaux

Array.prototype.uneFonctionQuiDevraitPasEtreLa = function(){
//UNE ACTION
}

Le code ci-dessus marchera bien pour tous les tableaux mais il y a des risques de collisions si un autre développeur à déjà étendu le prototype de Array.

Je suis sur que  rajouter des fonctions directement à une ArrayList en java ne vous serez jamais venus à l’esprit, au lieu de cela vous auriez créer votre propre classe héritant de ArrayList.

C’est aussi possible en javaScript( ie11+, chrome, firefox) avec ce code.

var TabSousClass = function(tab){
    tab = tab || [];
    tab.__proto__ = TabSousClass.prototype;
    return tab;
}
TabSousClass.prototype.__proto__= Array.prototype
TabSousClass.prototype.suppElmt=function(elmt){
    return this.splice(this.indexOf(elmt),1);
}

TabSousClass est notre constructeur et sous CLasse de Array.
Maintenant une version un peu plus commenté avec un exemple si vous avez besoins:

//sous classe de Array
var TabSousClass = function(tab){
    tab = tab || [];
    tab.__proto__ = TabSousClass.prototype;
    //un exemple de constructeur par defaut
    instance.push(8,9)
    instance[50]=0; //instance.length == 51 comme pour un tableau
    //fin exemple
    return tab;
}

//heritage habituel équivalent de
//TabSousClasse.prototype = Object.create(Array.prototype)
TabSousClass.prototype.__proto__= Array.prototype

//exemple de fonction rajouté seulement aux instances de
//TabSousClass et non à tous les tableaux
//supprime un objet d’un tableau et le retourne, fonction qui
//bizarrement n’est pas implémenté de base

TabSousClass.prototype.suppElmt=function(elmt){
    return this.splice(this.indexOf(elmt),1);
}

//une instance de ma sous classe
var instSousTab = new TabSousClass();
instSousTab.push(10)
instSousTab[56]= "hello" //length 57

alert("instSousTab instanceof Array : "+(instSousTab instanceof Array)+"\n"+
"instSousTab instanceof TabSousClass : "+(instSousTab instanceof TabSousClass)+"\n"+
"contenu Tableau " + instSousTab +"\n"+
"instSousTab.length " + instSousTab.length +"\n"
 );

TabSousClass est votre Class héritant de tableau et aussi le constructeur vous pouvez modifier ce qu’il y a entre les 2 commentaires pour faire vos propres initialisationss, mais je vois très peu de cas d’utilisation.

Expliquation de newSubTab :

D’ habitude lorsque l’ont fait un new sur une function() on obtient un objet.
durant ce new il se passe 2 choses:
– le constructeur (la fonction) est appelé et return un objet.
– la référence du prototype de la classe ( objet contenant toute les fonction de la classe) est affecté au __proto__ de notre objet.

Sauf que si on ne met pas de return dans notre constructeur, le constructeur nous retourne le this de la fonction qui est un objet héritant (cad avec le __proto__ de l’objet = au prototype de ) de Object.
Nous souhaitons avoir un Array il faut retourner un array dans le constructeur.
il suffit alors avant de le retourner de dire que ce tableau est une instance de notre classe comme ceci

f.__proto__ = Class.prototype;

 Attention : Le Paramètre du constructeur change de type donc si ce n’est pas le comportement souhaité vous devez créer une copie préalablement. Si c’est le comportement souhaité on peut aussi se passer de l’opérateur new comme ceci.

tab=[1,2] // tab instanceof Array
TabSousClass(tab) //tab instanceof TabSousClass

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>