JavaScript-nuolitoiminto


Sisällysluettelo

    Näytä sisällysluettelo

Nuolifunktiot otettiin käyttöön ES6:ssa.

Nuolifunktioiden avulla voimme kirjoittaa lyhyemmän funktiosyntaksin:

let myFunction = (a, b) => a * b;

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>

<p>This example shows the syntax of an Arrow Function, and how to use it.</p>

<p id="demo"></p>

<script>
let myFunction = (a, b) => a * b;
document.getElementById("demo").innerHTML = myFunction(4, 5);
</script>

</body>
</html>

Ennen nuolta:

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

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>

<p>This example shows the syntax of a function, without the use of arrow function syntax.</p>

<p id="demo"></p>

<script>
let hello = "";

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

document.getElementById("demo").innerHTML = hello();
</script>

</body>
</html>

Nuolitoiminnolla:

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

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>

<p>This example shows the syntax of an Arrow Function, and how to use it.</p>

<p id="demo"></p>

<script>
let hello = "";

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

document.getElementById("demo").innerHTML = hello();
</script>

</body>
</html>

Siitä tulee lyhyempi! Jos funktiolla on vain yksi lause, ja lause palauttaa arvon, voit poistaa ja sulut palautus-avainsana:

Nuolifunktiot palauttavat arvon oletuksena:

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

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>

<p>This example shows an Arrow Function without the brackets or the return keyword.</p>

<p id="demo"></p>

<script>
let hello = "";

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

document.getElementById("demo").innerHTML = hello();
</script>

</body>
</html>

Huomaa: tämä toimii vain, jos funktiolla on vain yksi lausunto.

Jos sinulla on parametreja, anna ne suluissa:

Nuolifunktio parametreilla:

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

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>

<p>This example shows an Arrow Function with a parameter.</p>

<p id="demo"></p>

<script>
let hello = "";

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

document.getElementById("demo").innerHTML = hello("Universe!");
</script>

</body>
</html>

Itse asiassa, jos sinulla on vain yksi parametri, voit ohittaa myös sulut:

Nuolitoiminto ilman sulkuja:

hello = val => "Hello " + val;

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>

<p>This example shows that if you have only one parameter in an Arrow Function, you can skip the parentheses.</p>

<p id="demo"></p>

<script>
let hello = "";

hello = val => "Hello " + val;

document.getElementById("demo").innerHTML = hello("Universe!");
</script>

</body>
</html>


Entä tämä?

Myös tämän käsittely eroaa nuolifunktioissa tavallisesta toimintoja.

Lyhyesti sanottuna nuolitoiminnoilla ei ole sitomista tämä.

Tavallisissa funktioissa tämä avainsana edusti objektia, joka kutsui toiminto, joka voi olla ikkuna, asiakirja, painike tai mikä tahansa.

Nuolifunktioilla tämä avainsana aina edustaa vastustaa sitä määritti nuolifunktion.

Katsotaanpa kahta esimerkkiä ymmärtääksemme eron.

Molemmat esimerkit kutsuvat menetelmää kahdesti, ensin sivun latautuessa ja uudelleen kun käyttäjä napsauttaa painiketta.

Ensimmäinen esimerkki käyttää tavallista funktiota, ja toinen esimerkki käyttää an nuolitoiminto.

Tulos osoittaa, että ensimmäinen esimerkki palauttaa kaksi eri objektia (ikkuna ja painike), ja toinen esimerkki palauttaa ikkunaobjektin kahdesti, koska ikkunaobjekti on toiminnon "omistaja".

Esimerkki

Tavallisella funktiolla tämä edustaa objekti, joka kutsuu funktiota:

 // Regular Function:
hello = function() {
  document.getElementById("demo").innerHTML 
  += this;
}
// The window object calls the function:
  window.addEventListener("load", hello);
// A button object calls the 
  function:
document.getElementById("btn").addEventListener("click", hello);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript "this"</h1>

<p>This example demonstrate that in a regular function, the "this" keyword represents different objects depending on how the function was called.</p>

<p>Click the button to execute the "hello" function again, and you will see that this time "this" represents the button object.</p>

<button id="btn">Click Me!</button>

<p id="demo"></p>

<script>
let hello = "";

hello = function() {
  document.getElementById("demo").innerHTML += this;
}

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

//A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);
</script>

</body>
</html>

Esimerkki

Nuolifunktiolla tämä edustaa toiminnon omistaja:

 // Arrow Function:
hello = () => {
  document.getElementById("demo").innerHTML 
  += this;
}
// The window object calls the function:
  window.addEventListener("load", hello);
// A button object calls the 
  function:
document.getElementById("btn").addEventListener("click", hello);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript "this"</h1>

<p>This example demonstrate that in Arrow Functions, the "this" keyword represents the object that owns the function, no matter who calls the function.</p>

<p>Click the button to execute the "hello" function again, and you will see that "this" still  represents the window object.</p>

<button id="btn">Click Me!</button>

<p id="demo"></p>

<script>
let hello = "";

hello = () => {
  document.getElementById("demo").innerHTML += this;
}

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

//A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);
</script>

</body>
</html>

Muista nämä erot, kun työskentelet funktioiden kanssa. Joskus säännöllisten funktioiden käyttäytyminen on mitä haluat, jos et, käytä nuolifunktioita.


Selaimen tuki

Seuraavassa taulukossa määritellään ensimmäiset selainversiot, joissa on täysi tuki Nuolifunktiot JavaScriptissä:

Chrome 45 Edge 12 Firefox 22 Safari 10 Opera 32
Sep, 2015 Jul, 2015 May, 2013 Sep, 2016 Sep, 2015