fengchuanyu 2 өдөр өмнө
parent
commit
76f31a2903

+ 36 - 0
8_ES6/15_symbol.html

@@ -0,0 +1,36 @@
+<!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>
+        let obj = {
+            userName:"张三",
+            age:18
+        }
+        obj.sex = "男";
+        // 对象中属性名是唯一且不允许重复的
+        obj.age = 20;
+
+        // symbol 类型表示唯一的,不能重复
+        let sym = Symbol("sym");
+        let sym2 = Symbol("sym");
+        let sym3 = Symbol();
+        obj[sym] = "hello";
+        obj[sym2] = "world";
+        obj[sym3] = "你好";
+
+        // console.log(obj);
+        // console.log(obj[sym]);
+
+        for(let key in obj){
+            console.log(key);
+        }
+
+        
+    </script>
+</body>
+</html>

+ 21 - 0
8_ES6/16_bigint.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>
+        // js最大处理数值 2^53-1 9007199254740991
+        // js最小处理数值 -2^53 -9007199254740991
+
+        // 大整数类型 bigint 表示大整数类型(不能为小数),可以处理任意大的整数
+        // 数字后边加n 表示大整数类型 或者 BigInt()
+        let a = 100n;
+        let b = 100;
+        // 大整数类型不能与普通数值类型进行运算
+        console.log(a + BigInt(b));
+    </script>
+</body>
+</html>

+ 31 - 0
8_ES6/17_箭头函数.html

@@ -0,0 +1,31 @@
+<!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>
+        // ES5 函数表达式
+        // function add(a,b){
+        //     return a+b;
+        // }
+        // var add = function(a,b){
+        //     return a+b;
+        // }
+        // console.log(add(1,2));
+        
+        // ES6 箭头函数 简化函数表达式 :   (参数) => {函数体} 没有function关键字
+        // let add = (a,b) => {
+        //     return a+b;
+        // }
+
+        
+       
+
+
+
+    </script>
+</body>
+</html>

+ 60 - 0
8_ES6/18_this指向.html

@@ -0,0 +1,60 @@
+<!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>
+    <button id="btn">点击我</button>
+    <script>
+        // this 指向问题 this一般指向调用它的对象
+        // 如果有事件绑定,this指向事件绑定的对象
+        let btn = document.getElementById("btn");
+        btn.onclick = function(){
+            // function bar(){
+            //     console.log(this);
+            // }
+            // bar();
+            let bar = () => {
+                console.log(this);
+            }
+            bar();
+            console.log(this);
+        }
+
+        // 普通函数中 this指向window对象 默认为winow调用
+        // function foo(){
+        //     console.log(this);
+        //     // 内部函数中 this指向window对象
+        //     function bar(){
+        //         console.log(this);
+        //     }
+        //     bar();
+        // }
+        // foo();
+
+        // let obj = {
+        //     name:"张三",
+        //     age:18,
+        //     sex:"男",
+        //     sayName(){
+        //         console.log(this);
+        //         // function bar(){
+        //         //     console.log(this);
+        //         // }
+        //         // bar();
+        //         // 箭头函数中 this指向为当前所在作用域的this (箭头函数中没有this)
+        //         let bar = () => {
+        //             console.log(this);
+        //         }
+        //         bar();
+        //     }
+        // }
+        // obj.sayName();
+
+
+
+    </script>
+</body>
+</html>

+ 124 - 0
8_ES6/练习题3_this指向.html

@@ -0,0 +1,124 @@
+<!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>
+    //1、写出下列输出结果
+    var x = 10;
+    function test() {
+      var x = 20
+      console.log(this.x)
+    }
+    test()
+
+
+    //2、写出下列输出结果
+    var name = "window"
+    var obj = {
+      name: "obj",
+      func1: function () {
+        console.log(this.name);
+        (function () {
+          console.log(this.name)
+        })()
+      }
+    }
+    obj.func1()
+
+
+    //3、写出下列结果
+    var name = "the window";
+
+    var object = {
+      name: "My Object",
+      getName: function () {
+        return this.name;
+      }
+    }
+
+    console.log(object.getName());
+    console.log((object.getName)());
+    console.log((object.getName = object.getName)());
+
+    //4、下列代码中当div的点击事件触发时输出的结果是?
+    document.getElementById("div").onclick = function () {
+      console.log(this)
+    };
+
+
+    //5、请写出下列代码运行结果
+    var name = "window"
+    var obj = {
+      name: "obj"
+    }
+    setInterval(function () {
+      console.log(this.name)
+    }, 300)
+    setInterval(function () {
+      console.log(this.name)
+    }.call(obj), 300)
+
+    //6、请补全下列代码
+    function foo() {
+      //补全此处代码实现每隔一秒输出 hello world
+    }
+    window.setInterval(foo(), 1000);
+
+
+    // 7、补全下列代码实现 1+2+3+4
+    function add(c, d) {
+      return this.a + this.b + c + d;
+    }
+
+    /*
+      在此补全代码 以两种以上方法实现
+    */
+
+
+
+    //8、写出下列输出结果
+    function f() {
+      return this.a;
+    }
+
+    var g = f.bind({ a: "azerty" });
+    console.log(g());
+
+    var h = g.bind({ a: 'yoo' });
+    console.log(h());
+
+    var o = { a: 'loveCoding', f: f, g: g, h: h };
+    console.log(o.f(), o.g(), o.h());
+
+
+    //9、补全下列代码
+    var o = { prop: 'loveCoding' };
+
+    function independent() {
+      return this.prop;
+    }
+    //在此补全代码
+    console.log(o.f()); //  loveCoding
+
+    //10、用call 或 apply 实现bind 方法
+    function foo() {
+      console.log(this.a)
+    }
+    var obj = {
+      a: "hello"
+    }
+
+
+    var foo2 = foo.bind2(obj);
+    foo2()
+  </script>
+</body>
+
+</html>