Closure ng JavaScript

JavaScript 变量属于localorGlobalscope.

Global variables can be accessed through闭包Implement local (private).

Global variables

Functions can access functionsInternalDefined all variables, such as:

实例

function myFunction() {
    var a = 4;
    return a * a;
}

亲自试一试

But functions can also access functionsExternalDefined variables, such as:

实例

var a = 4;
function myFunction() {
    return a * a;
}

亲自试一试

In the last example,a isGlobalVariables.

In a web page, global variables belong to the window object.

Global variables can be used and modified by all scripts on the page (and in the window).

In the first example,a isLocalVariables.

Local variables can only be used within the function they are defined in. They are invisible to other functions and script code.

global variables and local variables with the same name are different variables. Modifying one will not change the other.

not throughkeyword var Variables created are always global, even if they are created in a function.

Variable lifecycle

Global variables live as long as your application (window, web page).

Local variables don't live long. They are created when a function is called and deleted when the function is completed.

A counter's dilemma

Suppose you want to use a variable to count, and you want this counter to be available to all functions.

You can use global variables and functions to increment the counter:

实例

// Initialize the counter
var counter = 0;
// Function to increment the counter
function add() {
  counter += 1;
}
// Call add() three times
add();
add();
add();
// At this point, the counter should be 3

亲自试一试

The above solution has a problem: any code on the page can change the counter without calling add().

For the add() function, the counter should be local to prevent other code from changing it:

实例

// Initialize the counter
var counter = 0;
// Function to increment the counter
function add() {
  var counter = 0; 
  counter += 1;
}
// Call add() three times
add();
add();
add();
// At this point, the counter should be 3. But it is 0.

亲自试一试

It's not useful because we display the global counter instead of the local counter.

By making the function return it, we can remove the global counter and access the local counter:

实例

// Function to increment the counter
function add() {
  var counter = 0; 
  counter += 1;
  return counter;
}
// Call add() three times
add();
add();
add();
// At this point, the counter should be 3. But it is 1.

亲自试一试

It's not useful because we reset the local counter every time we call a function.

JavaScript internal functions can solve this problem.

JavaScript nested functions

All functions have the right to access the global scope.

In fact, in JavaScript, all functions have the right to access their 'upper' scope.

JavaScript supports nested functions. Nested functions can access their upper scope.

In this example, the internal function plus() can access the parent function's counter Counter variable：

实例

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

亲自试一试

这样即可解决计数器困境，如果我们能够从外面访问 plus() 函数。

我们还需要找到只执行一次 counter = 0 的方法。

我们需要闭包（closure）。

Closure ng JavaScript

记得自调用函数吗？这种函数会做什么呢？

实例

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
add();
add();
add();
// 计数器目前是 3

亲自试一试

例子解释

变量 add 的赋值是自调用函数的返回值。

这个自调用函数只运行一次。它设置计数器为零（0），并返回函数表达式。

这样 add 成为了函数。最“精彩的”部分是它能够访问父作用域中的计数器。

这被称为 JavaScript 闭包。它使函数拥有“私有”变量成为可能。

计数器被这个匿名函数的作用域保护，并且只能使用 add 函数来修改。

闭包指的是有权访问父作用域的函数，即使在父函数关闭之后。