add more example for closure

ryangcode · ryangcode · commit cfe392f55253 · 2017-07-21T14:07:22.000+10:00
diff --git a/README.md b/README.md
@@ -101,11 +101,13 @@ console.log(sayHelloTo2.apply(person));
 ## Hidden paramers
   - arguments
   - this
+
 ```javascript
 var myAdd = function(a, b, c) {
   console.log(arguments);
 }
 ```
+
 ## Declare variables: Let vs Var
   - let is block scoped
   - var is function scoped
@@ -135,6 +137,10 @@ var person = function (name) {
   };
 }('Hellen');
 ```
+
+```javascript
+document.getElementsByClassName('test-node').each
+```
 # Inheritance
 ## Goal of inheritance
   - reuse
@@ -212,5 +218,3 @@ var myCat = cat({name: 'Henrietta'});
 myCat.purr(2);
 myCat.get_name();
 ```
-
-
diff --git a/index.html b/index.html
@@ -5,6 +5,10 @@
   <body>
     <div id="main">
       <div id="result" style="top:150px;left:30%;position:relative"></div>
+      <div id="event-example" >
+        <div class="node">node1</div>
+        <div class="node">node2</div>
+      </div>
     </div>
     <script src="./sample-code.js" type="text/javascript"></script>
   </body>
diff --git a/sample-code.js b/sample-code.js
@@ -56,3 +56,39 @@ console.log(sayHelloTo2.apply(person));
 var myAdd = function(a, b, c) {
   console.log(arguments);
 }
+
+
+// closure
+// register event handler
+
+// let nodes = document.getElementsByClassName('node');
+// let count = nodes.length;
+
+// using let, good
+// for (let i = 0; i < count; i++) {
+//   nodes[i].onclick = function (e) {alert(i);}
+// }
+
+// using var, unexpected
+let nodes = document.getElementsByClassName('node');
+let count = nodes.length;
+for (var i = 0; i < count; i++) {
+  nodes[i].onclick = function (e) {alert(i);}
+}
+
+
+// babel's compiled output using let
+// var nodes = document.getElementsByClassName('node');
+// var count = nodes.length;
+
+// function _loop(i) {
+//   nodes[i].onclick = function (e) {
+//     alert(i);
+//   };
+// };
+
+// for (var i = 0; i < count; i++) {
+//   _loop(i);
+// }
+
+//
