声明空javascript变量的最佳实践

Best practice for declaring empty javascript variables

本文关键字：最佳 变量 javascript 声明      更新时间：2023-09-26

在给变量赋值之前，在javascript中声明变量是否有最佳实践?有时由于范围的原因是必要的，但如果范围无关紧要呢?

// Declare first
(function() {
    var foo = 'bar',
        a = 500,
        b = 300,
        c;
    // Some things get done here with a and b before c can use them...
    c = a * b;    
    // c is now ready to use...
    doSomething(c);
}());
// Declare when needed
(function() {
    var foo = 'bar',
        a = 500,
        b = 300;
    // Some things get done here with a and b before c can use them...
    var c = a * b; 
    // c is now ready to use...
    doSomething(c);
}());

我也想知道对于类似于对象字面量的东西，什么是最佳实践:

// Add property with null assigned to it
var myObj = {
    foo: null,
    doSomething: function() {
        this.foo = 'bar';
    }
};
// Property gets added when value is set
var myObj = {
    doSomething: function() {
        this.foo = 'bar';
    }
};

这主要是风格问题。

由于var声明被自动提升到作用域的顶部，因此将它们放在作用域的顶部是有意义的，这样您可以更接近解释器将如何执行它来阅读代码。

在变量作用域的顶部声明变量是Crockford的建议。它确实有意义，因为它澄清了一些常见的误解。

例如:

for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i);
    }, 0);
}

由于var具有函数作用域，所有迭代(以及其中的函数)都指向同一个i。由于所有三个定时函数都将在循环结束后执行，因此上面的代码片段记录3三次。

对于那些有块作用域经验的人来说，上面的行为不是很清楚。重写代码片段:

var i;
for (i = 0; i < 3; i++) {
    // ...
}

现在，在全局作用域中声明i，与前面的代码片段完全相同。然而，这一条在这一点上要清楚得多。

另一个误解:

(function() {
    if (true) {
        var foo = 1;
    } else {
        var foo = 1;
    }
}());

同样，在块作用域语言¹中，以上是完全有效的。但是，由于var声明在解析时被提升到当前函数作用域的顶部，因此上面的内容相当于:

(function() {
    var foo;
    var foo;
    if (true) {
        foo = 1;
    } else {
        foo = 1;
    }
}());

变量声明两次。大多数浏览器会忽略第二个声明，代码会"正常工作"，但是静态代码分析工具，如JSHint会对你大喊大叫。

你可以用一个声明重写它，它是完全有效的:

(function() {
    if (true) {
        var foo = 1;
    } else {
        foo = 1;
    }
}());

但是像我这样有强迫症的程序员会觉得它很丑。同样，在作用域的顶部声明:

(function() {
    var foo;
    if (true) {
        foo = 1;
    } else {
        foo = 1;
    }
}());

看起来整洁多了。

再次强调，这主要是风格问题。就我个人而言，如果我有一个巨大的函数，我讨厌一直向上滚动，只是为了检查变量是否已经声明并将其添加到列表中。在这种情况下，我可能只是在函数中间添加几个var声明(反对Crockford的建议)，我个人认为这更容易阅读和维护。

因为这是一个风格问题，所以请确保您的代码尽可能保持最易维护和简洁。

在硬币的另一边，我个人承认，当变量第一次使用时，我已经开始并且主要使用var声明。这是语言的一个方面，你可以毫无问题地这样使用它。

但是我也承认，如果我从一开始就遵循Crockford的建议，我就不会那么头疼了(就像上面所示的误解一样)，也会更快地掌握JavaScript的函数作用域方面。

¹注意JS 1.7通过let引入了块作用域变量，但它还没有被广泛支持。

相关文章：