JavaScript must Know (ix) function to talk about closure problem _javascript skills

function

function format

function Getprototynames (o,/*optional*/a)
{
a = a | | [];
For (var p in O)
{
a.push (p);
}
return A;

Caller

Func.caller return function caller

function Callfunc ()
{
if (Callfunc.caller)
{
alert (callfunc.caller.toString ());
} else
{
alert ("No function call");
}
function Handlecaller ()
{
callfunc ();
}
Handlecaller ()//return handler

Callee

anonymous method Recursive call

Alert ((function (x) {
if (x <=) return;
return x * Arguments.callee (x-);

Scope

Scope Everyone is not unfamiliar, today to say closure problem, profound understanding closure problem.

<script>
var global = "global scope";//This is the global scope function
scope ()
{
var scope = "local scope";/ This is the local scope
return scope;//Returns the scope, is the local variable
}

　1.: A defined global variable can also be accessed within a function . When the defined local variable and the global variable name are the same, the local variable hides the global variable and does not break the value of the global variable.

var scope = "global scope";
function f ()
{
var scope = ' local scope ';
return scope;
}
Alert (f ());//local scope

It's really easy to understand, right.

2, global variables can not be declared with Var , but local variables must use the Var declaration, if the local variable does not use the Var declaration, the compiler will default this is a global variable.

<span style= "Line-height:.; Font-family:verdana, Arial, Helvetica, Sans-serif; FONT-SIZE:PX; Background-color:rgb (,,); " > </span> 
scope = "global scope";
function f ()
{
scope = ' local scope ';
return scope;
}
Alert (f ());//local Scope
alert (scope);//local scope

However, global variables do not use the Var declaration, but only the non strict mode, if the use of strict mode, will report errors

<script>
"Use strict";
Scope = "global scope";
function f ()
{
scope = ' local scope ';
return scope;
}
Alert (f ());//local Scope
alert (scope);//local Scope
</script>

Therefore, we suggest that when you declare variables, do not omit the Var, you can avoid unnecessary trouble.

3, the declaration of advance, but also can drop . What is called advance.

<script>
"Use strict";
scope;
Console.log (scope);
var scope = "global scope";
Console.log (scope);

This may be seen the first print undefined, yes ah has not given him a value, the following assignment can be set to print global scope.

There is nothing wrong with this understanding, but why is it that a variable should be defined before it can be used?

Here's a scope chain, JavaScript is a language based on lexical scopes.

1. The scope chain is an object or list that defines the variable in the scope of this code. When JavaScript needs to find a variable scope, it develops a lookup from the first object in the chain, and if the first object is scope, the value of that object is returned directly, if no continuation of the second object is found until it finds. If the variable is not found on the scope chain, an error is thrown.

We can say this chain of action: Looking Up Scope->window (Global object) is clearly defined as a scope behind. But the assignment operation is not done, and the value is undefined.

4, this comparison has the confusion, everybody guess under Print the value is what?

<script>
"Use strict";
var scope = "global scope";
function f () {
console.log (scope);
var scope = "local scope";
Console.log (scope);
f ();
</script>

See this code: If you are careless, you will probably write the wrong answer:

1. Gobal Scope

2. Local scope

Analysis: Declares a global variable, in the function body, the first represents the global variable, so print global, the second defines the local variables, overwriting the global scope, so print the regional scope.

Such analysis is in C # java, completely correct. But here the analysis is really wrong.

This explains the problem before we look at a problem.

This statement is important: Global variables are always defined in the program. A local variable is always defined within the function body in which it is declared and its nested functions.

If you are engaged in high-level language work beginning to touch JavaScript is somewhat inappropriate for its scope definition. That's the way I am. Let's take a look at an example:

<script>
var g = "global scope";
function f ()
{for
(var i=;i<;i++)
{for
(var j=;j<;j++)
{
;
}
Console.log (j);
}
Console.log (i);
}
Console.log (g);
f ();
</script>

What is the result of printing?

You see {} represents statement block, statement block in a scope, so you may guess, J, I value has been released in memory, so the result must be undefined.

The real results may disappoint you,

Why is this so, I began to look like you.

Then look at the words I let you remember ... Global variables are always defined in the program. A local variable is always defined within the function body in which it is declared and its nested functions.

It is true that the parameters of the function belong to the category of local variables. That's a very important remark,!!!.

That sentence probably means that as long as the variables defined within the function are valid within the entire function. So the result is not difficult to understand. Do you understand the question that we are looking back on?

The chain of action also has the following definition:

1. The chain of action is composed of a global object.

2, in the body does not contain nested functions, the chain of action has two objects, the first defines the function parameters and local variables of the object, the second is a global object.

3, in a nested function body, the chain of action contains at least three objects.

When a function is set, a scope chain is saved.

When this function is called, it creates a new object to store its local variables and adds the object to the saved chain of action. At the same time, create a new, longer action chain that represents the function call.

For nested functions, when an external function is called, the internal function is redefined again. Because each time the external function is invoked, the chain of action is different. Intrinsic functions are subtly different each time they are defined, and each time an external function is invoked, the code for the internal function is the same and the scope of the associated code is different.

Closed Bag

It's been a long time, but we're going to analyze the scope.

<script>
var nameg= "global"
var g = function f () {
console.log (name);
function Demo ()
{
console.log ("demo=" +name);
}
var name = "";
Function Demo () {
var name = "";
Console.log ("demo=" + name);
}
Function Demo () {
console.log ("demo=" + Nameg);
}
Demo ();
Demo ();
Demo ();
};
g ();
</script>

We analyze it according to the chain of action:

Call Demo0, Demo0 ()-> find name,->f () lookup is not found, return

Call Demo1,demo1 ()-> find name, find, return

Call Demo2,demo2 ()-> find Nameg,->f () lookup nameg not found,->window lookup nameg found, returned.

Look at this example:

<script>
function f ()
{
var count =;
return {counter:function () {return
count++.
},reset:
function ()
{return
count =;
}
}
}
var d = f ();
var C = f ();
Console.log ("D First Call:" + d.counter ());//
Console.log ("C First Call:" + c.counter ());//do not affect
Console.log ("D First Call: "+ D.reset ());//
Console.log (" C Second call "+ C.counter ());
</script>

As you can see in this example, I did a count and zero operation.

Created two F object instance D C, each with its own scope chain, so its values do not affect each other. When C was called the second time, the count value was saved because the C object was not destroyed. Having understood this example, the following examples are more understood.

This process, we should be very clear. So now let's look at the closure problem. I set four buttons and click on each button to return the name of the response.

<body>
<script>
function btninit ()
{for
(var i=;i<;i++)
{
var btn = document.getElementById ("btn" + i);
Btn.addeventlistener ("click", Function () {
alert ("btn" + i);}
);
}
window.onload= Btninit;
</script>
<div>
<button id= "btn" >Btn</button>
<button id= "BTN" >btn </button>
<button id= "btn" >Btn</button>
<button id= "BTN" >Btn</button>
</div>
</body>

Click to run, but the result is all btn5;

We sat down with the analysis just now, first to invoke the anonymous function-> find I, not find->btninit (), find I in the For loop. Found it. We know that only the end of the function call is released, and I in the for is always visible, so the last I value is preserved. So how to solve it.

To solve the I value is not always visible in the function, then we need to use the nesting of the function, and then pass the I value in.

function Btninit ()
{for
(var i=;i<;i++)
{
(function (data_i) {
var btn = document.getElementById ("btn" + data_i);
Btn.addeventlistener ("click", Function () {
alert ("BTN" + data_i);
}
(i));
}

Looking at the modified code, first executes the first for, creates an object, we first execute the anonymous function->data_i, not find the->function (data_i), and then execute the for once again to create an object that the closure rules say are not mutually affected. So we can get the right results.

The above is a small set to introduce the JavaScript will be known will be (nine) function to talk about the closure of the relevant knowledge, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!