An example of the closure in the JavaScript language essence book

117 4

The following text is part of the javascript: A closed section of the good parts,, read the chinese version of translation, or not understand what this text says. I hope you can help me with your own understanding of sf 's friends:

  • Why the first paragraph code doesn't achieve the goal, not the internal variable can read the function external variables? Read the correct label, so how do you play the number of nodes. How the number of nodes gets captured.
  • Why the second paragraph code can fix the error of the first code, and add an anonymous function to what it does.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = equals = = = = = = =
A it's important to co tant that the inner function has access to the actual variable of not copies

Code view:

//BAD EXAMPLE
//Make a function that assigns event handler functions to an array of nodes the wrong way.
//When you click on a node, an alert box is supposed to display the ordinal of the node.
//But it always displays the number of nodes instead.
var add_the_handlers = function (nodes) {
 var i;
 for (i = 0; i <nodes.length; i += 1) {
 nodes[i].onclick = function (e) {
 alert(i);
 }
 }
};
//END BAD EXAMPLE
The the add_the_handlers function was intended to give each handler a unique number ( I ). It fails because the handler function handler.

Code view:

//BETTER EXAMPLE
//Make a function that assigns event handler functions to an array of nodes the right way.
//When you click on a node, an alert box will display the ordinal of the node.
var add_the_handlers = function (nodes) {
 var i;
 for (i = 0; i <nodes.length; i += 1) {
 nodes[i].onclick = function (i) {
 return function (e) {
 alert(i);
 };
 }(i);
 }
};
Now, instead of assigning a function to onclick, we define a function and immediately invoke it, passing in I. That function will, a function.
5 Answers

125 0

You need to understand the scope of the variable in js, and a basic problem with closure is also variable scope!

1. Direct var i = 1; under global is a global variable, which can be visible in the entire window range.
2. var c = 1; inside the closure is visible only inside the closure.
3. Note where you can, if you don't have var when you declare a variable, it's a global variable.
4. That's the answer to your question, and the closure lets the values of these variables stay in memory. Here's an example:

function funcOut(){
 var n=1;
//注意: 没加 var, 全局可以访问
 funcAdd=function(){
 n+=1; 
 }
 function funcIn(){
 alert(n);
 }
 return funcIn;
 }
 var result=funcOut();
 result();//1
 funcAdd();//始终保持在内存中哦。
 result();//2
 funcAdd();//始终保持在内存中哦。
 result();//3

By the way, it's allowed in the following writing js, which isn't bad for global variables. When you're developing, you should avoid global variables, involving design patterns, and some best practices for google:

undefined = true;

Write down the following two pieces of code to make a test.html page.

看下这个很有名气的循环问题
function addLinks () {
 for (var i=0, link; i<5; i++) {
 link = document.createElement("a");
 link.innerHTML ="Link" + i +"<br>";
 link.onclick = function () {
 alert(i);//都为 5 
 };
 document.body.appendChild(link);
 }
}
window.onload = addLinks;
//这样写的话就可以解决问题了
function addLinks () {
 for (var i=0, link; i<5; i++) {
 link = document.createElement("a");
 link.innerHTML ="Link" + i +"<br>";
 link.onclick = function (num) {
 return function () {
 alert(num);//num 保存着这一块的值, 在内存里面
 };
 }(i);//注意这里的"();" 是函数直接就执行了, 然后把 i 作为参数进去
 document.body.appendChild(link);
 }
}
window.onload = addLinks;
148 3

My understanding is that:

Code 1
---

nodes[i].onclick = function (e) {
 alert(i);
}

Here alert accepts variable I, which has become nodes after the end of the loop. Length -1, so no matter what node you click, the execution is alert ( node. Length -1 ).

Code 2
---

nodes[i].onclick = function (i) {
 return function (e) {
 alert(i);
 };
}(i);

Passing the closure is the current variable I + = 1, so alert ( I ) is right.

138 1

Unde & tand the ( ) parentheses operator, see http://dancewithnet. com/2008/05/07/ja..

143 0
nodes[i].onclick = function (e) {
 alert(i);
 }

I just saw this example from the book, not to understand. Here's a search.

I think it wouldn't be better to understand that the function ( e ) % 7b is considered a local object at each execution time, and the object is redefined until the last time.

In the correct code, function ( e ) % 7b ( I ) is equivalent to binding events to object ( I ); objects on objects. It'll not be covered.

But this error is really easy to be ignored, and it gets out of the pit.

114 1
...