El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

JavaScript esencial

Uso del operador this

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
El uso de las funciones anónimas y las arrow functions puede traernos un grado de complejidad cuando usamos el operador this. Aprende y conoce las diferencias así como los contextos que implica el uso de este operador this según el tipo de función anónima que estemos usando.
04:11

Transcripción

Al trabajar con dos formas diferentes de crear funciones anónimas nos enfrentamos a un problema y esto es trabajar con un objeto de referencia llamado'this'. Este tipo de operador me permite hacer referencia al mismo objeto con el cual se está trabajando. Vamos a entender un poco más este concepto y para esto trabajaremos con este ejemplo. En pantalla podrás ver que hay un botón, la idea es que podamos pulsar este botón y reaccionar en consecuencia. Este botón está definido con este estilo y tenemos esta clase sobre la cual haremos referencia, la clase se llama'botón'. Aquí vas a encontrar una diferencia muy importante. Primero, este "script" lo estamos enviando al final. Como estamos ligando el contenido de HTML a un contenido de JavaScript, entonces si nosotros tenemos este "script" desde antes va a provocar un error, porque al momento en que se están ejecutando las cosas todavía no existe la etiqueta a la cual buscamos ligar con una operación de JavaScript, por eso lo pasamos al final. Esto es algo que te encontrarás comúnmente en muchos códigos de JavaScript. Listo. Ya que entendimos nuestra vista, vamos al código de JavaScript. En este código encontrarás que tenemos aquí la parte donde estamos ligando el botón que mostrábamos ahora y estamos almacenando su referencia en la variable'botón'. En esta parte tenemos un'addEventListener'. El'addEventListener'estará escuchando cada vez que nosotros hacemos clic sobre el botón y así estará enviando el mensaje. Por ahora estamos enviando el mensaje'Botón pulsado'. Actualizamos, y cuando damos un clic tenemos aquí el texto'Botón pulsado'. Pero lo que nosotros necesitamos utilizar es el objeto'this', con el cual podemos hacer muchas referencias. Por ejemplo, en este caso, si utilizo el objeto'this', actualizo mi navegador y doy un clic vemos como me está trayendo completamente toda la etiqueta. Pero yo puedo solamente acceder al contenido que existe dentro de este botón, es decir, al texto. Para poder hacerlo utilizo la propiedad llamada'innerHTML'. Actualizo mi navegador y pulsamos sobre el botón. Al hacerlo vemos como ya tengo solamente el texto, pero cuidado, hay una gran diferencia cuando dejamos de trabajar con una función anónima tradicional y comenzamos a trabajar con una función de tipo "arrow" o un "arrow function". Para hacer esta prueba, vamos a comentar el pedazo de código que acabamos de utilizar y vamos a agregar ahora, en el caso del "callback", una función de tipo "arrow function". Al momento de agregarla también vamos a trabajar con el'this', pero vamos a quitar por ahora el'inner. HTML'. Actualizamos nuestro navegador y damos un clic. Al dar clic vamos a ver que ahora nosotros no tenemos la etiqueta, tenemos acceso a la ventana completa y, por tanto, a todas sus propiedades y a sus métodos. Por ejemplo, el'localStorage', 'location', etc. ¿Y qué sucede si nosotros queremos acceder a este contenido utilizando esta estructura? Simplemente no vamos a poder directamente, tendríamos que navegar sobre toda la ventana hasta encontrar el valor. Por eso mismo tenemos que decidir qué tipo de función anónima vamos a utilizar: una función anónima tradicional o una función anónima de tipo "arrow function". Pero no todo es malo. De hecho, podemos sacar un poco de provecho. Ya que aquí nosotros tenemos acceso a la ventana, podemos acceder por ejemplo al objeto'location'del cual dispone la ventana y así nosotros podemos hacer un redireccionamiento. En este caso, vamos a hacer un redireccionamiento en'this. location' igual a'www. google. com'. Actualizamos nuestro navegador, damos un clic y vemos como esto nos envía directamente al sitio de'www. google. com' porque estamos sacando ventaja de esta propiedad. Con esto ya tienes claro qué sucede con el objeto'this'cuando trabajamos con cualquiera de las dos formas de generar una función anónima.

JavaScript esencial

Aprende y conoce JavaScript empezando por entender sus conceptos más básicos y esenciales, pero considerando en todo momento la nueva especificación del lenguaje ES6.

5:26 horas (90 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:12/09/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.