我攻克的技术难题：JS中改变this的指向：call()、apply()、bind()

原创

用户10637692

发布于 2024-01-23 19:30:50

2901

发布于 2024-01-23 19:30:50

文章被收录于专栏：前端前端

3种动态指定普通函数中this的指向的方法：call（）、apply（）、bind（）

在之前的学习中，我发现在学习了很多JS方法后，却没有真正的应用起来或者是理解什么时候需要使用这些方法，导致自己很快就遗忘自己所学过的知识。

所以在以后的笔记中，我都会添加这些所学知识的应用场景。

⛳call（）

语法

fun.apply(this.Arg, arg1, arg2, ...)

this.Arg: 在fun函数运行时指定的this值
arg1, arg2: 传递的其他参数
返回值就是函数的返回值，因为它就是调用函数

  const obj = {
    age: 18
  }
  function fn(x, y) {
    console.log(this)
    console.log(x + y)
  }
  fn.call(obj, 1, 2)

应用场景

call()方法目前主要应用于实现继承

  function Person(uname, age, sex) {
    this.uname = uname;
    this.age = age;
    this.sex = sex
  }
  function Student(id, uname, age, sex) {
    this.stuId = id
    Person.call(this, uname, age, sex)
  }

  let StudentA = new Student('111', '小明', 16, '男')
  console.log(StudentA);

编辑

⛳apply（）

语法

fun.apply(this.Arg,argsArray)

this.Arg: 在fun函数运行时指定的this值
argArray：传递的值，必须包含在数组里面
返回值就是函数的返回值，因为它就是调用函数

  const obj = {
    age: 18
  }
  function fn(x, y) {
    console.log(this)
    console.log(x + y)
  }
  fn.apply(obj, [1, 2])

应用场景

经常和数组有关，比如借助于数组对象实现求数组最大最小值

  const arr = [100, 22, 23]
  const max = Math.max.apply(Math,arr)
  console.log(max) //100

⛳bind（）

语法

fun.bind(this.Arg, arg1, arg2, ...)

this.Arg: 在fun函数运行时指定的this值
arg1, arg2: 传递的其他参数
返回值是指定的this值和初始化参数改造的原函数拷贝（新函数）

  const obj = {
    age: 18
  }
  function fn() {
    console.log(this)
  }
  const fun = fn.bind(obj)
  console.log(fun)

应用场景

只想改变this指向，并且不想调用这个函数的

比如改变定时器内部的this指向：如果有一个按钮，当我们点击了之后就禁用这个按钮，2秒钟之后又开启这个按钮

<body>
  <button>
    发送验证码
  </button>
</body>

<script>
  const btn = document.querySelector('button')
  btn.addEventListener('click', function () {
    this.disabled = true
    window.setTimeout(function () {
      // 在这个普通函数里面，我们要this由原来的window 改成 btn
      this.disabled = false
    }.bind(btn), 2000)    //bind(btn) 等价于 bind(this)
  })
</script>