call、apply和bind的用法

在改变 this 指向的时候，经常会把这三个方法混淆，下面就详细的整理一下三者的用法和区别

call() 方法

• call() 方法可以有无数个参数
• 第一个参数是改变 this 指向的对象
• 后面的参数直接传递给函数的自身
• 使用后会自动执行

var a = {
  name: '张三'
}

var b = {
  name: '李四',
  sayName: function (a,b,c) {
    console.log(this.name, a+b+c)
  }
}

b.sayName.call(a, 1,2,3)
// 输出 --> 张三 6

apply() 方法

• apply() 方法只能由两个参数
• 第一个参数是改变 this 指向的对象
• 第二个参数必须是一个数组
• 使用后会自动执行

var a = {
  name: '张三'
}

var b = {
  name: '李四',
  sayName: function (a,b,c) {
    console.log(this.name, a+b+c)
  }
}

var arr = [1,2,3]

b.sayName.apply(a,arr)
// 输出 --> 张三 6

bind() 方法

• bind() 方法可以有无数个参数
• 第一个参数是改变 this 指向的对象
• 后面的参数直接传递给函数的自身
• 使用后不会自动执行，会返回一个新函数

var a = {
  name: '张三'
}

var b = {
  name: '李四',
  sayName: function (a,b,c) {
    console.log(this.name, a+b+c)
  }
}

var c = b.sayName.bind(a,1,2,3)
// 需手动调用新函数 c 才会执行
c()
// 输出 --> 张三 6

三个方法的共同点

• 第一个参数都为改变this指向的对象
• 在非严格模式下，若第一参数为null/undefined，this默认指向window
• 在严格模式下，若第一参数为null/undefined，this默认指向undefined

三个方法的区别

这里用一个表格来展示吧，可能看起来要稍微直观点

方法名	可含参数个数	是否自动执行
call	无数个	是
appy	两个，第二个必须为数组	是
bind	无数个	否，会返回一个新函数