matchmedia 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 */ 
} 

だから私も試してみましたその関数に2つ目のパラメータを追加して、そのように、この中で渡すことで、私のmediaQueryCheck関数にこのへの参照を渡す：

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

が、無駄に..任意のアイデアは？前もって感謝します！

Answer 1

まず、あなたが提供した2番目のコードは、これをバインドする有効な方法ではありません。これをバインドするには、bind関数を使用するか（最初のコードで行ったように）、あるいは独自のものを提供する必要があります。

クイック修正、置き換え：

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

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

であなたが "これを" バインドしようとすると、関数を呼び出す必要はありません。 それが動作しない場合は、あなたのコードの多くを貼り付けてください（全体の機能はすばらしいでしょう）。