Javascript 增加对变量范围和声明的理解

你好

我只是想知道，为什么包含在自调用匿名函数中的代码块不能在以下变量声明前加上var关键字，就像这样：

(function() {

    var content = [
        {
            title: 'My awesome blog post',   
            thumbnail: 'images/bane.jpg',
        },
        {
            title: 'My second awesome blog post',
            thumbnail: 'images/joker.jpg',
        },
    ],
        template = $.trim( $('#blogTemplate').html() ),
        frag = '';

    $.each( content, function( index, obj ) {  
        frag +=
            template.replace( /{{title}}/ig, obj.title )
                    .replace( /{{thumbnail}}/ig, obj.thumbnail );       
    });

    $('body').append(frag);

})();

将var关键字添加到此函数中的局部变量-

template

和

frag

似乎破坏了我的代码，我真的不明白为什么，但是，如果我在函数外部的全局范围内声明

template

和

frag

，如下所示，那么我的代码可以工作

    var template = $.trim( $('#blogTemplate').html() ),
    var frag = '';

---

如果这涉及范围，任何人都有时间解释，将不胜感激。理想情况下，我希望在

template

和

frag

前面加上var关键字以增加可读性。

我怀疑是变量声明之间的逗号破坏了代码，而不是使用

var

关键字本身。试试这个：

var template;
var frag;

在您提供的第一个代码段中，

var

关键字已经应用于template和frag，因为它们是以逗号分隔的局部变量声明列表中的第二项和第三项

var template = $.trim( $('#blogTemplate').html() ),
frag = '';

做到这一点最干净的方法是完全避免语法上的糖分，并将每个变量声明分隔成一个单独的语句：

function(){
    var x = 1, 
        y = 2, 
        z = 3;
    window.x; //undefined
    x; //1
    window.y;//undefined
    y; //2
}

---

您不需要在它们前面加上

var

：

var content = [
    {
        title: 'My awesome blog post',   
        thumbnail: 'images/bane.jpg',
    },
    {
        title: 'My second awesome blog post',
        thumbnail: 'images/joker.jpg',
    }
];
var template = $.trim($('#blogTemplate').html());
var frag = '';

已经相当于：

var a, b, c;

---

它们已经是本地变量，前面有

var

——请注意，逗号使所有变量成为声明和定义的单一列表，您似乎没有注意到这一点，因为它们被分成几行：

var a;
var b;
var c;

---

当然，在列表中添加更多的

var

是不好的语法。

是的，您应该用分号替换变量声明之间的所有逗号。是否在匿名函数之外使用模板/frag？只需要学习语法检查代码。在对象和数组中有尾随逗号（将在IE中中断），不能用逗号分隔2

var

，我不在匿名函数之外使用模板/frag

var content = [ /* multi-line array */ ], template = $.trim( $('#blogTemplate').html() ), frag = '';