Inicio Explorar Ayuda
Iniciar sesión
lovecoding
/
W260426
8
0
Fork 0
Archivos Incidencias 0 Pull Requests 0 Wiki
Explorar el Código

admin

fengchuanyu hace 3 días
padre
d520b9823f
commit
a8583ed3d8
Se han modificado 5 ficheros con 246 adiciones y 7 borrados
Dividir vista Mostrar estadísticas de diff
  1. 9 7
      8_ES6/2_变量提升.html
  2. 74 0
      8_ES6/3_块作用域.html
  3. 41 0
      8_ES6/4_闭包作用.html
  4. 28 0
      8_ES6/5_立即执行函数.html
  5. 94 0
      8_ES6/练习题1_函数及变量特性.html

+ 9 - 7
8_ES6/2_变量提升.html
Ver fichero 

@@ -54,14 +54,16 @@
 
         // }
 
         // fun();
 
         // 解析后代码如下
 
-        var a = 20;
 
-        function fun(){
 
-            var a;
 
-            console.log(a);
 
-            a = 10;
 
-        }
 
-        fun();
 
+        // var a = 20;
 
+        // function fun(){
 
+        //     var a;
 
+        //     console.log(a);
 
+        //     a = 10;
 
+        // }
 
+        // fun();
 
         
+        console.log(a);
 
+        let a = 10;
 
         
     </script>
 
 </body>

+ 74 - 0
8_ES6/3_块作用域.html
Ver fichero 

@@ -0,0 +1,74 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        // 全局作用域 ：在函数外部定义的变量 可以在任何地方访问
 
+        // 局部作用域 ：在函数内部定义的变量 只能在函数内部访问
 
+        // 块作用域 ：在块级作用域内部定义的变量 只能在块级作用域内部访问 只要使用{ } 就是块级作用域 例如：for循环 、if语句
 
+
 
+        // 使用var  只分为全局作用域和局部作用域（函数内定义与函数外定义 没有其他情况）
 
+        // if(true){
 
+        //     var a = 10;
 
+        // }
 
+        // console.log(a); 
+
 
+        // function fun(){
 
+        //     // 函数内部定义的变量 只能在函数内部访问 
+        //     var a = 10;
 
+        // }
 
+        // fun();
 
+        // 函数外不能访问函数内部定义的变量
 
+        // console.log(a);
 
+
 
+
 
+        // 使用let、 const 定义的变量 可以生成块作用域
 
+        // if(true){
 
+        //     let a = 10;
 
+        // }
 
+        // console.log(a); 
+
 
+        // es6之前使用闭包实现块级作用域
 
+
 
+        // 闭包：函数嵌套函数 且内部函数可以访问外部函数的变量 
+        // 闭包的作用：1、保存变量不会释放 2、可以实现私有变量
 
+
 
+
 
+        // var a = 10;
 
+        // console.log(a);
 
+        // 如果js发现这个变量后续没有被继续使用 则会自动释放（垃圾回收机制）
 
+        // .....
 
+
 
+        // function fun(username){ 
+        //     var a = [];
 
+        //     a.push(username);
 
+        //     console.log(a);
 
+        // }
 
+        // fun("张三");
 
+        // fun("李四");
 
+        // 以上函数的问题：每次调用函数 函数执行完毕 会将变量a释放 （因为局部作用域内没有再次使用a变量）；
 
+        // 解决方法：使用闭包
 
+
 
+        function fun1(){
 
+            var a = [];
 
+            function fun2(username){
 
+                a.push(username);
 
+                console.log(a);
 
+            }
 
+            return fun2;
 
+        } 
+
 
+        var fun3 = fun1();
 
+        // console.log(fun3);
 
+        fun3("张三");
 
+        fun3("李四");
 
+
 
+
 
+
 
+    </script>
 
+</body>
 
+</html>

+ 41 - 0
8_ES6/4_闭包作用.html
Ver fichero 

@@ -0,0 +1,41 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+
 
+<body>
 
+    <ul>
 
+        <li>张三</li>
 
+        <li>李四</li>
 
+        <li>王五</li>
 
+    </ul>
 
+    <script>
 
+        // 获取元素
 
+        var li = document.querySelectorAll("li");
 
+
 
+
 
+        // for (var i = 0; i < li.length; i++) {
 
+        //     (function (index) {
 
+        //         li[index].onclick = function () {
 
+        //             console.log(index);
 
+        //         }
 
+        //     })(i);
 
+        // }
 
+
 
+
 
+        
+        for(let i = 0;i<li.length;i++){
 
+            li[i].onclick = function(){
 
+                console.log(i);
 
+            }
 
+        }
 
+
 
+
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 28 - 0
8_ES6/5_立即执行函数.html
Ver fichero 

@@ -0,0 +1,28 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        // 立即执行函数
 
+        // 将一个匿名函数赋值给一个变量
 
+        // var foo = function(){
 
+        //     console.log("hello world");
 
+        // }
 
+        // foo();
 
+
 
+        // 实现立即执行函数的两种方法
 
+        (function(){
 
+            console.log("hello world");
 
+        }());
 
+        // 或者
 
+        (function(){
 
+            console.log("hello world");
 
+        })();
 
+
 
+    </script>
 
+</body>
 
+</html>

+ 94 - 0
8_ES6/练习题1_函数及变量特性.html
Ver fichero 

@@ -0,0 +1,94 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+
 
+<body>
 
+    <script>
 
+        // 第一题
 
+        var n = 13;
 
+        function fn(n) {
 
+            alert(n);//
 
+            n = 14;
 
+            alert(n);
 
+        }
 
+        fn(n);
 
+        alert(n)
 
+
 
+        // 第二题
 
+        var n = 0;
 
+        function a() {
 
+            var n = 10;
 
+            function b() {
 
+                n++;
 
+                alert(n);
 
+            }
 
+            b();
 
+        }
 
+        a();
 
+        alert(n);
 
+
 
+        // 第三题
 
+        console.log(num, str);
 
+        var num = 18;
 
+        var str = "lily";
 
+        function fn2() {
 
+            console.log(str, num);
 
+            num = 19;
 
+            str = "candy";
 
+            var num = 14;
 
+            console.log(str, num);
 
+        }
 
+        fn2();
 
+        console.log(str, num);
 
+
 
+        // 第四题
 
+        fn();
 
+        function fn() { console.log(1) };
 
+        fn();
 
+        var fn = 13;
 
+        fn();
 
+        function fn() { console.log(2) };
 
+        fn();
 
+
 
+        // 第五题
 
+        (function f() {
 
+            function f() { console.log(1) };
 
+            f();
 
+            function f() { console.log(2) };
 
+        })();
 
+
 
+        // 第六题
 
+        if (!("a" in window)) {
 
+            var a = 10;
 
+        }
 
+        alert(a);
 
+        console.log(fn);
 
+        if (9 == 8) {
 
+            function fn() {
 
+                alert(2);
 
+            }
 
+        }
 
+        
+        // 第七题
 
+        function fn() {
 
+            var i = 5;
 
+            return function (n) {
 
+                console.log(n * i++);
 
+            }
 
+        }
 
+        var f = fn();
 
+        f(4);
 
+        fn()(5);
 
+        f(6);
 
+
 
+
 
+    </script>
 
+</body>
 
+
 
+</html>