ES5

ES5/1.闭包/README.md

@@ -0,0 +1,23 @@
+# 闭包
+当内部函数被保存到外部，导致作用域链不释放，就形成了闭包。
+## 1. 闭包的作用
+### 1.1  实现公有化变量(函数累加器)
+不借助外界变量，计算函数执行的次数
+```javascript
+function test(){
+    var num = 0;
+    return function (){
+        num ++;
+        return num;
+    }
+}
+
+var temp = test();
+temp();
+temp();
+temp();
+```
+### 1.2 
+
+## 2. 闭包的危害
+闭包会导致原有作用域链不释放，导致内存泄漏（内存的量是有限的，当占用的多了，剩余的内存就少了！内存泄漏其实就是过多的占用内存资源）

ES5/1.闭包/index.js

@@ -0,0 +1,31 @@
+// 不依赖于外部变量，并且能反复执行的函数累加器
+// 统计函数执行次数
+// 不利用闭包就必须借助全局变量
+// var num = 0;
+// function test(){
+//     num ++;
+// }
+
+// function test(){
+//     var num = 0;
+//     return function (){
+//         num ++;
+//         return num;
+//     }
+// }
+
+// var temp = test();
+// temp();
+// temp();
+// temp();
+
+// 2.可以做缓存（储存结构）
+
+function test(){
+    var food = 'apple';
+    return {
+        likea:function(){
+            return 'i like '
+        }
+    }
+}

ES5/2.事件委托/README.md

@@ -0,0 +1,94 @@
+# 事件委托
+## html代码
+```html
+    <div class="wrapper">wrapper
+        <div class="content">content
+            <div class="box">box</div>
+        </div>
+    </div>
+```
+## JavaScript代码
+```javascript
+var oWrapper = document.getElementsByClassName('wrapper')[0];
+var oContext = document.getElementsByClassName('content')[0];
+var oBox = document.getElementsByClassName('box')[0];
+
+
+```
+## 事件触发的机制是先捕获，再冒泡
+- 捕获(点击box时，从外往里依次触发)
+```javascript
+```
+
+![](./img/事件捕获.png)
+```javascript
+oWrapper.addEventListener('click',function(){
+    console.log('wrapper-事件捕获')
+},true)
+oContext.addEventListener('click',function(){
+    console.log('context-事件捕获')
+},true)
+oBox.addEventListener('click',function(){
+    console.log('box-事件捕获')
+},true)
+```
+- 冒泡(点击box时，从里往外，依次触发)
+```javascript
+oWrapper.addEventListener('click',function(){
+    console.log('wrapper-事件冒泡')
+},false)
+oContext.addEventListener('click',function(){
+    console.log('context-事件冒泡')
+},false)
+oBox.addEventListener('click',function(){
+    console.log('box-事件冒泡')
+},false)
+```
+![](./img/事件冒泡.png)
+
+- 当同时有事件冒泡和事件捕获时，先捕获，再冒泡(特例请看下一条)
+```javascript
+oWrapper.addEventListener('click',function(){
+    console.log('wrapper-事件捕获')
+},true)
+oWrapper.addEventListener('click',function(){
+    console.log('wrapper-事件冒泡')
+},false)
+oContext.addEventListener('click',function(){
+    console.log('context-事件捕获')
+},true)
+oContext.addEventListener('click',function(){
+    console.log('context-事件冒泡')
+},false)
+oBox.addEventListener('click',function(){
+    console.log('box-事件捕获')
+},true)
+oBox.addEventListener('click',function(){
+    console.log('box-事件冒泡')
+},false)
+```
+![](./img/捕获+冒泡1.png)
+- 当**被点击的元素**同时注册了冒泡和捕获的时候，会依照注册的顺序触发,其他仍然按照先捕获再冒泡的顺序触发
+```javascript
+oWrapper.addEventListener('click',function(){
+    console.log('wrapper-事件冒泡')
+},false)
+oWrapper.addEventListener('click',function(){
+    console.log('wrapper-事件捕获')
+},true)
+
+oContext.addEventListener('click',function(){
+    console.log('context-事件冒泡')
+},false)
+oContext.addEventListener('click',function(){
+    console.log('context-事件捕获')
+},true)
+
+oBox.addEventListener('click',function(){
+    console.log('box-事件冒泡')
+},false)
+oBox.addEventListener('click',function(){
+    console.log('box-事件捕获')
+},true)
+```
+![](./img/捕获+冒泡2.png)

ES5/2.事件委托/index.js

@@ -0,0 +1,28 @@
+
+
+
+var oWrapper = document.getElementsByClassName('wrapper')[0];
+var oContext = document.getElementsByClassName('content')[0];
+var oBox = document.getElementsByClassName('box')[0];
+
+oWrapper.addEventListener('click',function(){
+    console.log('wrapper-事件冒泡')
+},false)
+oWrapper.addEventListener('click',function(){
+    console.log('wrapper-事件捕获')
+},true)
+
+oContext.addEventListener('click',function(){
+    console.log('context-事件冒泡')
+},false)
+oContext.addEventListener('click',function(){
+    console.log('context-事件捕获')
+},true)
+
+oBox.addEventListener('click',function(){
+    console.log('box-事件冒泡')
+},false)
+oBox.addEventListener('click',function(){
+    console.log('box-事件捕获')
+},true)
+

ES5/3.数组/index.js

@@ -0,0 +1,13 @@
+var x = new Array(10);
+// console.log(x)
+// var x = [1,2,3]
+
+var arr = x.map(function(ele,index,self){
+    // ele = 1;
+    console.log(ele)
+    return ele;
+},1)
+
+
+// console.log(arr)
+

ES5/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+
+</head>
+<body>
+
+    <script src="./3.数组/index.js"></script>
+</body>
+</html>