Javascript les spécificités du langage - Partie 6 -

1. Javascriptles spécificités du langage- Partie 6 -

2. Le binding (attachement) • On peut attacher un événement à un élément du DOM, cela veut dire qu’à une action sur cet élément un ou plusieurs événements seront déclenchés. • On peut également attacher un contexte à un objet du fait système de scope de Javascript. Effectivement il arrive souvent qu’on réaffecte le contexte « this » dans un callback.

3. Le binding (attachement) Le bindingd’évènements : Peu de chose à ajouter, il se fait tout simplement comme cela : window.onload = function() { alert ("Je suis chargé"); } A noter que la fonction de gestionnaire d’événement s’appelle « bind » en jQuery.

4. Le binding (attachement) Le binding de contexte (ou d’objets) Voici comment nous allons créer notre fonction de binding : // Prototypage de l'objet Function Function.prototype.bind = function(context) { var m = this; // référence l'instance de Function (closure) return function() { return m.apply(context, arguments); } }

5. Le binding (attachement) • Grâce à l’ « apply », nous allons pouvoir appliquer le contexte passé en paramètre sur la fonction de binding et donc sur l’objet même grâce a prototypage et à la closure. • Cette fonction « bind » est par exemple implémentée dans la librairie Prototype.

6. Le binding (attachement) Voici un exemple où nous utilisons le binding de contexte : // Creation de mon object en JSON var monObjet = { monAttribut: 4, maMethode : function() { window.onload = function() { // Grâce au bind "this" est bien monObjet et non window alert (this.monAttribut); }.bind(this); } } // Affiche 4 une fois la fenêtre chargée monObjet.maMethode();

7. Le binding (attachement) On peut également avoir une autre approche pour créer la fonction de binding, sans passer par un prototypage de « Function », c’est la solution qu’utilise la librairie Underscore « _ »

8. Le binding (attachement) var bind = function(source, add) { var args = []; for(var index=2;index <= arguments.length; index++) { args[index - 2] = arguments[index]; } return function() { return source.apply(add, args); } } // Creation de mon object en JSON var monObjet = { monAttribut: 4, maMethode : function() { window.onload =bind( function() { // Grâce au bind "this" est bien monObjet et non window alert (this.monAttribut); }, this); } } // Affiche 4 une fois la fenêtre chargée monObjet.maMethode();

9. Le binding (attachement) • A noter qu’en jQuery, c’est la fonction « proxy » qui permet faire du binding de contexte. • Proxy parce qu’on peut considérer que la fonction joue le rôle de passerelle entre 2 objets différents, entre le gestionnaire d’événements et l’objet qu’on a défini par exemple.