JavaScript-funktiot määritetään funktion
avainsana.
Voit käyttää funktiota ilmoitus tai a funktion lauseke.
Aiemmin tässä opetusohjelmassa opit, että funktiot ilmoitetaan kanssa seuraava syntaksi:
function functionName(parameters) {
// code to be executed
}
Ilmoitettuja toimintoja ei suoriteta välittömästi. Ne on "tallennettu myöhempää käyttöä varten", ja ne suoritetaan myöhemmin, kun niitä kutsutaan (kutsutaan).
function myFunction(a, b) {
return a * b;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Call a function which performs a calculation and returns the result:</p>
<p id="demo"></p>
<script>
let x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
function myFunction(a, b) {
return a * b;
}
</script>
</body>
</html>
Puolipisteitä käytetään suoritettavien JavaScript-lauseiden erottamiseen.
Koska funktio ilmoitus ei ole suoritettava lauseke, se on ei ole yleistä lopettaa se puolipisteeseen.
JavaScript-funktio voidaan määrittää myös käyttämällä lauseketta.
Funktiolauseke voidaan tallentaa muuttujaan:
const x = function (a, b) {return a * b};
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>A function can be stored in a variable:</p>
<p id="demo"></p>
<script>
const x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Kun funktiolauseke on tallennettu muuttujaan, muuttuja voi käyttää funktiona:
const x = function (a, b) {return a * b};
let z = x(4, 3);
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>After a function has been stored in a variable,
the variable can be used as a function:</p>
<p id="demo"></p>
<script>
const x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>
</body>
</html>
Yllä oleva funktio on itse asiassa anonyymi funktio (funktio ilman a nimi).
Muuttujiin tallennetut funktiot eivät tarvitse funktioiden nimiä. Ne ovat aina kutsutaan (kutsutaan) käyttämällä muuttujan nimeä.
Yllä oleva funktio päättyy puolipisteeseen, koska se on osa suoritettavaa käskyä.
Kuten olet nähnyt edellisissä esimerkeissä, JavaScript-funktiot on määritelty avainsanalla funktio
.
Funktiot voidaan määrittää myös sisäänrakennetulla JavaScript-funktiokonstruktorilla nimeltä Funktio()
.
const myFunction = new Function("a", "b", "return a * b");
let x = myFunction(4, 3);
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>JavaScript has an built-in function constructor.</p>
<p id="demo"></p>
<script>
const myFunction = new Function("a", "b", "return a * b");
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
Sinun ei itse asiassa tarvitse käyttää funktiokonstruktoria. Yllä oleva esimerkki on sama kuin kirjoittaminen:
const myFunction = function (a, b) {return a * b};
let x = myFunction(4, 3);
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p id="demo"></p>
<script>
const myFunction = function (a, b) {return a * b}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
Useimmiten voit välttää new
-avainsanan käyttämisen JavaScriptissä.
Aiemmin tässä opetusohjelmassa opit "nostamisesta" (JavaScript Hoisting).
Nosto on JavaScriptin oletustoiminto siirtää ilmoitukset tiedoston yläosaan nykyinen laajuus.
Nosto koskee muuttujamäärityksiä ja funktiomäärittelyjä.
Tämän vuoksi JavaScript-funktioita voidaan kutsua ennen kuin ne on ilmoitettu:
myFunction(5);
function myFunction(y) {
return y * y;
}
Lausekkeella määritettyjä toimintoja ei nosteta.
Funktiolausekkeista voidaan tehdä "itse kutsuvia".
Itsekutsuva lauseke kutsutaan (käynnistetään) automaattisesti ilman kutsua.
Funktiolausekkeet suoritetaan automaattisesti, jos lauseketta seurataan kirjoittaja().
Et voi itse kutsua funktion määritystä.
Sinun on lisättävä sulut funktion ympärillä osoittamaan, että se on funktiolauseke:
(function () {
let x = "Hello!!"; // I will invoke myself
})();
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<p>Functions can be invoked automatically without being called:</p>
<p id="demo"></p>
<script>
(function () {
document.getElementById("demo").innerHTML = "Hello! I called myself";
})();
</script>
</body>
</html>
Yllä oleva toiminto on itse asiassa anonyymi itse kutsuva toiminto (funktio ilman nimeä).
JavaScript-funktioita voidaan käyttää arvoina:
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3);
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Functions can be treated as values:</p>
<p>x = myFunction(4,3) or x = 12</p>
<p>In both cases, x becomes a number with the value of 12.</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
JavaScript-funktioita voidaan käyttää lausekkeissa:
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3) * 2;
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Functions can be used in expressions.</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3) * 2;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
JavaScriptin typeof
-operaattori palauttaa "funktion" for toimintoja.
Mutta JavaScript-funktiot voidaan parhaiten kuvata objekteina.
JavaScript-funktioilla on sekä ominaisuudet että menetelmät.
Ominaisuus arguments.length
palauttaa vastaanotettujen argumenttien määrän, kun funktio kutsuttiin:
function myFunction(a, b) {
return arguments.length;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<p>The arguments.length property returns the number of arguments received by the function:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
Metodi toString()
palauttaa funktion merkkijonona:
function myFunction(a, b) {
return a * b;
}
let text = myFunction.toString();
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The toString() Method</h2>
<p>The toString() method returns the function as a string:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>
</body>
</html>
Objektin ominaisuudeksi määriteltyä funktiota kutsutaan objektin metodiksi.
Funktiota, joka on suunniteltu luomaan uusia objekteja, kutsutaan objektikonstruktoriksi.
Nuolifunktiot mahdollistavat lyhyen syntaksin funktiolausekkeiden kirjoittamiseen.
Et tarvitse avainsanaa funktio
, return
-avainsanaa ja kiharat hakasulkeet.
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrow Functions</h2>
<p>With arrow functions, you don't have to type the function keyword, the return keyword, and the curly brackets.</p>
<p>Arrow functions are not supported in IE11 or earlier.</p>
<p id="demo"></p>
<script>
const x = (x, y) => x * y;
document.getElementById("demo").innerHTML = x(5, 5);
</script>
</body>
</html>
Nuolifunktioilla ei ole omaa tätä
. Ne eivät sovellu hyvin objektimenetelmien määrittämiseen.
Nuolitoimintoja ei nosteta. Ne on määritettävä ennen niiden käyttöä.
Käytetään const
on turvallisempaa kuin var
, koska funktiolauseke on aina vakioarvo.
Voit jättää pois avainsanan return
ja hakasulkeet vain, jos funktio on yksi lause. Tästä syystä saattaa olla hyvä tapa pitää ne aina:
const x = (x, y) => { return x * y };
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrow Functions</h2>
<p>Arrow functions are not supported in IE11 or earlier.</p>
<p id="demo"></p>
<script>
const x = (x, y) => { return x * y };
document.getElementById("demo").innerHTML = x(5, 5);
</script>
</body>
</html>
Nuolitoimintoja ei tueta IE11:ssä tai aiemmissa versioissa.