JavaSkrypt Definiuje i Wywołuje Funkcje z Przykładem
Jamesa Hartmana
⚡ Inteligentne podsumowanie
JavaFunkcje skryptowe grupują wielokrotnego użytku bloki kodu, które są uruchamiane tylko po wywołaniu. W tym przewodniku pokazano, jak zadeklarować taką funkcję, przekazać do niej argumenty i zwrócić wartość z powrotem do wywołującego.
W czym jest funkcja JavaScenariusz?
Funkcje są bardzo ważne i przydatne w każdym języku programowania, ponieważ umożliwiają wielokrotne wykorzystanie kodu. Funkcja to blok kodu, który zostanie wykonany tylko po wywołaniu. Jeśli masz kilka linijek kodu, które muszą zostać użyte wielokrotnie, możesz utworzyć funkcję zawierającą powtarzające się linijki kodu, a następnie wywołać ją w dowolnym momencie.
Nic w nawiasach klamrowych nie działa samoczynnie. Przeglądarka zapisuje blok pod nadaną mu nazwą, a kod jest wykonywany tylko wtedy, gdy nazwa ta zostanie podana z nawiasami, na przykład: myFunction()Funkcje znajdują się zatem w centrum każdego JAVASCRIPT program, czy skrypt żyje wewnątrz strony lub w pliku zewnętrznym.
Jak utworzyć funkcję w JavaScenariusz
- Użyj słowa kluczowego funkcjonować po którym następuje nazwa funkcji.
- Po nazwie funkcji otwórz i zamknij nawiasy.
- Po nawiasie otwórz i zamknij nawiasy klamrowe.
- W nawiasach klamrowych napisz swoje wiersze kodu.
Składnia:
function functionname()
{
lines of code to be executed
}
Poniższy przykład definiuje myFunction() a następnie wywołuje go w następnym wierszu, aby komunikat pojawił się natychmiast po załadowaniu strony. Spróbuj sam:
<html>
<head>
<title>Functions!!!</title>
<script type="text/javascript">
function myFunction()
{
document.write("This is a simple function.<br />");
}
myFunction();
</script>
</head>
<body>
</body>
</html>
Funkcja z argumentami
Można również tworzyć funkcje z argumentami. Argumenty należy podawać w nawiasach.
Składnia:
function functionname(arg1, arg2)
{
lines of code to be executed
}
Tutaj countVowels() Odbiera imię, które użytkownik wpisze w monicie, przechodzi przez każdy znak i raportuje, ile samogłosek zawiera imię. Spróbuj sam:
<html>
<head>
<script type="text/javascript">
var count = 0;
function countVowels(name)
{
for (var i=0;i<name.length;i++)
{
if(name[i] == "a" || name[i] == "e" || name[i] == "i" || name[i] == "o" || name[i] == "u")
count = count + 1;
}
document.write("Hello " + name + "!!! Your name has " + count + " vowels.");
}
var myName = prompt("Please enter your name");
countVowels(myName);
</script>
</head>
<body>
</body>
</html>
JavaWartość zwracana przez skrypt
Można także tworzyć funkcje JS zwracające wartości. Wewnątrz funkcji musisz użyć słowa kluczowego powrót po którym następuje wartość, która ma zostać zwrócona.
Składnia:
function functionname(arg1, arg2) { lines of code to be executed return val1; }
W tym ostatnim przykładzie returnSum() Zwraca sumę do wiersza, który ją wywołał, dzięki czemu wynik można połączyć w zdanie, zamiast drukować go wewnątrz funkcji. Spróbuj sam:
<html>
<head>
<script type="text/javascript">
function returnSum(first, second)
{
var sum = first + second;
return sum;
}
var firstNo = 78;
var secondNo = 22;
document.write(firstNo + " + " + secondNo + " = " + returnSum(firstNo,secondNo));
</script>
</head>
<body>
</body>
</html>
Typy funkcji w JavaScenariusz
Wszystkie trzy powyższe przykłady wykorzystują klasyczną deklarację funkcji, ale nowoczesną JavaSkrypt oferuje kilka innych form. Różnią się one głównie tym, czy silnik je podnosi i jak każda z nich traktuje this słowo kluczowe.
| Typ funkcji | Typowa składnia | Kiedy jest używany |
|---|---|---|
| Deklaracja funkcji | funkcja powitanie() { } | Nazwana, wielokrotnego użytku logika; podniesiona na szczyt swojego zakresu |
| Wyrażenie funkcji | const powitanie = funkcja () { }; | Przechowywanie funkcji w zmiennej, nie podniesionej |
| Funkcja strzałkowa (ES6) | const powitanie = () => { }; | Krótkie wywołania zwrotne; dziedziczy to z otaczającego zakresu |
| Funkcja anonimowa | ustawTimeout(funkcja () { }, 100); | Jednorazowa logika przekazana bezpośrednio do innej funkcji |
| IIFE | (funkcja () { })(); | Działa natychmiast i zachowuje prywatne zmienne |
| Callback | items.forEach(showItem); | Funkcja przekazana innej funkcji i wywołana później |
Uwaga dotycząca powyższych przykładów: historyczne próbki wykorzystują var oraz document.write()i oba nadal działają w każdej przeglądarce. Obecnie stosuje się deklarowanie zmiennych za pomocą let or const i drukuje dane wyjściowe przez console.log() lub ustawiając textContent na elemencie, ponieważ document.write() czyści stronę, której ładowanie już się zakończyło. type="text/javascript" Atrybut jest opcjonalny również w HTML5.
Parametry funkcji, argumenty i wartości domyślne
Parametry to nazwy zastępcze wymienione w definicji, natomiast argumenty to rzeczywiste wartości podawane podczas wywołania funkcji. countVowels(name) powyżej, name jest parametrem, a tekst wpisany w monicie jest argumentem.
function greet(user, greeting = "Hello") { return greeting + ", " + user; } greet("Ann"); greet("Ann", "Welcome");
- Parametr bez pasującego argumentu staje się
undefinedchyba że podano wartość domyślną, jakgreetingjest tutaj. - Dodatkowe argumenty są ignorowane przez listę parametrów, ale pozostają dostępne poprzez
argumentsobiekt wewnątrz dowolnej funkcji innej niż strzałkowa. - Parametr odpoczynku zapisany jako
...valueszbiera każdy pozostały argument w jeden autentyczny szyk.
Zakres funkcji i podnoszenie w JavaScenariusz
Miejsce zapisu funkcji decyduje o tym, co może ona zobaczyć i kiedy może zostać wywołana. Dwie zasady wyjaśniają niemal każdą niespodziankę, z jaką spotykają się początkujący.
- Podnoszenie: Deklaracje funkcji są przenoszone na górę zakresu przed uruchomieniem skryptu, więc można je wywołać w wierszu powyżej ich definicji. Wyrażenia funkcyjne i funkcje strzałkowe nie są podnoszone i generują błąd, jeśli zostaną wywołane wcześniej.
- Zakres: zmienne zadeklarowane za pomocą
varwewnątrz funkcji są widoczne w całej tej funkcji, podczas gdyletorazconstsą ograniczone do bloku, w którym się znajdują. Wszystko, co zadeklarowano poza każdą funkcją, jest globalne.
W praktyce pokazuje to licznik samogłosek. count zmienna jest zadeklarowana poza funkcją, więc wywołanie countVowels() Drugie wywołanie na tej samej stronie kontynuuje dodawanie do poprzedniej sumy zamiast zaczynać od zera. Przeniesienie deklaracji wewnątrz funkcji powodowałoby jej resetowanie przy każdym wywołaniu.
Te scoping reguły przenoszą się również do kodu po stronie serwera, dlatego takie samo rozumowanie ma zastosowanie, gdy funkcje są pisane dla node.jsi dlaczego zachowanie funkcji pojawia się tak często w JavaPytania do wywiadu scenariuszowego.
