fengchuanyu 1 Minggu lalu
induk
melakukan
1bd7c2bf03
3 mengubah file dengan 320 tambahan dan 0 penghapusan
  1. 58 0
      8-ES6/12_箭头函数.html
  2. 138 0
      8-ES6/13_this.html
  3. 124 0
      8-ES6/练习题1_this指向.html

+ 58 - 0
8-ES6/12_箭头函数.html

@@ -0,0 +1,58 @@
+<!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>
+    <div id="box">hello world</div>
+    <script>
+        // function foo(){
+        //     console.log("hello");
+        // }
+
+        // let fn = function(){
+        //     console.log("hello");
+        // }
+
+        // // 箭头函数
+        // let fn2 = () => {};
+
+        // let fn = (a) => {
+        //     console.log(a);
+        //     console.log("hello world");
+        // }
+
+        // fn(1);
+
+
+        // arguments 是一个类数组对象 
+        // 里面容纳是所有的参数
+        // function fn(){
+        //     console.log(arguments)
+        //     console.log(arguments[0]);
+        //     console.log(arguments[1]);
+        // }
+        // fn(1,'a');
+
+        // // 箭头函数 没有 arguments 这个对象
+        // let fn = (...arg) => {
+        //     // console.log(arguments);
+        //     console.log(arg);
+        // }
+        // fn(1,"a");
+
+        // 箭头函数 没有 this这个对象
+        let oBox = document.querySelector("#box");
+        // oBox.onclick = function(){
+        //     console.log(this);
+        // }
+        // oBox.onclick = () => {
+        //     console.log(this);
+        // }
+        console.log(this);
+        
+    </script>
+</body>
+</html>

+ 138 - 0
8-ES6/13_this.html

@@ -0,0 +1,138 @@
+<!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>
+    <div id="box">hello world</div>
+    <script>
+        // 事件绑定中的 this 指向 事件源
+        // let oBox = document.querySelector("#box");
+        // oBox.onclick = function(){
+        //     console.log(this);
+        // }
+        // // 全局中的 this 指向 window
+        // console.log(this);
+
+        // 一般情况下this都是应用在函数内部的
+        // this 谁调用的函数 this一般就是指向谁
+
+
+        // 普通函数的this
+        // function fn(){
+        //     console.log(this);
+        // }
+        // // fn();
+        // window.fn();
+
+        // 对象中的方法
+        // let obj = {
+        //     name:"张三",
+        //     age:18,
+        //     sex:"男",
+        //     talk:function(){
+        //         console.log(this.name);
+        //     }
+        // }
+        // obj.talk();
+
+        // 箭头函数中的this
+        // 箭头函数中的this 指向的是 定义时的上下文 而不是调用时的上下文
+        // var obj = {
+        //     name:"张三",
+        //     age:18,
+        //     sex:"男",
+        //     talk:()=>{
+        //         console.log(this);
+        //     }
+        // }
+        // obj.talk();
+
+        // let obj = {
+        //     name:"张三",
+        //     age:18,
+        //     sex:"男",
+        //     talk:function(){
+        //         function fn(){
+        //             console.log(this)
+        //         }
+        //         fn();
+        //     }
+        // }
+        // obj.talk();
+
+
+        // 修改this指向
+        // call() apply() bind()
+        // call
+        // var obj = {
+        //     name:"张三",
+        //     age:18,
+        //     sex:"男"
+        // }
+        // var age = 20;
+        // function fn(){
+        //     // this 指向的 window
+        //     console.log(this.age)
+        // }
+        // fn()
+
+        // call 方法   
+        // call 可以改变当前函数默认this指向
+        // call 第一个参数 是改变后的this指向 让this指向谁
+        // call 从第二个参数开始是要传递的参数
+        // var obj = {
+        //     name:"张三",
+        //     age:18,
+        //     sex:"男"
+        // }
+        // var age = 20;
+        // function fn(a,b){
+        //     // this 指向的 window
+        //     console.log(this.age)
+        //     console.log(a+b);
+        // }
+        // fn.call(obj,1,2)
+
+
+        // apply 方法
+        // apply 方法和call方法基本相同
+        // 唯一的区别就是 apply 方法只有两个参数
+        // 第一个参数 是改变后的this指向 让this指向谁
+        // 第二个参数 是一个数组 数组中的元素是要传递的参数
+        // var obj = {
+        //     name:"张三",
+        //     age:18,
+        //     sex:"男"
+        // }
+        // var age = 20;
+        // function fn(a,b){
+        //     // this 指向的 window
+        //     console.log(this.age)
+        //     console.log(a+b);
+        // }
+        // fn.apply(obj,[1,2])
+
+        // bind 方法
+        // bind 方法和call \ apply 不同地方
+        // bind 方法不会调用函数 而是返回一个新的函数
+        // 返回的心函数是已经绑定好this的函数
+        // bind 参数部分跟call 方法参数部分是一样的 
+        // var obj = {
+        //     name:"张三",
+        //     age:18,
+        //     sex:"男"
+        // }
+        // var age = 20;
+        // function fn(a,b){
+        //     // this 指向的 window
+        //     console.log(this.age)
+        //     console.log(a+b);
+        // }
+        // var fn2 = fn.bind(obj,1,2);
+        // fn2();
+    </script>
+</body>
+</html>

+ 124 - 0
8-ES6/练习题1_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() {
+      this.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"
+    }
+    window.setInterval(function () {
+      console.log(this.name)
+    }, 300)
+    window.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>