jQuery，根据var范围的不同功能输出

Question

我想知道，为什么我面临两种不同的行为模式，取决于var范围？ 第一个做得很清楚，动态显示浏览器的窗口宽度：

$(window).resize(function() { 
     var $winWidth = $(window).width(); 
     $('#stop p').remove(); 
     $("#stop").prepend("<p>Actual window width: " + $winWidth + "</p>"); 
    }); 

第二和第三那些仅显示一个从哪个窗口已经初步调整固定大小：

var $winWidth = $(window).width(); 
$(window).resize(function() { 
    $('#stop p').remove(); 
    $("#stop").prepend("<p>Actual window width: " + $winWidth + "</p>"); 
}); 

第三个：

$(function(){ 
var $winWidth = $(window).width(); 
$(window).resize(function() { 
    $('#stop p').remove(); 
    $("#stop").prepend("<p>Actual window width: " + $winWidth + "</p>"); 
}); 
}); 

我期待所有的这案件相同的行为，摘取全球范围内VAR（第二）可以通过任何函数的使用n在文档和jQuery范围内（第三个）可以被任何内部函数使用

$(function(){ 
// Do something.... 
}); 

Answer 1

这与变量作用域无关。它与变量的值有关。在第二个和第三个示例中，当页面最初显示时，您只设置$winWidth变量一次。当它稍后调整大小时，将使用该旧值而不是当前值。

要使用调整大小时的宽度，必须在resize处理程序中设置变量的值。这个变量的范围无关紧要。也就是说，所有这些工作：

// 1. This works 
$(window).resize(function() { 
    var $winWidth = $(window).width(); 
    $('#stop p').remove(); 
    $("#stop").prepend("<p>Actual window width: " + $winWidth + "</p>"); 
}); 

// 2. So does this 
var $winWidth; 
$(window).resize(function() { 
    $winWidth = $(window).width(); 
    $('#stop p').remove(); 
    $("#stop").prepend("<p>Actual window width: " + $winWidth + "</p>"); 
}); 

// 3. So does this 
$(function(){ 
    var $winWidth; 
    $(window).resize(function() { 
     $winWidth = $(window).width(); 
     $('#stop p').remove(); 
     $("#stop").prepend("<p>Actual window width: " + $winWidth + "</p>"); 
    }); 
}); 

正如你所看到的，范围不是什么使它工作/不工作。这是当我们设置使其工作/不工作的值。

也就是说，你应该总是把变量作为的范围尽可能狭窄，，这将争论＃1。