使用“this"jQuery插件的内部命名函数

Using "this" inside named function on a jQuery plugin

本文关键字：内部 函数 插件 jQuery this quot 使用      更新时间：2023-09-26

我想写一个简单的jQuery插件，我需要一些代码来运行加载和窗口调整大小，所以我在插件内写了一个函数。

jQuery(文档)时函数($){

(function( $ ) {
    $.fn.responsiveNav = function() {
        function enable_responsive_nav() {
            if( this.hasClass('class') ) { 
              //do stuff
            }
        }
        $(window).resize(function(e) {
            enable_responsive_nav();
        });
        enable_responsive_nav();
        return this;
    };
}( jQuery ));
$('nav').responsiveNav();

问题是'this'似乎在函数内部没有被识别。我尝试将其作为函数参数传递:

enable_responsive_nav( this )

…但我在控制台上得到一个错误说hasClass()'is not a function'.

我想我可以在没有函数的情况下做到这一点，然后绑定插件外部的窗口调整大小事件，但我试图将其保持为单个调用，我确信我错过的是非常简单的。

一种常见的解决方案是在this具有期望值的作用域中创建一个名为that或self的局部变量，然后在内部函数的作用域中引用该局部变量:

(function( $ ) {
    $.fn.responsiveNav = function() {
        var self = this; // local variable
        function enable_responsive_nav() {
            if( self.hasClass('class') ) { // self is in scope
              //do stuff
            }
        }
        $(window).resize(function(e) {
            enable_responsive_nav();
        });
        enable_responsive_nav();
        return this;
    };
}( jQuery ));
$('nav').responsiveNav();

我尝试将其作为函数参数传递:

enable_responsive_nav( this )

让我们跟随这个链:

jQuery将调用您的事件回调与this引用DOM元素(不是jQuery对象)，该事件被挂钩。所以你可以这样做:

enable_responsive_nav( $(this) );
与

…

if( arg.hasClass('class') ) { 
    //do stuff
}

或

enable_responsive_nav.call(this);


if($(this).hasClass('class') ) { 
    //do stuff
}
相关文章：