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));

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

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

1 个答案: