this的指向

一、this的指向分类

分类	this指向
普通函数	window
构造函数	实例对象，原型对象里面的方法也指向实例对象
对象方法	该方法所属对象。若对象中的方法为普通函数写法吗，则this指向该方法所属对象，若为箭头函数，则this指向为window
事件绑定函数	绑定事件对象
定时器	window
立即执行函数	window
箭头函数	外层作用域中的this（且this指向不可改变）

二、改变函数内部this指向

1.函数名称.call（this要指向的，传递的参数1，...）

• 调用函数，并改变this指向。

  var obj = {
      name: 'zs',
      age: 18
  }
  function fn (a, b) {
      console.log(this)	// this指向obj这个对象
      console.log(a + b)	// 6
  }
  fn.call(obj, 1, 5)
  

2.函数名.apply（this要指向的，[传递的参数1，...]）

• 调用函数，并改变this指向，传递的参数必须是数组。

  var arr = [1, 88, 0, 34, 171, 23]
  // 利用apply传递数组（伪数组），借助数学内置对象求数组最大值/最小值
  var max = Math.max.apply(Math, arr)
  console.log(max)	// 171
  var min = Math.min.apply(Math, arr)
  console.log(min)	// 0
  

3.函数名.bind（this要指向的，传递的参数1，...）

• 不调用函数，但改变this指向，调用需要fn.bind(...)( )。

  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <script>
  	// 获取所有的按钮元素
      let btns = document.querySelectorAll('button')
      for (let i = 0; i < btns.length; i++) {
          btns[i].addEventListener('click', function () {
              // 点击后禁用按钮
              this.disabled = true
              setTimeout(function () {
                  // 2秒后解除禁用该按钮
                  this.disable = false
              }.bind(this), 2000)
          })
      }
  </script>