修改this的指向实现方法

改变this指向的方法 call、apply、bind、箭头函数

call apply bind 的区别

共同点：

call apply bind 箭头函数都可以改变this的指向（箭头函数也可以改变this的指向因为箭头函数没有this指向他的this和它的外层作用域保持一致）

区别：

1.call和apply的第一个参数都可以调用函数，方法内的第一个参数都可以修改this的指向而bind不可以调用函数（call apply this指向改变后调用一次后就不再改变this的指向了）

2.call除了第一个参数其他参数也可以作为实参传递给函数而apply只有两个参数第二个参数是数组，数组的每一项可以作为实参传递给函数（call this指向改变后调用一次后就不再改变this的指向了）

3.bind不可以调用函数它会创建一个副本函数并且绑定新的函数 this指向bind返回的新函数（bind this改变一次终身可用）

<body>
    <script>
      // 函数名.call(第一个参数,参数二，参数三)
      // 作用立即执行函数
      // 第一个参数可以改变this的指向
      const obj = {
        name: "zs",
        age: 7,
      };

      function fun(a, b) {
        console.log(this); //原本普通函数this指向window 修改this的指向后 指向call的第一个参数obj {name: 'zs', age: 7}
        console.log(a + b);
      }
      fun.call(obj, 1, 4); //call除了第一个参数其他参数也可以作为实参传递给函数
    </script>
  </body>

  <body>
    <script>
      const obj = {
        name: "zs",
        age: 7,
      };

      function fun(a, b) {
        console.log(this); //原本this指向window apply第一个参数修改this指向后现在指向obj{name: 'zs', age: 7}obj
        console.log(a + b); //3
      }
      // apply(第一个参数可以改变this指向，第二个参数必须是数组)
      //可以立即调用函数 第一个参数可以改变this指向，第二个参数必须是数组
      fun.apply(obj, [1, 2]);

      // 举例
      let arr = [1, 5, 8, 9];
      // console.log(Math.max(...arr));
      console.log(Math.max.apply(null, arr)); //apply只有两个参数 第二个参数是数组，数组的每一项可以作为实参传递给函数
      console.log(Math.max.apply(Math, arr));
    </script>
  </body>

 <body>
    <button>发送短信</button>
    <script>
      const obj = {
        name: "zs",
        age: 7,
      };

      function fun(a, b) {
        console.log(this); //原本this指向windowbind返回值是改变this之后的函数obj
        console.log(a + b); //5
      }
      const fn = fun.bind(obj, 1, 4, 6); //返回值是改变this之后的函数
      fn();
      // bind 不会立即调用函数
      // 返回值是改变this之后的函数
      // 需求：点击按钮 过两秒后才能点击
      const btn = document.querySelector("button");
      btn.addEventListener("click", function () {
        // 立即不让点击
        this.disabled = true;
        console.log(1);
        // 定时器两秒后可以点击
        // 方法1
        // setTimeout(function () {
        //   btn.disabled = false;
        // }, 2000);
        //  方法2y=优化成箭头函数
        // setTimeout(() => {
        //   this.disabled = false;
        // }, 2000);
        // 方法3
        setTimeout(
          function () {
            this.disabled = false;
          }.bind(btn),
          2000
        );
      });
    </script>
  </body>