功能範圍變量不可寫

Question

function add() { 
    var counter = 0; 
    counter += 1; 
    return counter 
} 

爲什麼第一次迭代後計數器變量不會增加？輸出始終爲1。

Answer 1

add函數返回在函數add內定義的變量counter。變量counter的範圍對於函數是局部的，這意味着每次調用該函數時，都會創建一個新變量counter，然後初始化爲零，然後遞增計數器。

如果您正在尋找計數器實現，則每次都需要引用相同的counter變量並增加該變量。這可以通過使用閉包來實現。

示例：在下面的示例中，有2個函數，1個嵌套在另一個函數內。內部函數保持對外部函數Environment的引用，在這種情況下包含變量counter。所以，即使在控件移出函數add之後，內部函數仍然保持對變量counter的引用。

var add = (function(){ 
 
    var counter = 0; 
 
    return function(){ 
 
    return ++counter; 
 
    } 
 
})(); 
 

 
document 
 
    .querySelector('#btn') 
 
    .addEventListener('click', function(){ 
 
    document.querySelector('#output').textContent = add(); 
 
    });

<div id="output">0</div> 
 
<button id="btn">Increment</button>

Answer 2

可以使計數器一個全局變量，然後調用add函數：

function add(){ 
    counter = counter + 1; 
} 

Answer 3

這是一個範圍的問題。將其更改爲

let counter = 0; 
function add() { 
    counter += 1; 
    return counter 
} 

或者，如果你希望能夠做加（），使用嵌套函數

function adder() { 
    let counter = 0; 
    return function plus() { 
    return counter += 1; 
    }; 
} 
let add = adder(); 
console.log(add()); 
console.log(add()); 
console.log(add());