fengchuanyu 19 시간 전
부모
커밋
0d06ea0955
5개의 변경된 파일266개의 추가작업 그리고 7개의 파일을 삭제
  1. 13 7
      8_ES6/1_let&const.html
  2. 45 0
      8_ES6/2_闭包.html
  3. 44 0
      8_ES6/3_闭包应用.html
  4. 21 0
      8_ES6/4_块作用域.html
  5. 143 0
      8_ES6/练习题1_讲解.html

+ 13 - 7
8_ES6/1_let&const.html

@@ -28,16 +28,22 @@
 
         // const 定义常量 不能重复定义 不能在定义前使用 必须先定义再使用
         
-        let a = 10;
-        a = 20;
-        a = "a";
-        console.log(a);
+        // let a = 10;
+        // a = 20;
+        // a = "a";
+        // console.log(a);
 
-        const b = 1;
-        b = 2;
-        console.log(b);
+        // const b = 1;
+        // b = 2;
+        // console.log(b);
 
 
+        var a = 10;
+        let b = "hello";
+        console.log(window.a);
+        console.log(window.b);
+        
+        
 
 
 

+ 45 - 0
8_ES6/2_闭包.html

@@ -0,0 +1,45 @@
+<!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>
+        // 闭包 函数嵌套函数 内部函数可以使用外部函数的变量
+        // 闭包的作用 保护变量不被销毁
+        function foo(){
+            var a = 10;
+            function seta(num){
+                a += num;
+                return a;
+            }
+            return seta
+        }
+
+        // console.log(foo());
+        var foo2 = foo();
+        console.log(foo2);
+        var num1 = foo2(1);
+        console.log(num1);
+        var num2 = foo2(2);
+        console.log(num2);
+        // 每个函数调用都是一个新的作用域 每一个作用域下的闭包内部变量不互通
+        var foo3 = foo();
+        var num3 = foo3(3);
+        console.log(num3);
+
+
+
+        // function foo10(){
+        //     var a = 10;
+        //     console.log(a);
+        // }
+        // foo10();
+        // foo10();
+
+        
+    </script>
+</body>
+</html>

+ 44 - 0
8_ES6/3_闭包应用.html

@@ -0,0 +1,44 @@
+<!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>a</li>
+        <li>b</li>
+        <li>c</li>
+        <li>d</li>
+    </ul>
+    <script>
+        var aLi = document.querySelectorAll("li");
+
+        // for(var i=0;i<aLi.length;i++){
+        //     aLi[i].index = i;
+        //     aLi[i].onclick = function(){
+        //         console.log(this.index);
+        //     }
+        // }
+
+        // for (var i = 0; i < aLi.length; i++) {
+        //     (function (num) {
+        //         aLi[i].onclick = function () {
+        //             console.log(num);
+        //         }
+        //     })(i)
+        // }
+
+
+         for(let i=0;i<aLi.length;i++){
+            aLi[i].onclick = function(){
+                console.log(i);
+            }
+        }
+    </script>
+</body>
+
+</html>

+ 21 - 0
8_ES6/4_块作用域.html

@@ -0,0 +1,21 @@
+<!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>
+        // if(true){
+        //     var a = 10;
+        // }
+        // console.log(a);
+
+        if(true){
+            let a = 10;
+        }
+        console.log(a);
+    </script>
+</body>
+</html>

+ 143 - 0
8_ES6/练习题1_讲解.html

@@ -0,0 +1,143 @@
+<!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 n = 13;
+        // function fn(n) {
+        //     alert(n);//13
+        //     n = 14;
+        //     alert(n);//14
+        // }
+        // fn(n);
+        // alert(n);//13
+
+
+        // var n = 13;
+        // function fn(n) {
+        //    console.log(n);
+        //    var n = 6;
+        //    console.log(n);
+        // }
+        // fn(5);
+
+        // var x = 13;
+        // function fn(n) {
+        //     console.log(n);
+        //     x = 6;
+        //     console.log(x);
+
+        // }
+        // console.log(x);
+        // fn(5);
+        // console.log(x);
+
+
+        // 第二题
+        // 作用域链 当发现有变量调用的时候 先从当前作用域查找 如果没在上一层作用域查找 如果还没有再向上一层逐层查找
+        // var n = 0;
+        // function a() {
+        //     var n = 10;
+        //     function b() {
+        //         n++;
+        //         alert(n);
+        //     }
+        //     b();
+        // }
+        // a();
+        // alert(n);
+
+
+        // 第三题
+        // console.log(num, str);//undefined undefined
+        // var num = 18;
+        // var str = "lily";
+        // function fn2() {
+        //     console.log(str, num);//lily undefined
+        //     num = 19;
+        //     str = "candy";
+        //     var num = 14;
+        //     console.log(str, num);//candy 14
+        // }
+        // fn2();
+        // console.log(str, num);//candy 18
+
+
+        // 第四题
+        // fn();//2
+        // function fn() { console.log(1) };
+        // fn();//2
+        // var fn = 13;
+        // fn();//报错 因为fn已经被赋值为13了 所以不是函数了
+        // function fn() { console.log(2) };
+        // fn();//报错 因为fn已经被赋值为13了 所以不是函数了
+
+        // 第五题
+        // (function f() {
+        //     function f() { console.log(1) };
+        //     f();
+        //     function f() { console.log(2) };
+        // })();
+
+        // var foo = function(){
+        //     console.log("hello");
+        // }
+        // foo();
+        // 立即执行函数
+        // (function(){
+        //     console.log("hello");
+        // })()
+
+
+        // 第六题
+        // var a;
+        // console.log(window.a);
+        // if (!("a" in window)) {
+        //     var a = 10;
+        // }
+        // alert(a);
+        // 函数提升 在大括号中 函数声明会被提升到作用域的顶部不包含函数体
+        // console.log(fn);
+        // if (8 == 8) {
+        //     function fn() {
+        //         alert(2);
+        //     }
+        // }
+
+        // var a = 10;
+        // console.log(window.a);
+        
+
+
+        // in 运算符 可以判断一个属性是否在对象中
+        // 如果在返回true 不在返回false
+        // var obj = {
+        //     a:1,
+        //     b:2
+        // }
+        // console.log("c" in obj);
+
+
+         // 第七题
+        function fn() {
+            var i = 5;
+            return function (n) {
+                console.log(n * i++);
+            }
+        }
+        var f = fn();
+        f(4);
+        fn()(5);
+        f(6);
+        
+    </script>
+</body>
+
+</html>