fengchuanyu 1 week geleden
bovenliggende
commit
ee34c2c0c5
2 gewijzigde bestanden met toevoegingen van 284 en 0 verwijderingen
  1. 123 0
      8-ES6/14_对象扩展.html
  2. 161 0
      8-ES6/练习题2_this指向讲解.html

+ 123 - 0
8-ES6/14_对象扩展.html

@@ -0,0 +1,123 @@
+<!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 userName = '张三';
+        // let fun = function(){
+        //     console.log('hello world');
+        // }
+        // es6新增属性简写方法
+        // let obj = {
+        //     userName:userName,
+        //     age:18
+        // }
+        // let obj = {
+        //     userName,
+        //     age:18,
+        //     fun,
+        // }
+
+        // console.log(obj);
+
+        // 对象方法简介
+        // let obj = {
+        //     userName:'张三',
+        //     age:18,
+        //     // sayName:function(){
+        //     //     console.log(this.userName);
+        //     // }
+        //     // 对象方法简介
+        //     sayName(){
+        //         console.log(this.userName);
+        //     }
+        // }
+        // obj.sayName();
+
+
+        // let val = "userName";
+        // let obj = {
+        //     userName:'张三',
+        //     userName2:'张三2',
+        //     age:18,
+        //     sex:'男',
+        //     sayName(){
+        //         console.log(this.userName);
+        //     }
+        // }
+        //向通过变量访问对象的属性或方法 可以通过[] 
+        // []里面可以放入变量 也可以放入字符串 也可以有简单的表达式
+        // console.log(obj[val]);
+        // console.log(obj[val+"2"]);
+        // console.log(obj["age"]);
+
+        // Object.is()
+        // 用来比较两个值是否严格相等
+        // console.log(Object.is(1,1));
+        // console.log(Object.is("1","1"));
+        // console.log(Object.is({},{}));
+        // console.log(Object.is([],[]));
+        // let obj = {
+        //     userName:"张三",
+        //     age:18,
+        //     sex:"男"
+        // }
+        // let obj2 = obj;
+        // console.log(Object.is(obj,obj2));
+
+        // let a = {userName:"张三"};
+        // let b = {userName:"张三"};
+        // console.log(Object.is(a,b));
+
+        // let obj = {
+        //     userName:"张三",
+        //     age:18,
+        //     sex:"男"
+        // }
+        // let obj2 = {
+        //     school:"清华大学"
+        // }
+        // 合并对象
+        // let obj3 = {...obj,...obj2};
+        // console.log(obj3);
+        // 合并对象  assign  第一个参数是目标对象 后面的参数是源对象允许多个参数
+        // Object.assign(obj,obj2);
+        // console.log(obj);
+
+        // let obj3 = Object.assign({},obj,obj2);
+        // console.log(obj3,obj,obj2);
+
+        // 判断对象中是否包含指定属性
+        // let obj = {
+        //     userName:"张三",
+        //     age:18,
+        //     sex:"男"
+        // }
+        // console.log("age" in obj);
+        // if("age" in obj){
+        //     console.log("包含");
+        // }else{
+        //     console.log("不包含");
+        // }
+
+        let obj = {
+            userName:"张三",
+            age:18,
+            sex:"男"
+        }
+        // Object.keys() 方法会返回对象中所有的属性名称 以数组形式返回
+        console.log(Object.keys(obj));
+        // Object.values() 方法会返回对象中所有的属性值 以数组形式返回
+        console.log(Object.values(obj));
+        // Object.entries() 方法会返回对象中所有的属性名和属性值 以二维数组形式返回
+        console.log(Object.entries(obj));
+        
+
+
+    </script>
+</body>
+</html>

+ 161 - 0
8-ES6/练习题2_this指向讲解.html

@@ -0,0 +1,161 @@
+<!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() {
+    //   this.x = 20
+    //   console.log(this.x)
+    // }
+    // test()
+
+    // console.log(x)
+
+
+    //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)());
+
+    // var a = 10;
+    // if(a=9){
+    //   console.log(a)
+    // }
+
+    // var age = 20;
+    // var obj = {
+    //   age:10,
+    //   showAge:function(){
+    //     console.log(this.age)
+    //   }
+    // }
+
+    // console.log(obj.showAge);
+    // var fn = obj.showAge;
+    // // function fn2(){
+    // //   console.log(this.age)
+    // // }
+    // fn();
+
+
+    //4、下列代码中当div的点击事件触发时输出的结果是?
+    // document.getElementById("div").onclick = function () {
+    //   console.log(this)
+    // };
+
+
+    //5、请写出下列代码运行结果
+    // var name = "window"
+    // var obj = {
+    //   name: "obj"
+    // }
+    // window.setInterval(function () {
+    //   console.log(this.name)
+    // }, 300)
+    // window.setInterval(function () {
+    //   console.log(this.name)
+    // }.bind(obj), 300)
+
+    //6、请补全下列代码
+    // function foo() {
+    //   //补全此处代码实现每隔一秒输出 hello world
+    //   // console.log("hello world");
+    //   return function(){
+    //     console.log("hello world");
+    //   }
+    // }
+    // window.setInterval(foo(), 1000);
+
+
+    // 7、补全下列代码实现 1+2+3+4
+    // function add(c, d) {
+    //   return this.a + this.b + c + d;
+    // }
+
+    // var obj = {
+    //   a: 1,
+    //   b: 2,
+    //   addFun:add
+    // }
+    // console.log(obj.addFun(3,4))
+    
+    /*
+      在此补全代码 以两种以上方法实现
+    */
+
+
+
+    //8、写出下列输出结果
+    // function f() {
+    //   return this.a;
+    // }
+
+    // var g = f.bind({ a: "azerty" });
+    // console.log(g());//azerty
+
+    // // 函数正常情况下只能绑定一次bind 但如果绑定了多次 则以第一次绑定为准
+    // var h = g.bind({ a: 'yoo' });
+    // console.log(h());//azerty
+
+    // var o = { a: 'loveCoding', f: f, g: g, h: h };
+    // console.log(o.f(), o.g(), o.h());
+    //loveCoding azerty azerty
+
+
+    //9、补全下列代码
+    // var o = { prop: 'loveCoding' };
+
+    // function independent() {
+    //   return this.prop;
+    // }
+    // //在此补全代码
+    // o.f = independent
+    // 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>