this指向

  在使用 JavaScript 时，this 的指向常常需要通过不同的方法进行绑定。常见的三种方法包括 apply、bind 和 call，它们的作用是将函数的 this 指向明确地绑定到特定的对象上。每种方法有其适用场景和特点，了解它们的区别和使用方法，有助于更好地控制函数执行时的上下文。以下是三种方法的详细介绍及其使用场景。

代码片段：20241119_改变this指向

apply

• 语法：函数.apply( this指向, [函数参数] )
• 应用：适合需要将函数参数列表动态传递的场景，比如从数组中解构参数。

function opFn(arg1, arg2) {
  console.log(this)
  console.log(arg1, arg2)
}

const thisObj = {name:"allen"}

opFn.apply(thisObj,[1,2])

call

• 语法：函数.call( this指向, 函数参数1, 函数参数2, ... )
  （与 apply 唯一的区别就是函数参数的传递方式，是逐个列出还是以列表形式传递）
• 应用：适合参数固定的场景，直接传入参数列表。

function opFn(arg1, arg2) {
  console.log(this)
  console.log(arg1, arg2)
}

const thisObj = {name:"allen"}

opFn.call(thisObj,1,2)

bind

• 语法：函数.bind( this指向, 函数参数1, 函数参数2, ... )
• 特点：不会立即调用这个函数，而是返回一个新函数，这个函数的 this 指向已被永久绑定为指定值。
• 应用：可以用于创建带有固定上下文的函数，或者应用于需要提前绑定部分参数的情况。
• 备注：我个人很喜欢用它来给onClick来绑定回调函数，因为他返回的是函数，而不是立即执行的结果。

function opFn(arg1, arg2) {
  console.log(this)
  console.log(arg1, arg2)
}

const thisObj = {name:"allen"}

const bindFn = opFn.bind(thisObj,1,2)
bindFn()

小结

特性	apply	call	bind
是否立即调用	是	是	否
参数形式	数组或类数组（[arg1, arg2]）	逐个列出（arg1, arg2）	逐个列出（可绑定部分参数）
返回值	函数调用的返回值	函数调用的返回值	返回一个绑定 this 的新函数
使用场景	参数已是数组形式	参数固定且逐个列出	创建新函数并绑定 this 供后续调用