fengchuanyu 4 months ago
parent
commit
8521737e5f
2 changed files with 162 additions and 3 deletions
  1. 8 3
      6_ES6/16_this指向.html
  2. 154 0
      6_ES6/练习题4_this指向解答.html

+ 8 - 3
6_ES6/16_this指向.html

@@ -49,16 +49,21 @@
         // window.setTimeout(function(){
         //     console.log(this);
         // },1000)
-
-        let obj = {
+        var age = 19;
+        var obj = {
             name: '张三',
             age:18
         }
-        var age = 19;
         function foo(a){
             console.log(this.age,a);
         }
         // foo("hello");
+
+        // foo.call(obj,"hello");
+        // foo.apply(obj,["hello"]);
+        var foo2 = foo.bind(obj,"hello");
+        foo2();
+
         // call 可以改变this指向 参数有多个 第一个是this指向新对象 后面的参数是传入foo的参数
         // foo.call(obj,"hello");
         // apply 可以改变this指向 参数只有两个 第一个是this指向新对象 第二个是数组 里面是传入foo的参数

+ 154 - 0
6_ES6/练习题4_this指向解答.html

@@ -0,0 +1,154 @@
+<!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>
+        //1、写出下列输出结果
+        // var x = 10;
+        // function test() {
+
+        //     this.x = 20 // this指向window  this.x = 20  window.x = 20
+        //     console.log(this.x)// 20
+        // }
+        // test()
+
+        //2、写出下列输出结果
+        // var name = "window"
+        // var obj = {
+        //     name: "obj",
+        //     func1: function () {
+        //         console.log(this.name);//    obj
+        //         (function () {
+        //             console.log(this.name)// window
+        //         })()
+        //         // function func2() {
+        //         //     console.log(this.name);
+        //         // }
+        //         // func2();
+        //     }
+        // }
+        // obj.func1()
+
+        //3、写出下列结果
+        // var name = "the window";
+
+        // var object = {
+        //     name: "My Object",
+        //     getName: function () {
+        //         return this.name;
+        //     }
+        // }
+
+        // console.log(object.getName());// My Object
+        // console.log((object.getName)());// My Object
+        // console.log((object.getName = object.getName)());// the window
+
+
+        // (function(){
+        //     console.log(this)
+        // })()
+        // let a = 10;
+        // if(b = a ){
+        //     console.log("true");
+        // }else{
+        //     console.log("false");
+        // }
+
+        // var name = "the window"
+        // let obj = {
+        //     name: "obj",
+        //     func1: function () {
+        //         console.log(this.name);
+        //     }
+        // }
+        // let fun2 = obj.func1;
+        // fun2();
+
+        //4、下列代码中当div的点击事件触发时输出的结果是?
+        // document.getElementById("div").onclick = function () {
+        //     console.log(this)// div
+        // };
+
+        //5、请写出下列代码运行结果
+        // var name = "window"
+        // var obj = {
+        //     name: "obj"
+        // }
+        // window.setInterval(function () {
+        //     console.log(this.name)// window
+        // }, 300)
+        // window.setInterval(function () {
+        //     console.log(this.name)// obj
+        // }.bind(obj), 300)
+
+        // function foo(){
+        //     console.log("hello");
+        // }
+        // setInterval(foo,1000);
+
+        //6、请补全下列代码
+        // function foo() {
+        //     return function () {
+        //         console.log("hello world");
+        //     }
+        //     //补全此处代码实现每隔一秒输出 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
+        // }
+        // console.log(add.call(obj,3,4));
+        // console.log(add.apply(obj,[3,4]));
+        // let add2 = add.bind(obj,3,4);
+        // console.log(add2());
+
+
+        // var a = 1;
+        // var b = 2;
+        // console.log(add(3,4));
+
+        // let a = 10;
+        // console.log(this.a);
+
+
+        //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.bind(o);
+        o.f = independent;
+        //在此补全代码
+        console.log(o.f()); //  loveCoding
+    </script>
+</body>
+
+</html>