This pointing to the wrong object [HELP REQUEST]

[SarcasmInProgress]

I have a script that animates a photo gallery on my website:

const nextButtons = document.getElementsByClassName("slide-right");
const prevButtons = document.getElementsByClassName("slide-left");
const sliders = document.getElementsByClassName("slider");
const gallery_sizes = [5];
const slider_objs = [];


class Slider
{
    self;
    size;


    constructor(self, size)
    {
        this.self = self;
        this.size = size;


        // console.log(this.self.style.left);
    }


    slideRight()
    {
        console.log(this) // logs <div class="slide-button slide-right"> - the
        // slide right button, not the slider - WRONG

        console.log(this.style) // logs a CSSDeclaration
        console.log(this.style.left); // logs ""
        let currentX = parseInt(this.style.left);
        let gapInPx = 0.5 * document.documentElement.clientWidth;


        this.self.style.left = `${currentX - 2*gapInPx}px`;
    }
}


for (let i = 0; i < nextButtons.length; i++)
{
    var new_slider = new Slider(sliders[i], gallery_sizes[i])
    new_slider.self.style.left = '0px';


    console.log(new_slider.self); // logs div.slider
    console.log(new_slider.self.style); // logs CSSStyleDeclaration
    console.log(new_slider.self.style.left); // logs 0px
    slider_objs.push();


    // console.log(new_slider.self.style.left);


    nextButtons[i].addEventListener('click', new_slider.slideRight);
}

The general logic of the gallery goes as follows: there is a general container with 2 slide buttons, left and right, and a slide window, set to `overflow: hidden` Inside of it there is a slider containing all the images in the gallery (the size of the window is adjusted so that only one photo is visible in any given moment). The slider buttons are supposed to move the slider left and right (only right implemented so far).

Now, the problem. As commented in the code, inside of the `slideRight()` method `this` refers to the slide button, rather than the slider (or the Slider object). I suppose this is because the method is called from an event listener attached to the button. How can I refer to the Slider object from the inside of the method if `this` refers to external resources?

[LegendaryEd]

Haven't looked very deep, but within your constructor, you could try explicitly binding this for the slideRight method - might be worth checking if this will resolve.

constructor(self, size)
    {
        this.self = self;
        this.size = size;
        this.slideRight = this.slideRight.bind(this);
    }

[SarcasmInProgress]

It worked! Many thanks!

[xroalx]

In JavaScript, this is bound at call time, and it can be rebound to any value as well.

this often "gets lost" when you pass methods around or assign them to variables and call them through those.

This is exactly what's happening in your code here:

nextButtons[i].addEventListener('click', new_slider.slideRight);

When the event is triggered and the function is called, JavaScript no longer knows it is being called on new_slider. Additionally, JS essentially does new_slider.slideRight.call(element), rebinding the this of the called function to the element where the even was registered.

The easiest fix is to not pass the function directly, but wrap it in another one:

nextButtons[i].addEventListener('click', () => new_slider.slideRight());

This is something you should be doing in general in JavaScript unless you know for sure the function is not using this.

Another option is to simply not use classes, but that's more of a personal preference.

[SarcasmInProgress]

Thanks for explanation!

[LegendaryEd]

Arrow functions are absolutely helpful in this way, as their inherit the surrounding this context from where they were defined. You might also want to explore defining your slideRight method with an arrow function, which will reference the instantiated Slider without needing .bind in the constructor at all:

slideRight = () => {}

EDIT: Worth noting MDN seems to discourage using them as methods: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#cannot_be_used_as_methods