gyakran hasonló műveletet kell végrehajtanunk a szkript sok helyén.
például meg kell mutatnunk egy szép üzenetet, amikor egy látogató bejelentkezik, kijelentkezik, talán valahol máshol.
A funkciók a program fő “építőelemei”. Lehetővé teszik, hogy a kódot sokszor ismétlés nélkül hívják.
már láttunk példákat a beépített funkciókra, mint például a alert(message)
, prompt(message, default)
és confirm(question)
. De saját funkciókat is létrehozhatunk.,
függvény deklaráció
egy függvény létrehozásához egy függvény deklarációt használhatunk.
így néz ki:
function showMessage() { alert( 'Hello everyone!' );}
a function
kulcsszó először megy a függvény neve, majd a zárójelek közötti paraméterek listája (vesszővel elválasztott, üres a fenti példában) és végül a függvény kódja, más néven “a funkció test”, göndör zárójelek között.,
function name(parameters) { ...body...}
új funkciónk neve szerint hívható: showMessage()
.
például:
function showMessage() { alert( 'Hello everyone!' );}showMessage();showMessage();
A hívás showMessage()
végrehajtja a kódot a funkció. Itt kétszer látni fogjuk az üzenetet.
Ez a példa egyértelműen bemutatja a funkciók egyik fő célját: a kód duplikációjának elkerülése.,
Ha valaha is meg kell változtatnunk az üzenetet vagy a megjelenítés módját, elegendő a kódot egy helyen módosítani: a kimenetet.
helyi változók
a függvény belsejében deklarált változó csak a függvény belsejében látható.
példa:
Külső változók
A függvény hozzáférhet egy külső változó, mint például:
let userName = 'John';function showMessage() { let message = 'Hello, ' + userName; alert(message);}showMessage(); // Hello, John
A funkció teljes hozzáférés a külső változó. Azt is módosíthatja.,
például:
a külső változó csak akkor használható, ha nincs helyi.
Ha egy azonos nevű változót deklarálnak a függvény belsejében, akkor árnyékolja a külső változót. Például az alábbi kódban a függvény a helyi userName
– t használja. A külső változót figyelmen kívül hagyják:
bármely függvényen kívül deklarált változók, például a külsőuserName
a fenti kódban globálisnak nevezzük.
A globális változók bármely függvényből láthatóak (kivéve, ha a helyiek árnyékolják).,
jó gyakorlat a globális változók használatának minimalizálása. A Modern kódnak kevés vagy semmilyen globálja van. A legtöbb változó a funkcióikban található. Néha azonban hasznosak lehetnek a projektszintű adatok tárolására.
paraméterek
tetszőleges adatokat tudunk átadni a funkcióknak paraméterekkel (más néven függvény argumentumokkal) .
az alábbi példában a függvénynek két paramétere van: from
és text
.,
amikor a függvényt sorokban hívják(*)
és(**)
, a megadott értékeket helyi változókra másoljákfrom
éstext
. Ezután a funkció használja őket.
itt van még egy példa: van egy változó from
és adja át a függvénynek., Kérjük, vegye figyelembe: a funkció megváltozik from
, de a változás nem látható kívül, mert egy függvény mindig megkapja az érték másolatát:
alapértelmezett értékek
Ha egy paraméter nincs megadva, akkor értéke undefined
lesz.
például a fent említett funkció showMessage(from, text)
lehet nevezni egyetlen érv:
showMessage("Ann");
Ez nem hiba. Egy ilyen hívás kimenet "*Ann*: undefined"
., Nincs text
, tehát feltételezzük, hogy text === undefined
.,
Ha meg szeretnénk használni egy “alapértelmezett” text
ebben az esetben, akkor meg tudjuk határozni után =
:
function showMessage(from, text = "no text given") { alert( from + ": " + text );}showMessage("Ann"); // Ann: no text given
ha az text
paraméter nem telt el, ez lesz az érték "no text given"
Itt "no text given"
egy karakterlánc, de lehet egy komplex kifejezés, amely csak értékelése, a kijelölt ha a paraméter hiányzik., Tehát ez is lehetséges:
a JavaScriptben egy alapértelmezett paramétert értékelnek minden alkalommal, amikor a funkciót a megfelelő paraméter nélkül hívják.
a fenti példábananotherFunction()
minden alkalommalshowMessage()
atext
paraméter nélkül hívják.
alternatív alapértelmezett paraméterek
néha érdemes alapértelmezett értékeket beállítani a paraméterekhez, nem a függvénynyilatkozatban, hanem egy későbbi szakaszban, annak végrehajtása során.,paraméter tudjuk összehasonlítani undefined
:
function showMessage(text) { if (text === undefined) { text = 'empty message'; } alert(text);}showMessage(); // empty message
…Vagy használhatjuk a ||
operátor:
// if text parameter is omitted or "" is passed, set it to 'empty'function showMessage(text) { text = text || 'empty'; ...}
a Modern JavaScript motorok támogatja a nullish egyesítő üzemeltető ??
, jobb, ha falsy értékek, mint például a 0
minősül rendszeres:
a Visszatérő érték
A funkció visszatérési értéke vissza a hívó kód, mint az eredmény.,
A legegyszerűbb példa egy függvény, amely összegeket a két érték:
function sum(a, b) { return a + b;}let result = sum(1, 2);alert( result ); // 3
Az irányelv return
lehet bármilyen hely, a funkció. Amikor a végrehajtás eléri, a függvény leáll, majd az érték visszatér a hívókódhoz(a result
– hoz rendelve).
a return
egy függvényben sok előfordulás lehet. Például:
a return
érték nélkül használható., That causes the function to exit immediately.
For example:
function showMovie(age) { if ( !checkAge(age) ) { return; } alert( "Showing you the movie" ); // (*) // ...}
In the code above, if checkAge(age)
returns false
, then showMovie
won’t proceed to the alert
.,
return
és aérték között egy hosszú kifejezéshez a return
, csábító lehet egy külön sorba helyezni, mint például:
return (some + long + expression + or + whatever * f(a) + f(b))
ez nem működik, mert a JavaScript pontosvesszőt feltételez a return
után. Ez ugyanúgy fog működni, mint:
return; (some + long + expression + or + whatever * f(a) + f(b))
tehát gyakorlatilag üres visszatéréssé válik.,
Ha azt akarjuk, hogy a visszaküldött kifejezés több sorra kerüljön, akkor ugyanabban a sorban kell elindítanunk, mint a return
. Vagy legalább tegye oda a nyitó zárójeleket az alábbiak szerint:
return ( some + long + expression + or + whatever * f(a) + f(b) )
és úgy fog működni, ahogy elvárjuk.
egy függvény elnevezése
a függvények műveletek. Tehát a nevük általában ige. Rövidnek, a lehető legpontosabbnak kell lennie, és le kell írnia, hogy mit csinál a funkció, hogy valaki, aki elolvassa a kódot, jelzést kapjon arról, hogy mit csinál a funkció.,
széles körben elterjedt gyakorlat, hogy egy függvényt verbális előtaggal indítunk, amely homályosan leírja a műveletet. A csapaton belül megállapodásra kell jutni az előtagok jelentéséről.
például a "show"
függvényekkel kezdődő függvények általában mutatnak valamit.
függvény kezdve …
példák az ilyen nevekre:
az előtagokkal a helyén, egy pillantás egy függvénynévre megértést ad arról, hogy milyen munkát végez, és milyen értéket ad vissza.,
egy függvénynek pontosan azt kell tennie, amit a neve javasol, nem több.
két független művelet általában két funkciót érdemel, még akkor is, ha általában együtt hívják őket (ebben az esetben elkészíthetünk egy 3.funkciót, amely ezt a kettőt hívja).
néhány példa a szabály megszegésére:
-
getAge
– rossz lenne, haalert
a korral (csak akkor kap)., -
createForm
– rossz lenne, ha módosítaná a dokumentumot, hozzáadna egy űrlapot (csak létre kell hoznia és vissza kell térnie). -
checkPermission
– rossz lenne, ha aaccess granted/denied
üzenetet jelenítené meg (csak az ellenőrzést kell elvégeznie, és vissza kell adnia az eredményt).
ezek a példák az előtagok közös jelentését feltételezik. Ön és csapata szabadon megállapodhatnak más jelentésekben, de általában nem nagyon különböznek egymástól. Mindenesetre határozottan meg kell értened, hogy mit jelent az előtag, mit tehet egy előtagú függvény., Minden azonos előtagú funkciónak be kell tartania a szabályokat. A csapatnak meg kell osztania a tudást.
a gyakran használt funkciók néha ultrashort nevekkel rendelkeznek.
például a jQuery keretrendszer a $
függvényt határozza meg. A lodash könyvtár alapvető funkciója a _
.
ezek kivételek. Általában a függvényneveknek tömörnek és leírónak kell lenniük.
Functions = = = Comments
Functions should be short and do exactly one thing., Ha ez a dolog nagy, talán érdemes megosztani a funkciót néhány kisebb funkcióra. Néha ezt a szabályt követve nem lehet olyan egyszerű, de ez határozottan jó dolog.
egy külön függvény nem csak könnyebb tesztelni és hibakeresést végezni – a létezése nagyszerű megjegyzés!
például hasonlítsa össze az alábbi két függvényt: showPrimes(n)
. Mindegyik n
prímszámokat ad ki.,
az első változat címkét használ:
function showPrimes(n) { nextPrime: for (let i = 2; i < n; i++) { for (let j = 2; j < i; j++) { if (i % j == 0) continue nextPrime; } alert( i ); // a prime }}
a második változat egy kiegészítő funkciót használ isPrime(n)
az primalitás teszteléséhez:
a második változat könnyebb megérteni, nem igaz? A kóddarab helyett a művelet nevét látjuk (isPrime
). Néha az emberek olyan kódra utalnak, mint az önleírás.
tehát a funkciók akkor is létrehozhatók, ha nem akarjuk újra felhasználni őket. Felépítik a kódot, és olvashatóvá teszik.,
összefoglaló
a függvény deklaráció így néz ki:
function name(parameters, delimited, by, comma) { /* code */}
- a függvénynek átadott értékek a helyi változókra másolódnak.
- egy függvény külső változókat is elérhet. De csak belülről működik. A függvényen kívüli kód nem látja a helyi változókat.
- egy függvény visszatérhet egy értéket. Ha nem, akkor az eredménye
undefined
.,
ahhoz, hogy a kód tiszta és könnyen érthető legyen, ajánlott elsősorban helyi változókat és paramétereket használni a függvényben, nem pedig külső változókat.
mindig könnyebb megérteni egy olyan függvényt, amely paramétereket kap, velük dolgozik, és eredményt ad vissza, mint egy olyan függvényt, amely nem kap paramétereket, de a külső változókat mellékhatásként módosítja.
függvény elnevezése:
- egy névnek egyértelműen le kell írnia, hogy mit csinál a függvény. Amikor egy függvényhívást látunk a kódban, egy jó név azonnal megértést ad nekünk, hogy mit csinál és visszatér.,
- a függvény egy művelet, így a függvénynevek általában verbálisak.
- számos jól ismert függvény előtag létezik, mint például a
create…
,show…
,get…
,check…
stb. Használja őket arra, hogy utaljon arra, amit egy funkció csinál.
a funkciók a szkriptek fő építőkövei. Most már lefedtük az alapokat, így elkezdhetjük létrehozni és használni őket. De ez csak az út kezdete. Mi lesz, hogy visszatérjen hozzájuk sokszor, megy mélyebben a fejlett funkciók.
Vélemény, hozzászólás?