javascript - 将参数传递给 matchmedia addListener 回调函数

Question

我正在构建一个插件，为了打开/关闭某些行为，我正在使用 matchMedia 函数。但是在回调函数中，我需要传递一个参数来保留对此的正确引用。但是，当我尝试将参数传递给我的回调函数时，它说我的整个 addListener 回调函数未定义。当我尝试将 this 绑定(bind)到回调函数时，这同样适用。

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)它的有效方法。要绑定(bind)它，您必须使用 bind函数(就像您在第一段代码中所做的那样)或自己提供类似的东西。

快速修复，替换:

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

与

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

当您尝试绑定(bind)“this”时，您不需要调用该函数。如果它不起作用，请粘贴更多代码(整个功能会很棒)。