Główna zawartość
Kurs: Programowanie > Rozdział 1
Lekcja 10: FunkcjePrzegląd: Funkcje
To jest przegląd tego, co zostało omówione w poradniku na temat funkcji.
Często chcemy móc ponownie wykonać bloki kodu, kiedy piszemy programy, bez konieczności ponownego zapisu kodu. Potrzebujemy sposobu grupowania kodu razem i nadania jej nazwy, dzięki czemu możemy wykonać kod poprzez nazwę, to jest to co nazywamy funkcją.
Aby utworzyć funkcję, musimy najpierw ją zadeklarować i nadać jej nazwę, w tak sam sposób w jaki tworzymy dowolną zmienną, a następnie podążamy do definicji funkcji:
var sayHello = function() {
};Możemy umieścić dowolny kod wewnątrz funkcji - jedna instrukcja, wiele instrukcji - zależy co chcemy zrobić. W tej funkcji możemy porostu napisać wiadomość do losowej lokalizacji:
var sayHello = function() {
text("Halllllllo!", random(200), random(200));
};Teraz, jeśli wszystko, co robimy jest zadeklarowanie funkcji, to nic się nie stanie. Aby program wykonał kod który jest wewnątrz funkcji, musimy "wywołać" funkcję, pisząc jej nazwę, a następnie pusty nawias:
sayHello();Teraz możemy wywołać ją gdzie chcemy, tyle razy, ile chcieliśmy!
sayHello();
sayHello();
sayHello();Często chcemy być w stanie dostosować funkcje, aby powiedzieć programowi "dobrze, wykonaj cały ten kod, ale zmienić kilka rzeczy o tym, jak to zrobić" w ten sposób mamy kod, który jest zarówno wielokrotnego użytku, oraz elastyczny, najlepszy z obu światów. Możemy to osiągnąć określając "argumenty" funkcji, za pomocą tych argumentów zmieniamy, jak działa funkcja i przekazujemy je w podczas wywołania funkcji.
Na przykład co zrobić, jeśli chcieliśmy móc powiedzieć dokładnie gdzie chcemy wyświetlić wiadomość, tak jak możemy powiedzieć, gdzie dokładnie chcemy narysować prostokąty i elipsy? Na przykład, możemy sobie wyobrazić, ze wywołujemy tę funkcję tak, aby umieścić wiadomości w miejscu o dokładnie określonych współrzędnych:
sayHello(50, 100);
sayHello(150, 200);Aby to działało, musimy zmienić definicję naszej funkcji
sayHello, tak aby wiedziała, że otrzyma 2 wiadomości oraz użyła ich w kodzie:var sayHello = function(xPos, yPos) {
text("Halllllllo!", xPos, yPos);
};Argumenty, które przekazujesz w zasadzie stają się zmiennymi wewnątrz definicji funkcji, a nazwy zależą od tego jak je nazwałeś w nawiasach. Możemy je tak po prostu zamienić na coś krótszego:
var sayHello = function(x, y) {
text("Halllllllo!", x, y);
};Nasze funkcję mogą przyjmować dowolną liczbę argumentów - zero, jeden, dwa lub więcej. Możemy się również zdecydować na funkcję, która będzie przyjmować imię, aby powiedzieć cześć:
var sayHello = function(name) {
text("Halllllllo, " + name, random(200), random(200));
};I wywoływać ją w taki sposób:
sayHello("Winston");
sayHello("Pamela");Możemy połączyć te pomysły i przyjąć trzy argumenty, nazwisko i położenie:
var sayHello = function(name, x, y) {
text("Halllllllo " + name, x, y);
};I wywoływalibyśmy je w taki sposób:
sayHello("Winston", 10, 100);To naprawdę zależy od tego co ma robić funkcja i jak chcesz dostosować to co mają robić. Zawsze możesz zacząć od funkcji bez argumentów, a następnie dodawać więcej, kiedy sobie zdasz sprawę, że ich potrzebujesz.
Przez cały kurs tak naprawdę wywoływałeś funkcję - tak właśnie rysowałeś i animowałeś za pomocą
rect, ellipse, triangle, itp. Wszystkie te funkcje pochodzą z biblioteki ProcessingJS, ładowaliśmy ją do każdego programu jaki tutaj zrobiłeś, tak abyś mógł ją zawsze używać. Zdefiniowaliśmy te funkcje dla ciebie, ponieważ uznaliśmy, że będą użyteczne, a teraz do Ciebie należy zdefiniowanie niestandardowych funkcji, których potrzebujesz we własnych programach. Na przykład, dostarczyliśmy funkcje ellipse, ale nie zapewniamy funkcji cat - jeżeli twój program obejmuje wiele różnych kotów w różnych lokacjach, może należałoby stworzyć własną funkcję od rysowania kotów!Jest też inne potężne zastosowanie funkcji - możemy pobrać jakąś wartość, przetworzyć ją, a potem zwrócić inną wartość. Pomyśl o wszystkim co możesz zrobić z kalkulatorem - dodawać wartości, odejmować, obliczyć pierwiastek kwadratowy, mnożyć, itp. Wszystko to można zrobić w funkcjach, pobierających dane wejściowe i zwracających wynik. Funkcja może przyjąć dane wejściowe jako argumenty i zwrócić rezultat jako instrukcja powrotu (return). Tutaj jest funkcja, która dodaje dwie liczby i zwraca wynik:
var addNumbers = function(num1, num2) {
var result = num1 + num2;
return result;
};
var sum = addNumbers(5, 2);
text(sum, 200, 200); // Wyświetla "7"Instrukcja powrotu robi dwie rzeczy: oddaje wartość temu kto go wywołał, (dlatego możemy przechowywać wynik w zmiennej
sum) i natychmiast kończy działanie funkcji. Oznacza to, że głupotą było by napisanie czegoś takiego jak poniżej, ponieważ ostatnia linia kodu nigdy nie będzie wykonana:var addNumbers = function(num1, num2) {
var result = num1 + num2;
return result;
result = result * 2; // głupstwo!
};Funkcje zwracające wartość są bardzo użyteczne w programach opracowujących dane, ponieważ funkcje mogą być łączone ze sobą w wyrażenia tak, jak tutaj:
var biggerSum = addNumbers(2, 5) + addNumbers(3, 2);Można nawet wywołać funkcję wewnątrz innego wywołania, chociaż może to być czasem nieprzejrzyste i trudne do zrozumienia:
var hugeSum = addNumbers(addNumbers(5, 2), addNumbers(3, 7));Teraz, kiedy wiemy jak tworzyć funkcję zawierające fragmenty kodu, możemy przejść do ważnej sprawy: zmienne lokalne w odróżnieniu odzmiennych globalnych.
Kiedy deklarujemy nową zmienną wewnątrz funkcji, mówimy, że jest to zmienna lokalna tej funkcji. Jest tak, ponieważ tylko ta funkcja widzi tą zmienną - reszta programu nie może. Kiedy wyjdziemy poza funkcję, zmienna jakby przestaje istnieć. W następującej funkcji
localResult jest lokalną zmienną:var addNumbers = function(num1, num2) {
var localResult = num1 + num2;
println("The local result is: " + localResult);
return localResult;
};
addNumbers(5, 7);
println(localResult); // oh noes!Kiedy uruchomimy ten kod, otrzymamy błąd w ostatniej linii: "localResult jest niezdefiniowana". Ta zmienna jest zdefiniowania tylko i wyłącznie w funkcji, tam gdzie ją zadeklarowaliśmy za pomocą
var localResult i nie jest znana poza funkcją.Kiedy deklarujemy zmienną poza funkcją, mówimy na nią zmienną globalną. Oznacza to, że wszystkie funkcje mają do niego dostęp i mogą robić z nią co chcą.
var globalResult;
var addNumbers = function(num1, num2) {
globalResult = num1 + num2;
println("The global result is: " + globalResult);
};
addNumbers(5, 7);
println(globalResult);Kiedy uruchomimy powyższy kod, nie pojawi się błąd, ponieważ
globalResult zadeklarowaliśmy poza funkcją, a więc mamy do niej dostęp gdziekolwiek chcemy.⚠ Możesz odczuwać pokusę używania zmiennych globalnych, ponieważ nigdy nie pojawi się błąd, że są niezdefiniowane. Z drugiej strony, zmienne globalne są częstym źródłem błędów trudnych do znalezienia i wyeliminowania. Jeśli piszesz długie programy i do tego jeszcze współpracujecie w grupie, łatwo jest stracić kontrolę nad tym, gdzie i jak Ty (lub inni!) używacie zmiennych globalnych. W miarę możliwości należy stosować zmienne lokalne.
Każdy język programowania jest inny, ale w JavaScript, ważne jest pilnowanie "zakresu funkcji" - funkcja widzi zmienne zadeklarowanie wewnątrz bloku i zmienne globalne zadeklarowane poza nim, ale nie widzisz zmiennych z innych funkcji.
Chcesz dołączyć do dyskusji?
kocham to :)
to super stronka i dużo się z niej nauczyłam! :)(16 głosów)
nie wygodniej i łatwiej jest używać funkcji o zapisie:
function testowa(){
}
wtedy też można wywoływać funkcje przed zadeklarowaniem jej działania.(14 głosów)
tak jest znaczne szybciej ale ja wole tak jak na górze(2 głosy)
Czym różni się parametr funkcji od argumentu funkcji ?
Czy to nie jest to samo?(6 głosów)