передать аргумент функции matchback addListener

Question

Я создаю плагин и для включения/отключения определенного поведения, я использую функции matchMedia. Однако в функции обратного вызова мне нужно передать аргумент, чтобы сохранить правильную ссылку на это. Однако, когда я пытаюсь передать аргумент моей функции обратного вызова, он говорит, что моя полная функция обратного вызова addListener не определена. То же самое происходит, когда я пытаюсь привязать это к функции обратного вызова.

TypeError: this.mediaQueryCheck(...) is undefined 

Там должно быть что-то действительно очевидно, что я пропускаю о AddListener, так что сейчас я только в том числе нефункциональные пример моего кода:

 MyPlugin.prototype = { 
     version : '0.0.1', 
     mediaQuery : window.matchMedia(defaults.breakpoint), 

     mediaQueryCheck : function(mql){ 

      if(mql.matches === true){ // if our mediaQuery matches 
       this.evalScrollPosition(); 
       if(this.isLaunched === false){ 
        // attach scroll handlers 

        $(window).on('scroll resize', this.evalScrollPosition.bind(this)); 
        this.isLaunched = true; 
       } 
      } 
      else if(mql.matches === false){ // if the mediaQuery isn't active atm 
       if(this.isLaunched === true){ 
       // remove handlers 
       $(window).off('scroll resize', this.evalScrollPosition.bind(this)); 
        this.isLaunched = false; 
       } 
       this.fixedStatus = ''; 
       this.unstyleContainer(); // remove positioning set by plugin 
       this.unstyleColumns(); // remove positioning set by plugin 
      } 

     }, 

     init: function(){ 

      // merge user options with defaults 
      this.config = $.extend({}, defaults, this.options, this.metadata); 
      // define mql object 

      this.mediaQuery = window.matchMedia(this.config.breakpoint); 

      var thatMediaQuery = this.mediaQuery; 
      // add listener to conditionally toggle scroll and resize listeners and bind this to not lose reference to this when running the mediaQueryCheck function 

      this.mediaQuery.addListener(this.mediaQueryCheck(thatMediaQuery).bind(this)); 

      // check mediaQuery to determine whether to apply eventListeners 

      // and run for a first time 
      this.mediaQueryCheck(thatMediaQuery); 


      return this; 
     }, 
/* .. rest omitted for brevity */ 
} 

Так я тоже пытался передавая ссылку на это мою функцию mediaQueryCheck путем добавления второго параметра для этой функции, а затем переходя в этом так:

mediaQueryCheck : function(mql, context){ 
    // '..' 
}, 
init: function(){ 
    // 'rest omitted for brevity' 
    this.mediaQuery.addListener(this.mediaQueryCheck(thatMediaQuery, this)); 
}, 

, но безрезультатно .. любые идеи? заранее спасибо!

Answer 1

Прежде всего - второй код, который вы предоставили, не является допустимым способом привязки этого кода. Чтобы связать это, вы должны использовать либо функцию bind (как и в первой части кода), либо предоставить что-то подобное самостоятельно.

Быстрое решение заменить:

this.mediaQuery.addListener(this.mediaQueryCheck(thatMediaQuery).bind(this)); 

с

this.mediaQuery.addListener(this.mediaQueryCheck.bind(this)); 

Вам не нужно, чтобы вызвать эту функцию при попытке привязать "это". Если это не сработает, добавьте больше своего кода (вся функция будет потрясающей).