lovecoding
/
web0331


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
							<!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: #0f0;
      }
    </style>
  </head>
  <body>
    <!-- 
        箭头函数:()=>{代码块...}
        特点：
            1.普通函数中this指向window 箭头函数this指向的是上级作用域
            2.箭头函数中没有arguments
            3.普通函数中this指向可以修改 箭头函数中this指向不能修改
            4.箭头函数中代码块中只有一条语句 可以省略代码块
            5.箭头函数不可以使用new
    --> 
    <div id="box"></div>
    <button id="btn">点击</button>
    <script>
      var box = document.getElementById("box");
      var btn = document.getElementById("btn");
      // 普通函数
      // function fn1() {

      // }
      // fn1()
      // 匿名函数
      //    let aa = function() {

      //     }
      //     aa();
      // 立即执行函数
      // (function() {
      //     console.log("你好")
      // })()
      let obj = {
        name:"图图"
      }
      function fn1() {
        console.log(this.name);
        console.log(arguments);
      }
      console.log(new fn1(),'普通')
    //   fn1.call(obj);
      // 箭头函数
      let fn2 = () =>  console.log(this.name,'箭头函数');
        // console.log("好好好", ...rest);
      ; 
    //   fn2.call(obj);
    //   fn2('你好');
      console.log(new fn2(),'箭头')
      btn.onclick = function () {
        console.log(this);
        setTimeout(function () {
          let fn3 = () => {
            console.log("我好", this);
          };
          fn3();
        }, 2000);
      };
    </script>
  </body>
</html>