Почему в функции свойство undefined, а в консоли выводится верно?

Question

[Алексей Скляров]

Есть функция:

...
  this.works = {
    /**
     * Methods for working with the work page.
     *
     */
    containers: {
      h1: $('.page-work__article h1'),
      p: $('.page-work__article p'),
      counters: $('.info__counters')
    },
    show: function(background){


    },
    hide: function(background){
      console.log(this.containers);
      $('.page-work__content__controls,.page-work__sliderwrap').slideUp();
      this.containers.h1.animateCss('fadeOutDown faster2x',function(){
        this.containers.h1.removeClass('animationEnd');
        this.containers.p.animateCss('fadeOutDown faster2x',function(){
          this.containers.p.removeClass('animationEnd');
          this.containers.counters.animateCss('fadeOutDown faster2x',function(){
            this.containers.counters.removeClass('animationEnd');
            $('.page-work__bgoverlay').css({'background-image':'url(' + background + ')'}).addClass('page-work__bgoverlay--visible');
          });
        });
      });

    }

  }
...

При срабатывании выводится ошибка:

Uncaught TypeError: Cannot read property 'h1' of undefined

в этой строке this.containers.h1.animateCss. Вывожу в консоли: console.log(this.containers);, выводится объект. все нормально, но почему тогда выводится ошибка?

Answer 1

[Владимир Проскурин]

Потому, что

this.containers.h1.animateCss('fadeOutDown faster2x',function(){ 
// тут теряется контекст this
        this.containers.h1.removeClass('animationEnd');
        this.containers.p.animateCss('fadeOutDown faster2x',function(){
          this.containers.p.removeClass('animationEnd');
          this.containers.counters.animateCss('fadeOutDown faster2x',function(){
            this.containers.counters.removeClass('animationEnd');
            $('.page-work__bgoverlay').css({'background-image':'url(' + background + ')'}).addClass('page-work__bgoverlay--visible');
          });
        });
      });

Чтобы исправить, используйте стрелочные функции, или там где у вас console.log напишите
var self = this;
и используйте self вместо this