call、apply、bind的作用与区别

前言

• call、apply、bind 被称之为 this 的强绑定，用来改变函数执行时的 this 指向，目前所有关于它们的运用，都是基于这一点来进行的

apply()

• apply()方法接收两个参数：一个是在其中运行函数的作用域，另一个是参数数组。其中，第二个参数可以是 Array 的实例，也可以是 arguments 对象

function sum(num1, num2) {
  return num1 + num2
}
function callSum1(num1, num2) {
  return sum.apply(this, arguments) // 传入 arguments 对象
}
function callSum2(num1, num2) {
  return sum.apply(this, [num1, num2]) // 传入数组
}
console.log(callSum1(10, 10)) //20
console.log(callSum2(10, 10)) //20

call()

• call()方法与 apply()方法的作用相同，它们的唯一区别在于接收参数的方式不同。在使用 call()方法时，传递给函数的参数必须逐个列举出来

function sum(num1, num2) {
  return num1 + num2
}
function callSum(num1, num2) {
  return sum.call(this, num1, num2)
}
console.log(callSum(10, 10)) //20

• call()方法与 apply()方法返回的结果是完全相同的，至于是使用 apply()还是 call()，完全取决于你采取哪种给函数传递参数的方式最方便

• 参数数量：顺序确定就用 call，顺序不确定的话就用 apply
• 考虑可读性：参数数量不多就用 call，参数数量比较多的话，把参数整合成数组，使用 apply

bind()

• bind()方法会创建一个函数的实例，其 this 值会被绑定到传给 bind()函数的值。意思就是 bind() 会返回一个新函数

window.color = 'red'
var o = { color: 'blue' }
function sayColor() {
  alert(this.color)
}
var objectSayColor = sayColor.bind(o)
objectSayColor() //blue

call、apply 与 bind 的区别

• 执行：
  • call/apply 改变了函数的 this 上下文后马上执行该函数
  • bind 则是返回改变了上下文后的函数,不执行该函数

function add(a, b) {
  return a + b
}

function sub(a, b) {
  return a - b
}

add.bind(sub, 5, 3) // 这时，并不会返回 8
add.bind(sub, 5, 3)() // 调用后，返回 8

• 返回值：
  • call、apply 返回 fun 的执行结果
  • bind 返回 fun 的拷贝，并指定了 fun 的 this 指向，保存了 fun 的参数

call、apply、bind的核心理念

• 从上面几个简单的例子可以看出 call、apply、bind 是在向其他对象借用方法，A 对象有个方法，B 对象因为某种原因也需要用到同样的方法，这时候就可以让 B 借用 A 对象的方法啦，既达到了目的，又节省了内存