Home Esplora Aiuto
Accedi
lovecoding
/
W250913
10
0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Sfoglia il codice sorgente

复习

zheng 20 ore fa
parent
ff710a386d
commit
d49d2a3e83
2 ha cambiato i file con 88 aggiunte e 0 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 57 0
      11.复习/3.this指向.html
  2. 31 0
      11.复习/4.修改this指向.html

+ 57 - 0
11.复习/3.this指向.html
Vedi File 

@@ -0,0 +1,57 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        #box {
 
+            width: 300px;
 
+            height: 300px;
 
+            background: #f00;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div id="box"></div>
 
+    <script>
 
+        let box = document.getElementById("box");
 
+        // 1.点击事件 this指向当前对象
 
+        // box.onclick = function() {
 
+        //     console.log(this); 
+        // }
 
+        // 2.定时器 this指向window
 
+        // setInterval
 
+        // setTimeout(() => {
 
+        //     console.log(this)
 
+        // },3000)
 
+        // box.onclick = function () {
 
+        //     setInterval(function(){
 
+        //         console.log(this)
 
+        //     }, 1000)
 
+        // }
 
+        // 3. 对象中 
+        /**
 
+         * this指向
 
+         * 普通函数 指向调用本身
 
+         * 箭头函数 指向上下文
 
+        */
 
+        // let obj = {
 
+        //     aa:1,
 
+        //     bb:2,
 
+        //     cc:()=> {
 
+        //         console.log(this);
 
+        //     }
 
+        // }
 
+        // obj.cc();
 
+        // 4.普通函数 this指向window
 
+        function fn1() {
 
+            console.log(this)
 
+        }
 
+        fn1();
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 31 - 0
11.复习/4.修改this指向.html
Vedi File 

@@ -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>
 
+        let obj = {
 
+            name: '图图'
 
+        }
 
+        function fn1(x,y) {
 
+            const sum = x + y;
 
+            console.log(sum,'sum')
 
+            console.log(this,'this');
 
+            console.log(this.name,'name')
 
+        }
 
+        // fn1.call(obj,2,3);
 
+        // fn1.apply(obj,[2,3]);
 
+        fn1.bind(obj,2,3)();
 
+        
+        /**
 
+         * call bind apply
 
+         * 1.call和apply可以直接调用，bind无法直接调用
 
+         * 2.call和bind第二项开始 参数逐个传入
 
+         * 3.apply第二项开始 参数需要放到数组中逐个传入
 
+        */
 
+    </script>
 
+</body>
 
+</html>