822笔记（this指向改变，闭包）

改变函数内this指向

call

call调用函数，可以简单理解成调用函数的方式，可以改变函数内的this指向

​ 场景：做继承

 var o = {
        name: 'lucy',
      }
      function fn(a, b) {
        console.log(this)
        console.log(a + b)
      }
      // call第一可以调用函数  第二可以改变this指向
      fn.call(o, 2, 4)

      function Father(name, age, sex) {
        this.name = name
        this.age = age
        this.sex = sex
      }

      function Son(name, age, sex) {
        Father.call(this, name, age, sex)
      }
      var son = new Son('ldh', 45, '男')
      console.log(son)

apply

apply方法调用一个函数，可以简单理解成调用函数的方式，可以改变函数内的this指向

场景：跟数组有关系

   /* 
   apply  应用的意思
    */
      var o = {
        name: 'lucy',
      }
      function fn(arr, arr1, arr2) {
        console.log(this)
        console.log(arr, arr1, arr2) //1,2,3
      }
      fn.apply(o, [1, 2, 3])

      /* 
      可以调用函数  还可以改变this指向
      它的参数必须是数组(伪数组)
      apply的主要应用，可以使用apply借助于数学内置对象求数组最大值
      Math.max()
      */
      var arr = [1, 33, 55, 34, 23, 12]
      var arr1 = ['red', 'pink']
      var max = Math.max.apply(Math, arr) //Math.max(1, 33, 55, 34, 23, 12)
      // var max = Math.max(34, 23, 45, 23)
      console.log(max)
      var min = Math.min.apply(Math, arr)
      console.log(min)

bind

bind方法不会调用函数，但是能改变函数内this指向，返回的是原函数改变this之后产生的新函数

如果只是想改变this指向，并且不想调用这个函数 可以使用bind

场景：不调用函数可以改变this指向

  <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <script>
      /* 
  bind 绑定 捆绑意思
    */
      var o = {
        name: 'lucy',
      }
      function fn(a, b) {
        console.log(this)
        console.log(a + b)
      }

      var f = fn.bind(o, 34, 3)
      // console.log(f)
      f()

      /* 
          不会调用原来的函数，但是可以改变函数内部this指向
          返回的是原函数改变this之后产生的新函数
      
      */

      // 有一个按钮，我们点击了按钮，禁用了按钮，3秒后要开启按钮

      var btnArr = document.querySelectorAll('button')
      for (var i = 0; i < btnArr.length; i++) {
        btnArr[i].onclick = function () {
          this.disabled = true
          setTimeout(
            function () {
              this.disabled = false
            }.bind(this),
            3000
          )
        }
      }

闭包

作用域复习

变量根据作用域的不同分为两种：全局变量 局部变量

函数内部可以使用全局变量

函数外部不可以使用局部变量

函数执行完毕，本作用域内的局部变量会销毁

什么是闭包

闭包是有权访问另一个函数作用域中变量的函数，简单理解就是一个作用域可以访问另外一个函数内部的局部变量

  // 闭包是有权访问另一个函数作用域中变量的函数
      // 我们fun这个函数作用域，访问了另外一个函数fn里面的局部变量 num

      function fn() {
        //fn是闭包函数
        var num = 10
        function fun() {
          console.log(num) //10
        }
        fun()
      }
      fn()

闭包的作用

延伸了变量的作用范围

 // 闭包的作用
      // 闭包是有权访问另一个函数作用域中变量的函数**，简单理解就是一个作用域可以访问另外一个函数内部的局部变量
      // 我们fn  外面的作用域可以访问fn内部的局部变量
      // 作用：延伸了变量的作用范围

      function fn() {
        var num = 10
        function fun() {
          console.log(num)
        }
        return fun
      }

      var f = fn()
      f()

      // 类似于

      // var f = function(){
      //   console.log(num)
      // }