javascript - 使用 $(this) 选择器时，类未添加到方法中

Question

有人可以解释一下这段代码为什么有效吗:

$('#FonykerUsernameRegister').blur(function(){
            if($(this).val().length > 2) {
                $.ajax({
                    url: '<?php echo $html->url('/fonykers/validate_username',true); ?>' + '/' + $(this).val(),
                    dataType: 'json',
                    type: 'POST',
                    success: function(response) {
                        if(!response.ok) {
                            $('#FonykerUsernameRegister').addClass('error');
                            error.html(response.msg);
                            error.fadeIn();
                        } else {
                            if($('#FonykerUsernameRegister').is('.error')) {
                                $('#FonykerUsernameRegister').removeClass('error');
                            }
                            $('#FonykerUsernameRegister').addClass('ok');
                        }
                    },
                    error:function (xhr, ajaxOptions, thrownError){
                        alert(xhr.statusText);
                        alert(thrownError);
                    } 
                });        
            } else {
               error.html('Username must have at least 3 characters');
               error.fadeIn();
               $('#FonykerUsernameRegister').addClass('error');
            }
        });

与此相反:

$('#FonykerUsernameRegister').blur(function(){
            if($(this).val().length > 2) {
                $.ajax({
                    url: '<?php echo $html->url('/fonykers/validate_username',true); ?>' + '/' + $(this).val(),
                    dataType: 'json',
                    type: 'POST',
                    success: function(response) {
                        if(!response.ok) {
                            $(this).addClass('error');
                            error.html(response.msg);
                            error.fadeIn();
                        } else {
                            if($(this).is('.error')) {
                                $(this).removeClass('error');
                            }
                            $(this).addClass('ok');
                        }
                    },
                    error:function (xhr, ajaxOptions, thrownError){
                        alert(xhr.statusText);
                        alert(thrownError);
                    } 
                });        
            } else {
               error.html('Username must have at least 3 characters');
               error.fadeIn();
               $(this).addClass('error');
            }
        });

我假设第二个更加优化，所以如果可能的话我宁愿使用这种方式，但它只是没有在元素上设置类。

Answer 1

第一个代码(工作代码)通过 id 引用元素:jQuery $ 函数基本上是 document.getElementById 的替代品。

在第二个代码中，当您尝试使用 this 引用元素时，范围是 this 可能引用请求对象或 window 。如果您想在所需范围内使用 this 对象，解决方案是使用 proxy 方法绑定(bind)处理函数，或者将目标元素作为在闭包中使用的变量。

在这两种方法中，使用代理是最不可能导致循环引用的。你在这里给出的代码是安全的，但是当你在闭包中使用元素引用时，如果目标元素会在某个时刻从 DOM 中删除，你真的必须小心——然后你可能会遇到浏览器垃圾收集器的情况无法释放与该元素相关的资源，因为闭包保持打开的引用指针。

所有proxy所做的就是创建一个具有指定范围的闭包，请参阅文档here .

有关范围的进一步阅读，请查看 this MDC document还有这个MDC scope "cheat sheet"

关闭:

$('#FonykerUsernameRegister').blur(function(){
    var target = $(this);
    if($(this).val().length > 2) {
        $.ajax({
            url: '<?php echo $html->url('/fonykers/validate_username',true); ?>' + '/' + $(this).val(),
            dataType: 'json',
            type: 'POST',
            success: function(response) {
                if(!response.ok) {
                    target.addClass('error');
                    error.html(response.msg);
                    error.fadeIn();
                } else {
                    if(target.is('.error')) {
                        target.removeClass('error');
                    }
                    target.addClass('ok');
                }
            },
            error:function (xhr, ajaxOptions, thrownError){
                alert(xhr.statusText);
                alert(thrownError);
                alert(target);
            } 
        });        
    } else {
       error.html('Username must have at least 3 characters');
       error.fadeIn();
       $(this).addClass('error');
    }
});

代理

$('#FonykerUsernameRegister').blur(function(){
    if($(this).val().length > 2) {
        $.ajax({
            url: '<?php echo $html->url('/fonykers/validate_username',true); ?>' + '/' + $(this).val(),
            dataType: 'json',
            type: 'POST',
            success: $.proxy(function(response) {
                if(!response.ok) {
                    $(this).addClass('error');
                    error.html(response.msg);
                    error.fadeIn();
                } else {
                    if($(this).is('.error')) {
                        this.removeClass('error');
                    }
                    $(this).addClass('ok');
                }
            }, this),
            error:$.proxy(function (xhr, ajaxOptions, thrownError){
                alert(xhr.statusText);
                alert(thrownError);
                alert(this);
            }, this) 
        });        
    } else {
       error.html('Username must have at least 3 characters');
       error.fadeIn();
       $(this).addClass('error');
    }
});