6

En el siguiente ejemplo tengo una clase y agrege dos funciones por prototype la primera como se define una funcion normalmente, mientras que la segunda con arrow function

simpleClase = function(){
  this.ejemplo = 1
}
simpleClase.prototype.simple = function(){
  console.log(this)
}
simpleClase.prototype.arrow = () =>{
console.log(this)
   }
 
let nuevaClase = new simpleClase();
nuevaClase.simple();
nuevaClase.arrow();

El caso es que para la funcion como se define normalmente con prototype me devuelve el contexto de la clase , mientras que usando arrow function me devuelve window

Con otro Ejemplo:

class Clase  {
  constructor(){
  this.valor = 1

  }
  arrow() {
    let miFuncion= () => console.log("arrow" , this);
    miFuncion();
  }
  simple(){
    console.log("simple" , this);
  }
}
let miClase = new Clase();
miClase.arrow()
miClase.simple()

Me devuelve el contexto de la clase, esto me da la duda de como funciona prototype con arrow function mi duda es porque son diferentes estos ambitos, porque el prototype no toma el ambito de la variable

3
  • No, si no en el primer caso no sería window, sería también undefined el 2 feb. 2018 a las 12:54
  • el error del primero son los parentesis, es como usara una funcion dentro de una funcion por tanto da undefined (caso arrow function) el 2 feb. 2018 a las 12:55
  • Relacionado : stackoverflow.com/questions/31755186/… el 5 jul. 2019 a las 20:00

2 respuestas 2

6

TL;DR:

let f=() => {...};

es casi1 equivalente a

let f= (function () {...}).bind(this);

Explicación con más ejemplos:

Veamos cómo funciona la función arrow y cómo define su contexto. Pero primero veamos una función normal y su comportamiento:

let obj= { id: "obj"}; //creamos un objeto

function algo () { //creamos una función simple
  if (this) console.log(this.id);
  else console.log(this);
}
id="window";
algo(); //el contexto es window

obj.metodo=algo;
obj.metodo(); //el contexto es obj.

El contexto de la función varía según como se llame.

Esto se podría evitar con el método bind de la clase Function:

let obj= { id: "obj"}; //creamos un objeto

function algo () { //creamos una función simple
  if (this) console.log(this.id);
  else console.log(this);
}

let algomas=algo.bind(obj); //fijamos el contexto: SIEMPRE será obj

id="window";
algo(); //el contexto es window

algomas();

Pues bien, una arrow function es el equivalente a usar .bind(this) en el momento de la declaración:

class MiClase {

  constructor() {
    this.id="hola"
  }
  
  metodo() {
   let arrow= () => console.log(this);
   arrow();
  }
}

let obj= new MiClase();
obj.metodo();

Usando notación clásica para crear una clase:

function saludar() {
  console.log(this.a);
}
window.a="Window";

function ClaseA() { this.a="hola";}

function ClaseB() {this.a = "hola Clase2"}

ClaseA.prototype.saluda = saludar
ClaseB.prototype.saluda = saludar

let a = new ClaseA();
let b = new ClaseB();

a.saluda(); 
b.saluda();
saludar();

Como puedes ver, una función clásica recibe el contexto en tiempo de ejecución, se llame como se llame.

Usando la funcion arrow

function Clase() { this.a="hola";}

Clase.prototype.saluda=function() {
  console.log(this.a);
}

let s=new Clase();


window.a="Window";


console.log("Contexto actual es:",this.a);
let arrow= ()=> console.log("Arrow",this.a); //el contexto actual se queda fijado para arrow

arrow();

Clase.prototype.saludosArrow= () => console.log("Arrow",this.a); //el contexto actual sigue fijandose!

s.saludosArrow();
En cambio, una función arrow lo define en el momento de la declaración.


1 Las funciones flecha no tienen la variable implícita arguments que tienen el resto de funciones. No es exactamente igual.

0
6

No es que las funciones de flecha no tengan acceso al this. Si los tienen, solo que estas tienen acceso al ámbito que las envuelven o ambito padre. La documentación dice:

Una función de flecha no tiene this propio; se usa este valor del contexto de ejecución adjunto(envolvente)

Imagina que dentro de una clase, defines una clase privada, sea por cual sea la razón. Ahora bien, en la clase privada tienes una funcion en el prototype definida en forma de flecha y desde esa funcion necesitas acceder a las propiedades de su propia instancia:

function Persona()
{
  this.nombre = "einer";
  
  function Corazon(){
      this.latidosPorSegundos = 4;
  }
    
  Corazon.prototype.latir = ()=>{
    console.log(this.latidosPorSegundos);
    console.log(this);    
  };
  
  var corazon = new Corazon();
  corazon.latir();
}

new Persona();

Nota como corazon.latir() en vez imprimir 4, muestra undefined y en el this muestra la definición de persona. Esto porque this proporciona acceso al ámbito padre(envolvente), que seria Persona.

En tu caso, cuando defines una clase en el ámbito global y creas una instancia de la misma, el ámbito padre de esa instancia es Window, no la instancia del objeto. Como en el caso del ejemplo, el ambito padre(envolvente) del prototype de la clase privada Corazon, es Persona.

Miremos los ambitos como una caja. this en las funciones de flecha proporciona acceso al ambito que las envuelve y como this esta en Corazon, solo daria acceso hasta Persona, no window, ya que Corazon esta dentro de Persona:

 ---------------------------
|           Window          |
|   ---------------------   |
|   |      Persona       |  |
|   |  ---------------   |  |
|   |  |              |  |  |
|   |  |    Corazon   |  |  |
|   |  |              |  |  |
|   |   -------------    |  |
|   ---------------------   |
|                           |
 --------------------------

Pero en tu caso, navegaría hasta window ya que no tiene otro ambito que la envuelva:

 --------------------
|      Window        |
|  ---------------   |
|  |              |  |
|  |  simpleClase |  |
|  |              |  |
|   -------------    |
 --------------------
5
  • 1
    Como siempre una gran respuesta el 2 feb. 2018 a las 13:40
  • si bien tu respuesta es buena mi duda existencial es porque al hacer Persona.protoype.arrow_function no toma el contexto de la variable el 2 feb. 2018 a las 13:56
  • Como tienes declarada Persona globalmente, su ambito padre es Window y en las funciones de flecha, this representa el ambito padre, no la instancia donde esta declarada. Por eso: this = Window, por lo que no podras acceder a las propiedes de la instancia, sino a las propiedes del ambito padre.
    – Einer
    el 2 feb. 2018 a las 13:59
  • @JackNavaRow, acabo de actualizar mi respuesta. Dale una mirada a ver si te puede ayudar a entender.
    – Einer
    el 2 feb. 2018 a las 14:11
  • @Einer La respuesta está muy bien, pero precisamente el texto que no es tuyo me parece confuso: precisamente yo entiendo que el this está fijado en las arrow function, por lo que son las únicas funciones que tienen un this propio que no varía el 2 feb. 2018 a las 14:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.