| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 |
- <!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: #00f;
- }
- </style>
- </head>
- <body>
- <div id="box">
- <ul>
- <li>你好</li>
- <li>你好</li>
- <li>你好</li>
- </ul>
- </div>
- <script>
- /**
- * 箭头函数
- * 1.this指向
- * 2.不能作为构造函数
- * 3.没有arguments对象
- * 适用场景:
- * 1.回调函数(需要保留外层的this)
- * 2.定时器的回调
- * 3.Promise的回调
- */
- let fn3 = () => {
- console.log(this,'2')
- // console.log(arguments)
- };
- fn3();
- // let fn4 = new fn3();
- // console.log(fn4)
- // let fn1 = function() {
- // console.log(this,'1')
- // };
- // let fn2 = () => {
- // console.log(this,'2')
- // };
- // fn1();
- // fn2();
- // let box = document.getElementById("box");
- // let lis = document.querySelectorAll("li");
- // // box.onclick = () => {
- // // console.log(this,'3')
- // // }
- // for(let i=0;i<lis.length;i++) {
- // lis[i].onclick = () => {
- // console.log(this,'4')
- // }
- // }
- // function Person() {
- // this.name = "图图";
- // this.age = 3;
- // console.log(this,'5')
- // setTimeout(() => {
- // console.log(this,'6')
- // },1000)
- // }
- // let p = new Person();
- // console.log(p.name,p.age)
- </script>
- </body>
- </html>
|