Zasięg this?

Question

Witam, witam

Ostatnio bawię się z galerią zdjęć i napotkałem się z małym problemem, otóż próbuje każdą czynność podzielić na poszczególne funkcje.

I problem tkwi w używaniu this

Mam tablicę z img, na której działam, jako eventListener dodałem funkcje inicjującą, a w funkcji inicjującej dwie funkcje, jedną odpowiedzialną za pobranie źródła zdjęcia, druga zaś za stworzenie kontenera, który będzie się pojawiał na całym ekranie i pokazywał owe zdjęcie tyle, że w większej rozdzielczości.

var image = document.querySelectorAll('.item');
image = [...image];
image.forEach( fullResInit );

function fullResInit(e){
    e.addEventListener("click", init);
}
function init(){
    createContainer();
    getSrc();
}
function getSrc(){
    console.log(this);
}

function createContainer(){
    var container = document.createElement('div');
    container.className = "imageContainer";
    document.body.appendChild(container);
    var toggleButton = document.createElement('button');
    toggleButton.className = "toggleButton";
    container.appendChild(toggleButton);
    toggleButton.innerHTML = "ZAMKNIJ";
    toggleButton.addEventListener("click", ()=>{
        container.remove();
    });
}

Funkcja napisana w ten sposób nie działa (w pewien sposób działa, bo pokazuje się w konsoli wartość undefined), nie wiem jak miałbym odnieść się do tablicy image.

function getSrc(){
    console.log(this);
}

Gdy w funkcji inicjującej ustawie console loga

    console.log(this);

wszystko śmiga, jakiś pomysł jak sobie z tym poradzić?

 

Answer 1

jakiś pomysł jak sobie z tym poradzić?

Proponuję ogólnie zmniejszyć użycie `this` - im głębiej w funkcje się wchodzi, tym trudniej kontrolować to czym jest. Zamiast tego, można po prostu przekazywać element jako argument:

function fullResInit(e){
    e.addEventListener("click", e => init(e.currentTarget));
}
function init(element){
    getSrc(element);
}
function getSrc(element){
    console.log(element);
}

 

Comments

Albo, jeśli koniecznie potrzebne jest użycie this, można wołać funkcję ze z góry ustawionym this:

function init(){
    createContainer();
    getSrc.call(this);
}

Alternatywnie, gdy init() będzie funkcją strzałkową, można posłużyć się własnie e.currentTarget lub e.target (w zależności, czy potrzeba elementu, pod który podpięty jest listener, czy tego na którym zostało dispatchowane zdarzenie) jako this dla funkcji getSrc():

const init = (e) => {
    createContainer();
    getSrc.call(e.currentTarget); // e.currentTarget będzie ustawione jako this wewnątrz funkcji getSrc()
};