fengchuanyu 2 days ago
parent
commit
d520b9823f
2 changed files with 115 additions and 0 deletions
  1. 47 0
      8_ES6/1_新的变量定义方式.html
  2. 68 0
      8_ES6/2_变量提升.html

+ 47 - 0
8_ES6/1_新的变量定义方式.html

@@ -0,0 +1,47 @@
+<!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>
+        // js 变量定义方式
+        var a = 1;
+        let b = 2;
+        const c = 3;
+
+        // var 定义的变量可以重复定义
+        // var num1 = 10;
+        // var num1 = 20;
+        // console.log(num1); // 20
+
+        // let、 const 定义的变量不可以重复定义
+        // let num2 = 10;
+        // let num2 = 20; 
+
+        // var 定义变量相当于放置到window对象上
+        // var num3 = 10;
+        // console.log(window.num3); // 10
+
+        // let、 const 定义的变量不放置到window对象上
+        // let num4 = 20;
+        // console.log(window.num4); // undefined
+
+        // let vs const
+        // let 定义的变量可以修改 (let定义的是变量)
+        // const 定义的变量不可以修改 (const定义的是常量)
+        // let 和 const 除了一个是常量一个是变量外其他都一致
+        // let num5 = 10;
+        // num5 = "hello";
+        // console.log(num5); // hello
+
+        const num6 = 20;
+        num6 = "world"; // 报错  
+    </script>
+</body>
+
+</html>

+ 68 - 0
8_ES6/2_变量提升.html

@@ -0,0 +1,68 @@
+<!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 定义变量才会出现变量提升现象
+        // let、 const 定义的变量不会出现变量提升现象
+        // 变量提升现象:在变量定义之前,可以使用该变量,但是赋值为undefined,变量提升相当于把变量定义提升到代码的顶部,赋值部分保持原位置
+        
+        // console.log(a);
+        // var a = 10;
+        // 相当于下面的代码 js 在执行之前会处理变量提升,然后在执行代买
+        // var a;
+        // console.log(a);
+        // a = 10;
+
+        // 函数提升 函数提升相当于把函数定义提升到代码的顶部,函数调用部分保持原位置
+
+        // fn();
+
+        // function fn() {
+        //     console.log("hello world");
+        // }
+
+
+
+        // console.log(foo);
+        // var foo = 1;
+        // function foo(){
+        //     console.log("123");
+        // }
+        // foo();
+        // 函数提升和变量提升同时存在 那么函数提升会优先于变量提升执行(提升的顺序变量会在函数之上)
+        // 以上代码编译后如下:
+        // var foo
+        // function foo(){
+        //     console.log("123");
+        // }
+        // console.log(foo);
+        // foo = 1;
+        // foo();
+
+
+        // 变量提示其实是提升到当前作用域最顶端
+        // 变量定义分为全局变量和局部变量 所有作用域也分为全局作用域和局部作用域
+        // var a = 20;
+        // function fun(){
+        //     console.log(a);
+        //     var a = 10;
+        // }
+        // fun();
+        // 解析后代码如下
+        var a = 20;
+        function fun(){
+            var a;
+            console.log(a);
+            a = 10;
+        }
+        fun();
+        
+        
+    </script>
+</body>
+</html>