当您编写复杂的 jQuery/javascript 时，如何在不重新定义之前定义的 this 变量的情况下使用 this？在命名您的 this 变量(随着嵌套越来越深)时，您是否有经验法则或个人偏好？

有时我希望更高范围的变量可用于嵌套函数/回调，但有时我希望有一个干净的平板/范围；有没有一种不用担心变量冲突而调用函数/回调的好方法？如果是，您使用什么技术？

一些 super 愚蠢的测试代码:

$(document).ready(function() {

    console.warn('start');

    var $this = $(this),

    $dog = $('#dog'),

    billy = function() {

        console.log('BILLY!', 'THIS:', $this, ' | ', 'DOG:', $dog);

        var $this = $(this);

        console.log('BILLY!', 'THIS:', $this, ' | ', 'DOG:', $dog);

    };

             // (#1)
    billy(); // BILLY! THIS: undefined | DOG: jQuery(p#dog)
             // BILLY! THIS: jQuery(Window /demos/this/) | DOG: jQuery(p#dog)

    console.log('THIS:', $this, ' | ', 'DOG:', $dog); // THIS: jQuery(Document /demos/this/) | DOG: jQuery(p#dog)

             // (#2)
    billy(); // BILLY! THIS: undefined | DOG: jQuery(p#dog)
             // BILLY! THIS:  jQuery(Window /demos/this/) | DOG: jQuery(p#dog)

    $('#foo').slideUp(function() {

                                                          // (#3)
        console.log('THIS:', $this, ' | ', 'DOG:', $dog); // BILLY! THIS: undefined | DOG: jQuery(p#dog)

        var $this = $(this); // (#10)

                                                          // (#4)
        console.log('THIS:', $this, ' | ', 'DOG:', $dog); // BILLY! THIS: jQuery(Window /demos/this/) | DOG: jQuery(p#dog)

    });

    $('#clickme').click(function() {

                                                          // (#5)
        console.log('THIS:', $this, ' | ', 'DOG:', $dog); // THIS: undefined | DOG: jQuery(p#dog)

        var $this = $(this);

                                                          // (#6)
        console.log('THIS:', $this, ' | ', 'DOG:', $dog); // THIS: jQuery(button#clickme) | DOG: jQuery(p#dog)

        $('#what').animate({
            opacity : 0.25,
            left    : '+=50',
            height  : 'toggle'
        }, 500, function() {

                                                              // (#7)
            console.log('THIS:', $this, ' | ', 'DOG:', $dog); // THIS: undefined | DOG: jQuery(p#dog)

            var $this = $(this);

                                                              // (#8)
            console.log('THIS:', $this, ' | ', 'DOG:', $dog); // THIS: jQuery(div#what) | DOG: jQuery(p#dog)

        });

    });

             // (#9)
    billy(); // THIS: undefined | DOG: jQuery(p#dog)
             // THIS: jQuery(div#foo) | DOG: jQuery(p#dog)

    console.warn('finish');

});

A full demo page can be found here (jsbin.com) .

注意:如您所见，我用数字 (#XX)“标记”了评论以便于引用。

观察 1:

标记(#1)

BILLY! THIS: undefined | DOG: jQuery(p#dog)

反问:为什么$this是未定义的，但是$dog是可访问的？

回答:因为那个范围内的var正在重新定义$this；只是我试图在 $this 在该范围内定义之前记录它。

如果我注释掉 var $this = $(this);，则 ma​​rker (#1) 返回:

BILLY! THIS: jQuery(Document index2.html) | DOG: jQuery(p#dog)
BILLY! THIS: jQuery(Document index2.html) | DOG: jQuery(p#dog)

同样的逻辑适用于标记 (#2)、(#3)、(#4)、(#5)、(#6)、(#7) 和 (#8) .

基于这个观察(如果我在这里错了请纠正我)我假设我可以把 var $this = $(this); 放在函数的底部，并且当前范围会知道我想使用当前范围的 $this(即使它还没有定义)，而不是父级的 $this(即使它 < strong="">IS 定义)。

避免$this冲突的可能解决方案:

如果想在其他闭包/函数/回调之外/之内缓存 $(this) 并避免冲突，那么应该使用不同的变量标签，例如这些(例如):

var $$ = $(this);
var $this2 = $(this);
var $t = $(this);
var $that = $(this);

问题:

上面的解决方案是如何避免 $this 冲突的？如果不是，您最喜欢的技术是什么？

观察 2:

标记(#9)

THIS: undefined | DOG: jQuery(p#dog)

... $this 由于上述原因未定义，但是:

THIS: jQuery(div#foo) | DOG: jQuery(p#dog)

... $this 现在是 $('#foo')!

问题(S):

究竟为什么会这样？

是不是因为$this被ma​​rker (#10)重新定义了？

(嗯，我觉得我需要用 Google 搜索“javascript 中的垃圾收集”。)

同样，在编写复杂的 jquery/javascript 时，避免此类变量冲突的最佳方法是什么？

我希望这些不是可怕的问题。预先感谢您抽出时间帮助我。 :)

最佳答案

您实际上遇到了变量提升问题:

billy = function() {

    console.log('BILLY!', 'THIS:', $this, ' | ', 'DOG:', $dog);

    var $this = $(this);

    console.log('BILLY!', 'THIS:', $this, ' | ', 'DOG:', $dog);

};

实际上在运行时是这样解释的:

billy = function() {

    var $this;

    console.log('BILLY!', 'THIS:', $this, ' | ', 'DOG:', $dog); // $this hasn't been set to anything yet...

    $this = $(this);

    console.log('BILLY!', 'THIS:', $this, ' | ', 'DOG:', $dog);

};

JavaScript 将变量和函数声明提升到范围 block 的顶部，以便您可以在手动声明它们之前引用它们。当人们从范围 block 的外部引用同名变量时，这会给人们带来麻烦，正如您在示例中清楚地看到的那样。

关于javascript - jQuery 和 "this"管理？如何避免变量冲突？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14884342/