elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


 


Tema destacado: Recuerda que debes registrarte en el foro para poder participar (preguntar y responder)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Implementación de let en ES5?
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Implementación de let en ES5?  (Leído 552 veces)
@XSStringManolo
<svg/onload=alert()>
Colaborador
***
Desconectado Desconectado

Mensajes: 2.130


Turn off the red ligth


Ver Perfil WWW
Implementación de let en ES5?
« en: 16 Diciembre 2019, 17:22 »

Probé con Babel y la versión que me crea es usando variables con la barra baja para declarar dos variables distintas e "indicar" que una de ellas es privada. Pero sigue siendo accesible públicamente. No debería utilizar un WeakMap?

Si conoceis la implementación de let estaría genial para poder utilizarla en ES5.

 
ES6+
Código
  1. for(let x = 0; x < 10; ++x)
  2. {
  3. alert(x);
  4. }
  5. let x = 12;
  6. alert(x);

Versión ES5 generada por Babel
Código
  1. for(var _x = 0; _x < 10; ++_x)
  2. {
  3. alert(_x);
  4. }
  5. var x = 12;
  6. alert(x);


En línea

MinusFour
Colaborador
***
Desconectado Desconectado

Mensajes: 4.912


I'm fourth.


Ver Perfil WWW
Re: Implementación de let en ES5?
« Respuesta #1 en: 16 Diciembre 2019, 22:01 »

Lo hace para ahorrarse una función. En ES5 la única forma de crear nuevos contextos es a través de funciones. Lo que está haciendo babel ahí únicamente es evitar una colisión entre variables, no tiene nada que ver con que sea privada o no.

Código
  1. (function(){
  2.   for(var x = 0; x < 10; ++x){
  3.       alert(x);
  4.   }
  5. }).call(this);
  6.  
  7. var x = 12;
  8. alert(x);

Edit: Y es importante mencionar que babel trabaja otros scenarios dependiendo del código. Por ejemplo, cada ciclo tiene su propia instancia de "x", así que lo mete dentro de una función si tiene funciones anidadas.


« Última modificación: 16 Diciembre 2019, 22:03 por MinusFour » En línea

@XSStringManolo
<svg/onload=alert()>
Colaborador
***
Desconectado Desconectado

Mensajes: 2.130


Turn off the red ligth


Ver Perfil WWW
Re: Implementación de let en ES5?
« Respuesta #2 en: 17 Diciembre 2019, 00:25 »

A esta pattern se le llama proxied? .call es el método interno [[call]] y al utilizar this se referencia a la función anónima no? Cleaver!
 La vi anteriormente para sobrescribir window.alert, andaba buscando como sobrescribirla para substituirla por un componente.

Qué forma más curiosa la de babel. Parece que optimiza la cantidad de código en vez de la performnce no?

Muchas gracias!
En línea

MinusFour
Colaborador
***
Desconectado Desconectado

Mensajes: 4.912


I'm fourth.


Ver Perfil WWW
Re: Implementación de let en ES5?
« Respuesta #3 en: 17 Diciembre 2019, 01:04 »

A esta pattern se le llama proxied? .call es el método interno [[call]] y al utilizar this se referencia a la función anónima no? Cleaver!
 La vi anteriormente para sobrescribir window.alert, andaba buscando como sobrescribirla para substituirla por un componente.

Qué forma más curiosa la de babel. Parece que optimiza la cantidad de código en vez de la performnce no?

Muchas gracias!

Es una IIFE, solo que use call para invocarla.  Realmente, en ese código no es necesario usar call. Lo pongo ahí nada más porque puede ser necesario dependiendo del caso.

Por ejemplo:

Código
  1. let obj = { sum : 0 };
  2. obj.fn = function(){
  3.    for(let i = 0; i < 5; i++){
  4.        this.sum += i;
  5.    }
  6.    console.log(obj.sum); //10
  7. }
  8.  
  9. obj.fn();

Y si haces lo que yo hice sin el call:

Código
  1. let obj = { sum : 0 };
  2. obj.fn = function(){
  3.    (function(){
  4.        for(var i = 0; i < 5; i++){
  5.            this.sum += i;
  6.        }
  7.    })();
  8.    console.log(obj.sum); //0
  9. }
  10.  
  11. obj.fn();

Y con el call te daría 10. Las IIFEs no heredan el contexto de this y tampoco puedes usar una función flecha porque no existían en ES5. Hay otros casos que también tienes que recordar para que este como lo dice el estándar.

Babel se salta algunas cosas en el estandar ya sea por razones de rendimiento o porque simplemente no lo pueden hacer sin tener un runtime de JS en JS. Por lo general trata de apegarse lo más que pueda al estándar.
En línea

@XSStringManolo
<svg/onload=alert()>
Colaborador
***
Desconectado Desconectado

Mensajes: 2.130


Turn off the red ligth


Ver Perfil WWW
Re: Implementación de let en ES5?
« Respuesta #4 en: 17 Diciembre 2019, 01:51 »

No hereda el contexto porque se evalua antes? Se evalua de dentro hacia fuera?

Muchas gracias! Se ve my interesante!
En línea

MinusFour
Colaborador
***
Desconectado Desconectado

Mensajes: 4.912


I'm fourth.


Ver Perfil WWW
Re: Implementación de let en ES5?
« Respuesta #5 en: 17 Diciembre 2019, 02:05 »

No hereda el contexto porque se evalua antes? Se evalua de dentro hacia fuera?

Muchas gracias! Se ve my interesante!

No lo hereda porque el contexto del objeto de una llamada se determina en la invocación de la función (en el caso de funciones regulares). Solo en el caso de funciones flecha es que el contexto del objeto se "hereda" (hay una explicación un poco más larga).

El contexto del objeto es básicamente lo que va detrás de la función o metodo.

Código
  1.  obj.fn();
  2. // ^
  3. //contexto

Código
  1.       fn();
  2. //^
  3. //no hay contexto
  4. //a menos que sea una función resultante de bind
  5. //misma situación para IIFEs

Código
  1.  fn.call(obj);
  2. //         ^
  3. //         contexto
« Última modificación: 17 Diciembre 2019, 02:10 por MinusFour » En línea

@XSStringManolo
<svg/onload=alert()>
Colaborador
***
Desconectado Desconectado

Mensajes: 2.130


Turn off the red ligth


Ver Perfil WWW
Re: Implementación de let en ES5?
« Respuesta #6 en: 17 Diciembre 2019, 05:08 »

No lo hereda porque el contexto del objeto de una llamada se determina en la invocación de la función (en el caso de funciones regulares). Solo en el caso de funciones flecha es que el contexto del objeto se "hereda" (hay una explicación un poco más larga).

El contexto del objeto es básicamente lo que va detrás de la función o metodo.

Código
  1.  obj.fn();
  2. // ^
  3. //contexto

Código
  1.       fn();
  2. //^
  3. //no hay contexto
  4. //a menos que sea una función resultante de bind
  5. //misma situación para IIFEs

Código
  1.  fn.call(obj);
  2. //         ^
  3. //         contexto
Ahhh vale! Pensé que era por otra cosa xD.
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Implementación de la ECC
Criptografía
C3.0 0 1,763 Último mensaje 30 Junio 2011, 02:04
por C3.0
Implementación de estructura C++ a C#
Programación C/C++
Eleкtro 2 795 Último mensaje 13 Diciembre 2015, 18:42
por Eleкtro
Duda con implementacion mvc
PHP
d91 0 791 Último mensaje 16 Agosto 2016, 15:25
por d91
Ayuda con Implementación de red
Redes
itzg3 3 1,083 Último mensaje 23 Septiembre 2017, 18:10
por engel lex
Implementacion de Socket
.NET (C#, VB.NET, ASP)
rigorvzla 1 289 Último mensaje 28 Febrero 2019, 04:34
por ThunderCls
Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines