Lo que necesita saber sobre el alcance de JavaScript

1. Usted está aquí
   1. Cómo funciona
2. Bibliotecas
   1. Prototipo
   2. extensión JS
   3. MooHerramientas
3. Por tu cuenta
   1. Llama y aplica
   2. Alcance del controlador de eventos
4. Conclusión
5. Recursos adicionales

Comprender el alcance en la programación es clave para apreciar cómo interactúan las variables con el resto del código. En algunos lenguajes, esto puede ser bastante sencillo, pero las funciones anónimas y las características de manejo de eventos de JavaScript, junto con un par de pequeñas peculiaridades, significan que el manejo del alcance en sus aplicaciones puede volverse frustrante.

Comprender el alcance en la programación es clave para apreciar cómo interactúan las variables con el resto del código. En algunos lenguajes, esto puede ser bastante sencillo, pero las funciones anónimas y las características de manejo de eventos de JavaScript, junto con un par de pequeñas peculiaridades, significan que el manejo del alcance en sus aplicaciones puede volverse frustrante.

Este artículo analiza cómo JavaScript maneja el alcance y cómo varias bibliotecas de JavaScript proporcionan métodos para abordarlo y cómo suavizan algunos obstáculos. También veremos cómo puedes volver a lo básico y hacer algunas discusiones interesantes sobre el alcance sin una biblioteca, un enfoque útil si estás escribiendo código que necesita ser independiente.

Quizás te interesen las siguientes publicaciones relacionadas:

• Siete cosas de JavaScript que desearía saber mucho antes en mi carrera
• Una introducción a JavaScript de pila completa
• Bibliotecas JavaScript útiles y complementos jQuery

Usted está aquí

Entonces, ¿qué es el “alcance”? Podríamos decir que se refiere a tu ubicación actual. Si ejecuta algo de JavaScript como...

var iAmGlobal = 5 * 5;

… entonces estás corriendo en el ámbito global, el gran mundo, donde no puedes ir más lejos. Por algo como…

function doSomething() { var inner = 5 * 5;};

… ahora estás encerrado en esta función, ejecutándose dentro de su alcance. La frase “encajonado” es apropiada; echa un vistazo a este código:

var g = "global";function go() { var l = "local";}go();alert(l); // throws a reference error

Verás que cuando ejecutamos la gofunción, la lvariable está contenida dentro del alcance de esa función. No se puede acceder a él desde un ámbito de nivel superior.

Cómo funciona

Además del alcance variable, JavaScript usa la thispalabra clave para obtener una referencia al contexto de ejecución actual. Ese término bastante aterrador se resume en esto: en cualquier punto de su código JavaScript, puede preguntar “¡Ayuda! ¿Dónde estoy?" y recuperar una referencia de objeto. Esta referencia es para el contexto actual, el objeto que "posee" el código que se está ejecutando actualmente.

Ahora bien, se podría pensar que, dado lo que acabamos de aprender sobre el alcance, el propietario del código actual sería el alcance en el que se ejecuta. Después de todo, en JavaScript, incluso las funciones son objetos y pueden transmitirse en variables. Pero no. Tome esta función, por ejemplo:

function go() { console.debug(this); }go();

Esto le brinda una referencia al contexto de ejecución de nivel superior; en un navegador, esa es la propia ventana del navegador.

Hay algunas excepciones a esto. Por ejemplo, si creamos un objeto JavaScript y luego llamamos a un método en él, entonces el alcance está vinculado al objeto:

var myObject = { go: function() { console.debug(this); } };myObject.go(); // console.debugs a reference to myObject

De manera similar, cuando se utilizan funciones como constructores, se ve el mismo comportamiento:

function MyClass() { this.go = function() { console.debug(this); }}var instance1 = new MyClass();var instance2 = new MyClass();instance1.go(); // console.debugs a reference to the MyClass instance1instance2.go(); // console.debugs a reference to the MyClass instance2

Sin embargo, observe en este caso que la referencia es a la instancia de objeto individual en lugar de a la definición de clase, lo que contrasta con el ejemplo literal de objeto anterior en el que siempre recibiremos una referencia al mismo objeto.

Con los controladores de eventos, las cosas se vuelven un poco más confusas. Si especifica un controlador de eventos en línea en HTML, terminará haciendo referencia al objeto de ventana global. Sin embargo, si usa JavaScript para conectar sus eventos, obtendrá una referencia al objeto DOM que lo generó; por ejemplo, un controlador de clic en un botón tendría el elemento del botón como referencia.

Los controladores de eventos son una situación común en la que desea vincular una función a un ámbito diferente; Muchas bibliotecas de JavaScript ofrecen funciones para ayudar a lograr precisamente eso. Echemos un vistazo a algunas opciones comunes.

Bibliotecas

Muchos desarrolladores utilizan bibliotecas de JavaScript para evitar tener que lidiar con inconsistencias del navegador y aprovechar los numerosos atajos que ofrecen. El manejo del alcance es algo en lo que la mayoría de las bibliotecas ayudan, así que echemos un vistazo a lo que ofrecen algunos de los principales actores.

Prototipo

Prototype viene con un método de vinculación que permite al desarrollador especificar el contexto vinculado para una función.

var products = ['Shoes', 'Sweater', 'Jeans', 'Wig'];function showCount() { for(var i = 0; i number; i++) { document.body.innerHTML += this[i] + '. '; }}var fn = showCount.bind(products);fn(2); // outputs Shoes. Sweater. to the document

También admite el paso de argumentos que se "recuerdan" cuando se llama a la función, y estos se pueden usar para crear funciones de acceso directo; básicamente una versión de una función que por defecto pasa ciertos argumentos:

var showOne = showCount.bind(products, 1);var showFour = showCount.bind(products, 4);showOne(); // outputs Shoes.showFour(); // output Shoes. Sweater. Jeans. Wig.

Consulte Prototipos Function.currypara obtener más información sobre este aspecto particular de Function.bind. La segunda característica útil del manejo del alcance de Prototype es bindAsEventListener. Esto es muy similar bindpero garantiza que el primer argumento pasado al controlador de eventos sea el objeto del evento.

Event.observe( $('showCountButton'), 'click', showCountHandler.bindAsEventListener(products, 2));

Aquí estamos usando las funciones de eventos de Prototype para configurar un detector de eventos cuando se showCountButtonhace clic en. Estamos pasando nuestra productsmatriz como contexto al que está vinculada la función, pero en este caso se showCountHandlervería así: Remedios Naturales Caseros Trucos Y Consejos De Salud

function showCountHandler(e, number) { for(var i = 0; i number; i++) { document.body.innerHTML += this[i] + '. '; } Event.stop(e);}

Entonces tenemos la productsmatriz como this, pero también tenemos el eobjeto de evento pasado automáticamente como primer parámetro, que luego podemos usar para detener el evento predeterminado.

Los dos métodos Prototype para vincular contexto son útiles porque se usan exactamente de la misma manera, por lo que tienes un método muy simple y consistente para controlar tu contexto.

extensión JS

Ext JS tiene un mayor alcance que Prototype o MooTools en el sentido de que proporciona un marco completo de extremo a extremo para la creación de aplicaciones y UI. Esto significa que también proporciona más funciones para controlar el alcance. Para compararlo con Prototype, veamos cómo vincularlo a un contexto particular:

var fn = showCount.createDelegate(products, 4);

Su uso es idéntico al método de vinculación de Prototype. ¿Pero hay alguna diferencia cuando se trata de controladores de eventos?

Ext.get('showCountButton').on('click', showCountHandler.createDelegate(products, 4));

Así es: no hay diferencia. Ext JS normalizará el objeto de evento en un an Ext.EventObjectpara usted y luego agregará sus argumentos adicionales después de eso. Sin embargo, hay dos advertencias al respecto. Primero, Ext no solo pasa el objeto del evento al controlador, sino que también pasa el origen del evento (en este caso, el showCountButton) y cualquier opción que se haya pasado al onmétodo. Entonces, nuestro controlador ahora se ve así:

function showCountHandler(e, source, options, number) {}

Sin embargo, existe un atajo para usar createDelegatee implica comprender los argumentos del onmétodo. Podemos hacer esto así:

Ext.get('showCountButton').on('click', showCountHandler, products, { number: 4 });

El tercer argumento de ones el alcance bajo el cual debe ejecutarse el controlador, lo que elimina la necesidad de utilizar createDelegate. Sin embargo, para pasar más parámetros, tenemos que usar el optionsparámetro. Entonces nuestro manejador en este caso sería:

function showCountHandler(e, source, options) { number = options.number;}

Esto no es tan elegante en el lado del controlador, pero es útil saber que Ext JS proporciona una variedad de métodos para lograr cosas similares, y puede usarlos en consecuencia al crear sus aplicaciones.

MooHerramientas

La biblioteca MooTools proporciona dos métodos que son esencialmente reemplazos para las versiones Prototype: bindy bindWithEvent, también conocido como bindAsEventListener. Sin embargo, además de estas características familiares, ofrece un par más que brindan flexibilidad adicional. Mi favorito es Function.create:

var fn = showCount.create({ bind: products, arguments: 4});

Esto es bonito y conciso, y para convertirlo en un controlador de eventos, hacemos esto:

showCount.create({ bind: products, arguments: 4, event: true});

Podemos pasar opciones adicionales, como delay, que difiere la ejecución de la función por un número específico de milisegundos, y periodical, que activa la función cada vez que transcurre el intervalo especificado.

Una biblioteca que brilla por su ausencia es jQuery, que no ofrece ninguna función de vinculación de contexto. Pero JavaScript tiene características integradas que le permiten administrar el contexto en muchos escenarios y también proporciona métodos relativamente simples para crear sus propias soluciones a problemas más complicados.

Por tu cuenta

No soy ningún snob: aprovechar el arduo trabajo de los grandes desarrolladores que han dedicado mucho tiempo a sus bibliotecas tiene mucho sentido. Habrán solucionado todos los errores y casos extremos para que usted no tenga que hacerlo. Por otro lado, comprender lo que sucede a nivel de JavaScript es importante, no sólo como ejercicio académico sino también para aquellas ocasiones en las que no puedes confiar en una biblioteca.

A veces es mejor ofrecer scripts independientes de la biblioteca; por ejemplo, si desea que su código esté disponible públicamente y para su uso generalizado. Al confiar en una biblioteca, restringe el uso del código a las personas que usan esa biblioteca.

Echemos un vistazo a cómo se pueden manejar el alcance y el contexto sin utilizar una biblioteca.

Llama y aplica

Las funciones de JavaScript tienen dos métodos disponibles que son de particular interés para manejar el contexto. Miremos a call:

showCount.call(products, 4);

Applyes muy similar pero se usa cuando no sabes cuántos argumentos pasarás. Toma una matriz como segundo parámetro:

showCount.apply(products, [4]);

Ambos logran el mismo objetivo, pero su caso de uso determinará cuál funcionará mejor para usted.

Alcance del controlador de eventos

Vimos en las explicaciones del alcance cómo los controladores de eventos causan problemas y también vimos cómo las diversas bibliotecas de JavaScript proporcionan medios para solucionar este problema. Si está atascado con JavaScript básico, entonces simplemente tiene que escribir sus propios medios para determinar el alcance de los controladores de eventos, y veremos cómo hacerlo ahora.

Cally applyactivar la función inmediatamente: eso no es lo que buscamos. En su lugar, queremos devolver una nueva función, que luego será llamada cuando se active el evento. Entonces:

Function.prototype.bindContext = function() { // when adding functions using prototype, "this" is the // object which the new function was called on var callingFunction = this; // pass the desired scope object as the first arg var scope = arguments[0]; // create a new arguments array with the first arg removed var otherArgs = []; for(var i = 1; i arguments.length; i++){ otherArgs.push(arguments[i]); } // return a function remembering to include the event return function(e) { // Add the event object to the arguments array otherArgs.push(e || window.event); // Array is in the wrong order so flip it otherArgs.reverse(); // Now use apply to set scope and arguments callingFunction.apply(scope, otherArgs); }}

Esta es una implementación básica sin manejo de errores, pero proporciona una base útil para ampliar y comprender el enfoque general. Lidiar con el alcance del controlador de eventos es esencial para la mayoría de las aplicaciones JavaScript, y ningún desarrollador debe estar atado a un solo marco, por lo que apreciar el manejo de este problema a un nivel bajo es útil para todos los programadores.

Conclusión

Al crear cualquier aplicación JavaScript de gran tamaño, una comprensión sólida del alcance no solo es útil sino también bastante necesaria. Si bien usar una biblioteca de JavaScript común es un atajo útil, ciertamente nunca está mal volver a lo básico y desarrollar su propia solución para obtener un mayor control del alcance de JavaScript.

Recursos adicionales

• Una introducción al alcance en Dojo.
• Una gran referencia técnica sobre alcance y cierres en JavaScript.
• Interesante alcance "te pillé".

(Alabama)Explora más en

• Codificación
• javascript

Tal vez te puede interesar:

1. ¿Deberían abrirse los enlaces en ventanas nuevas?
2. 24 excelentes tutoriales de AJAX
3. 70 técnicas nuevas y útiles de AJAX y JavaScript
4. Más de 45 excelentes recursos y repositorios de fragmentos de código

Lo que necesita saber sobre el alcance de JavaScript

Implemente rápidamente. Implementar inteligentemente ¡Registro! Índice Usted está aquí

programar

es

https://aprendeprogramando.es/static/images/programar-lo-que-necesita-saber-sobre-el-alcance-de-javascript-764-0.jpg

2024-04-04

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente