Home / Questions / 135637
Accepted
JackNavaRow
Asked: 2020-02-02 17:51:55 +0800 CST 2020-02-02 17:51:55 +0800 CST

this context in function arrow with prototype

  • 772

In the following example I have a class and add two functions by prototype , the first one as defined funcion normalmente, while the second one witharrow 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();

The case is that for the function as normally defined with prototype it returns me the contexto de la clase, while using arrow functionit returns mewindow

With another Example:

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()

It returns the context of the class, this gives me the doubt of how prototype works with the arrow function , my doubt is because these scopes are different, because the prototype does not take the scope of the variable

javascript

2 Answers

  1. Best Answer

    TL;DR:

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

    is almost 1 equivalent to

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

    Explanation with more examples:

    Let's see how the arrow function works and how it defines its context. But first let's look at a normal function and its behavior:

    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.

    The context of the function varies depending on how it is called.

    This could be avoided with the Function class's bind method:

    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();

    Well, an arrow function is the equivalent of using .bind(this) at declaration time:

    class MiClase {

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

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

    Using classical notation to create a class:

    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();

    As you can see, a classic function receives the context at runtime, whatever it is called.

    Using the arrow function

    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();
    Instead, an arrow function defines it at declaration time.

    1 Arrow functions do not have the implicit variable argumentsthat other functions have. It's not exactly the same.

    • 6

  2. It's not that the arrow functions don't have access to the this. If they do, only that they have access to the scope that surrounds them or the parent scope. The documentation says:

    An arrow function does not have this of its own ; this value is used from the attached (enveloping) execution context

    Imagine that inside a class, you define a private class, for whatever reason. Now, in the private class you have a function prototypedefined in the form of an arrow and from that function you need to access the properties of its own instance:

    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();

    Note how corazon.latir()instead of printing 4, it shows undefinedand in the thisshows the definition of person. This is because it thisprovides access to the parent (enclosing) scope, which would be Persona.

    In your case, when you define a class in the global scope and create an instance of it, the parent scope of that instance is Window, not the object instance. As in the case of the example, the parent (enclosing) scope prototypeof the private class Corazon, is Persona.

    Let's look at the scopes as a box. this in arrow functions provides access to the scope that surrounds them and since thisit is in Corazon, it would only give access to Persona, not window, since it Corazonis inside Persona:

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

    But in your case, it would navigate to window since it doesn't have another scope that wraps it:

     --------------------
|      Window        |
|  ---------------   |
|  |              |  |
|  |  simpleClase |  |
|  |              |  |
|   -------------    |
 --------------------
    • 6