comparte el articulo 

Uso de binding con MooTools

Actualizado el 29/01/2014 < > 0 Comentarios

Resumen: Explicamos cómo utilizar la función bind de MooTools para hacer uso de variables en distintos ámbitos.

El método bind es una de las funciones más utilizadas en la definción y manejo de eventos mediante MooTools. Su funcionalidad principal consiste en cambiar el ámbito de la variable this al llamar una función.

El uso de la variable this en JavaScript, varia según el ámbito donde se este utilizando. Es decir, this es una referencia directa al objeto sobre el que se está ejecutando una función. Para entender un poco mejor esto, echemos un vistazo a lo que es el Scope.

Scope

A medida que nuestros programas se vuelven más complejos, es necesario que tengamos una comprensión más adecuada de lo que es el scope. En pocas palabras, el scope es la forma en que las variables de JavaScript se relacionan con un punto de ejecución, estableciendo el alcance que pueden llegar a tener.

Existen variables globales, que son aquellas que pueden ser referenciadas desde cualquier lugar del documento y ocupan el nivel más bajo de ejecución, variables locales, que son las variables que limitan su uso a su función contenedora o clausura inmediata, y por último, tenemos a las autoreferencias, es decir la palabra “this”, que es la forma de hacer referencia al contexto del punto de ejecución actual de JavaScript.

    var variable_global = true;  
      
    var unaFuncion = function(){  
        var variable_local = true;
    }  
      
    $('button').addEvent('click', function(){  
        this.addClass('una_clase'); //autoreferencia  
    });  

Variable this

La variable this nos permite realizar operaciones con el objeto con el que actualmente se trabaja, obteniendo acceso a lo establecido en el ámbito desde donde se localiza la llamada. Veamos los siguientes ejemplos, para entender un poco mejor como funciona esto.

// función
foobar(); // this dentro de foobar hace referencia al objeto global

// método
prueba.foobar(); // this dentro de foobar hará referencia a "prueba"

// constructor
new foobar(); // this dentro de foobar hará referencia al nuevo objeto creado

Binding

Al hacer referencia a una variable en el código, JavaScript empieza su recorrido desde su actual posición de ejecución atravesando todos los niveles accesibles de variables, hasta que localiza la primera y más cercana ocurrencia de un resultado positivo. Este comportamiento es menos que deseable, sobre todo cuando se trata de eventos dentro de literales de objeto, ya que albergan sus propias autoreferencias.

Para evitar problemas como éste, los desarrolladores a menudo recurren a lo que comúnmente se le llama “clausuras léxicas”, lo cual consiste en almacenar la autorreferencia en una variable con un nombre diferente. Por su parte, MooTools ofrece un medio alternativo para lograr esto a través de su método bind(), lo cual no sólo resulta más limpio, sino que mucho más elegante. Observemos el siguiente ejemplo:

    addEvents: function(){  
        $('button').addEvent('click', function(){  
            //El binding substituye la actual autoreferencia por la que pasa el objeto
            this.unaFuncion();   
        }.bind(this)); // Aquí hacemos bind de this al handler del evento click
    },  
      
    unaFuncion: function(){  
        //código
    },

De esta manera podemos definir el valor de la variable this dentro de la función. Dicho valor se debe escribir en la declaración de la propia función, y de esa manera podremos acceder a ese ámbito cuando se ejecute la función.

Publicado el 29/01/2014, última actualización 29/01/2014.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras