this的指向

1|0一、this的指向分类

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

2|0二、改变函数内部this指向

2|11.函数名称.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|22.函数名.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
  

2|33.函数名.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>
  

__EOF__

本文作者：不见水星记
本文链接：https://www.cnblogs.com/P1Kaj1uu/p/16888025.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！