访问函数范围之外的变量但不使其成为全局变量 (window.hazaa)？

Question

我有一个元素列表，对每个元素执行一个函数。所述函数产生小计，我希望将其添加到总计中。由于我希望尽可能不滥用 window，因此我在脚本中的变量声明就在列表声明之前。

var total = 0;
$.each($("input[flag]:checked"), function(index, value){
  var sub =+ value.attributes["blipp"].value;
  total += sub; // this is window.total not my total!
});

我确实记得 JavaScript 中的范围界定不是很好的设计，所以我预计会发生一些不希望发生的事情。所以我是对的。问题是是否有可能以某种方式包含变量并仍然保持它可以从各个函数调用中访问。

Answer 1

有很多方法可以做到这一点，但一个常见的方法是将所有这些都包装在另一个函数中：

function total(){
    var total = 0;
    $.each($("input[flag]:checked"), function(index, value){
    var sub =+ value.attributes["blipp"].value;
    total += sub; 
    });        
    return total;  
}

Answer 2

您可以创建一个带有 IIFE, Immediately Invoked Function Expression 的范围，正因为如此，然后执行：

(function(){
    var total = 0;
    $.each($("input[flag]:checked"), function(index, value){
      total += value.attributes["blipp"].value;
    });
    // do something with total here...
})();

这样就会在 self-consumes 本身的作用域中创建一个变量。

您还可以使用原生 JavaScript 和普通函数来创建新范围（尽管我不需要新变量）：

function getTotal(sel) {
    var els = [].slice.call(document.querySelectorAll(sel));
    return els.reduce(function(total, input) {
        var val = input.checked ? parseInt(input.value, 10) : 0;
        return total + val;
    }, 0);
}
console.log(getTotal('input[flag]')); // 45

访问函数范围之外的变量但不使其成为全局变量 (window.hazaa)？

Accessing variable outside a function's scope but not making it global (window.hazaa)?

javascript

arrays

jquery

scope

window

jsFiddle: https://jsfiddle.net/2s64cjrp/