Hoisting
09-03-2018 JS JSGeneralnie hoisting to taki mechanizm w języku JavaScript, który polega na tym, że silnik JS wyszukuje wszystkie deklaracje zmiennych (i funkcji) w danej funkcji i przenosi je na początek kodu.
Innymi słowy jest to niejawne przenoszenie definicji na szczyt zakresu jej widoczności.
Windowaniu podlegają tylko deklaracje na początek kodu, bez ich wartości.
PRZYPADEK 1
console.log(a);
var a= 5;
Czyli dzieje się tak: silnik najpierw analizuje kod i dokonuje hositingu (wyniesienie na górę kodu deklaracji zmiennych i funkcji)
var a
console.log(a);
a= 5;
PRZYPADEK 2
console.log(a);
var a= 5;
function one() {
console.log(b);
var b= 10;
}
one();
Najpierw hoistingowi ulegają funkcje potem deklaracja zmiennej. Funkcje mają priorytet.
function one() {
var b // deklaracja wyniesiona na górę
console.log(b);
b= 10;
}
var a // deklaracja zmiennej
console.log(a); // metoda log
a= 5 // inicjalizacja
one(); // wywołanie naszej funkcji
PRZYPADEK 3
W JavaScript funkcje tworzymy najczęściej na dwa sposoby: poprzez bezpośredni zapis (deklaracja funkcji) lub przez wyrażenie funkcyjne:
function mathOperations (a,b) {
return a + b;
};
var mathOperations = function (a,b) {
return a + b;
};
W jaki sposób różnią się te dwa zapisy podczas hoistingu?
(function () {
var mathOperations = function (a,b) {
return a + b }
function mathOperations (a,b) {
return a * b }
return mathOperations (3,3);
})();
Jaki będzie wynik 6 czy 9 ? Otóż 6.
W pierwszej kolejności przenoszone są definicje funkcji, a dopiero później następuje hoisting zmiennych deklarowanych przez var.
Czyli najpierw wykonuje się funkcja mnożącą dwa argumenty, ale za chwilę nadpisujemy ją wyrażeniem funkcyjnym sumującym liczby. Ostatecznie otrzymujemy funkcję sumującą argumenty a + b.