На что ссылается this при данной вложенности?

Question

[Воващ]

Есть модуль, в нём есть метод (объявляет плеер и вызывает this.onPlayerStateChange)
Привязав к контексту в конструкторе получаю ожидаемый результат ( коммент )
Но решив привязать к контексту прям при создании плеера, получил аналогичный результат (выполняет те-же ожидаемые действия) с чем это связано? как понять откуда пришёл контекст VideoPlayer?

export default class VideoPlayer {
    constructor(triggers, popup) {
        this.btns = $$(triggers);
        this.overlay = $$(popup);
        this.close = $$('.close', this.overlay);
        // this.onPlayerStateChange = this.onPlayerStateChange.bind(this);
    }
...
 createPlayer(url){
        this.player =  new YT.Player('frame', {
            height: '100%',
            width: '100%',
            videoId: `${url}`,
            events: {
               'onStateChange': this.onPlayerStateChange.bind(this)
              }
        });

        this.overlay.style.display ='flex';
    }

Comments

[Kovalsky]

У меня одно большое "в смысле" после прочтения. Я ни в коем случае не критикую, но скажите пожалуйста зачем вам понадобилось менять контекст выполнения метода класса? Вам действительно нужно чтобы метод класса VideoPlayer выполнялся в контексте какой-то другого объекта, а не экземпляра VideoPlayer, или цель все таки какая-то другая?

И с onPlayerStateChange тоже не очень понятно. Это же вроде дефолтный обработчик который выполняется независимо от переданного юзером или нет?

[Воващ]

Kovalsky, насколько я понимаю, в данном случае 'onStateChange': this.onPlayerStateChange , будет ссылаться на YT.Player , следуя этой логике я привязал в конструкторе к контексту VideoPlayer (учитывая, что таких плееров несколько и у всех разные url'ки)

или это ошибочно?

в моем случае я передаю туда state,на основании которого (при полном просмотре 1ого видео) разблокирую дальнейший контент

onPlayerStateChange(state){
        const blockedElem = (this.activeBtn.closest('.module__video-item')).nextElementSibling;

        if(state.data === 0) {
            // UNBLOCK blockedElem
        }

    }

[Kovalsky]

V0vash, а как все перечисленное связано с контекстом, если в приведенном вами участке кода я вижу что контекстом является экземпляр плеера? Моэет быть вы имеете в виду что вы хотите сам стэйт передать в этот метод? Ну хорошо, но даже если так, то зачем это нужно? Плеер же сам вроде бы берёт и выполняет этот метод, то есть вы можете его не передавать при создании компонента плеера. В общем сначала определитесь с задачей, пока я не понял что нужно. Если речь об изменении стэйта извне плеера, то для этого лучше будет отдельный метод придумать

Answer 1

[Robur]

this при любой вложенности содержит тот this который был установлен при вызове функции в которой эта строка выполняется.

В вашем случае:

в первом варианте - this установлен для конструктора в создаваемый объект. bind(this) привяжет к создаваемому объекту. результат записывается обратно в onPlayerStateChange - поэтому теперь откуда бы эта функция не была вызвана, она будет привязана к созданому объекту (инстанс VideoPlayer)

во втором варианте - bind(this) привяжет к тому this который установлен для вызова createPlayer. Это значение зависит от того как createPlayer была вызвана.
Если просто player.createPlayer, то в this будет player (инстанс VideoPlayer), соответственно он и пойдет в bind(this)
привязанная функция будет передана как обработчик но сама onPlayerStateChange не меняется и остается не привязанной.

YT.Player тут вообще никак не участвует и не играет роли.