эта область в javascript от события и неявного связывания - PullRequest
Новая
       20

эта область в javascript от события и неявного связывания

0 голосов
/ 21 января 2020

Я новичок в JS (я также изучаю React), и мой вопрос связан с двумя различными значениями, которые ключевое слово "this" принимает в следующем коде: 

var logseeger = {
    a: console.log('>> this: ', this), // window
    x: 0,
    updateCount: function(){
        this.x++; // x=1
        console.log('updateCount: ', this); // implicit binding: logger | from event: button
        console.log('>> x: ', this.x); // implicit binding: x=1 | from event: NaN
    }
}

console.log('top of the calling')
logger.updateCount()

// WHY inside logger "this" takes the scope from the button
document.querySelector('#btn').addEventListener('click', logger.updateCount);

Как видите, если я вызываю метод updateCount () из logger objet c, «this» вне функции получает значение из окна, а внутри функции it принимает значение логгера. Но все становится странным для меня, когда я нажимаю кнопку «te» и вижу, что «this» принимает значение кнопки. За это я получаю «NaN».

Я знаю, что если я хочу, чтобы это работало, я должен передать обратный вызов в addEventListener, но здесь я хочу узнать, как это работает.

Спасибо !

1 Ответ

0 голосов
/ 21 января 2020

Для меня размышление о сфере действия «это» наиболее уместно, когда я думаю о внешнем объеме окружающего замыкания или объекта, или я также называю это «средой». Итак, в вашем первом файле console.log «this» окружающее замыкание указывает на объект глобального окна, который окружает экземпляр регистратора. Ваш второй console.log «this» находится внутри метода объекта logger, поэтому он указывает на сам объект. Объект является («окружающим» метод), а в третьем вы не вызываете метод, а оставляете вызывающий и внешний API. Вы просто передаете ссылку на свою функцию, чтобы кто-то другой окружил функцию сейчас и передал «this» ее среде, когда она будет выполнена.

...