Reageer ES6 pylfunksies

Pyltjie funksies

Pyltjiefunksies laat ons toe om korter funksiesintaksis te skryf:

hello = function() {
  return "Hello World!";
}

hello = () => {
  return "Hello World!";
}

Dit word korter! As die funksie net een stelling het, en die stelling gee 'n waarde terug, kan jy die hakies en die returnsleutelwoord verwyder:

hello = () => "Hello World!";

As jy parameters het, gee jy dit binne die hakies deur:

hello = (val) => "Hello " + val;

Trouens, as jy net een parameter het, kan jy die hakies ook oorslaan:

hello = val => "Hello " + val;

Waarvan this?

Die hantering van thisis ook anders in pylfunksies in vergelyking met gewone funksies.

Kortom, met pylfunksies is daar geen binding van this.

In gewone funksies het die thissleutelwoord die voorwerp verteenwoordig wat die funksie genoem het, wat die venster, die dokument, 'n knoppie of wat ook al kan wees.

Met pylfunksies verteenwoordig die thissleutelwoord altyd die voorwerp wat die pylfunksie gedefinieer het.

Kom ons kyk na twee voorbeelde om die verskil te verstaan.

Beide voorbeelde noem 'n metode twee keer, eers wanneer die bladsy laai, en weer eens wanneer die gebruiker 'n knoppie klik.

Die eerste voorbeeld gebruik 'n gewone funksie, en die tweede voorbeeld gebruik 'n pyltjie funksie.

Die resultaat wys dat die eerste voorbeeld twee verskillende voorwerpe (venster en knoppie) gee, en die tweede voorbeeld gee die Header-objek twee keer terug.

class Header {
  constructor() {
    this.color = "Red";
  }

//Regular function:
  changeColor = function() {
    document.getElementById("demo").innerHTML += this;
  }
}

const myheader = new Header();

//The window object calls the function:
window.addEventListener("load", myheader.changeColor);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);

class Header {
  constructor() {
    this.color = "Red";
  }

//Arrow function:
  changeColor = () => {
    document.getElementById("demo").innerHTML += this;
  }
}

const myheader = new Header();


//The window object calls the function:
window.addEventListener("load", myheader.changeColor);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);

Onthou hierdie verskille wanneer jy met funksies werk. Soms is die gedrag van gereelde funksies wat jy wil hê, indien nie, gebruik pylfunksies.

hello =  "Hello World!";