面试题准备（八）：call、apply 和 bind

作用

改变this 指向

• 具体来说，call 和 apply 改变的是函数执行时的执行期上下文
• 调用者只能是函数 function

区别

主要区别是 传参数的形式不同

call

Function.call(obj, param1, param2, ...)

1. 第一个参数：传入一个 function，表示调用目标函数的函数
2. 第二个及以后的参数：表示将要传入目标函数的参数

// 测试狗拿耗子
function Cat(name) {
	this.name = name
	this.catchRats = function(num, size) {
		console.log(`${this.name} 抓到了 ${num} 只${size}老鼠`)
	}
}

function foo() {
	console.log(`${this.name} 多管闲事`)
}

function Dog(name) {
	this.name = name
}

var cat = new Cat('猫')
var dog = new Dog('狗')
cat.catchRats.call(dog, 3, '大') // 测试调用对象中的函数
foo.call(dog) // 测试普通函数

• 测试结果
  

apply

Function.apply(obj, [param1, param2, ...])

1. 第一个参数：传入一个 function，表示调用目标函数的函数
2. 第二个参数：一个数组，表示将要传入目标函数的参数

// 再测狗拿耗子
function Cat(name) {
	this.name = name
	this.catchRats = function (num, size) {
		console.log(`${this.name} 又抓到了 ${num} 只${size}老鼠`)
	}
}

function foo() {
	console.log(`${this.name} 又多管闲事`)
}

function Dog(name) {
	this.name = name
}

var cat = new Cat('猫')
var dog = new Dog('狗')
cat.catchRats.apply(dog, [3, '大'])
foo.apply(dog)

bind

与 call 和 apply 的区别是，bind 不会立即执行函数，而是返回一个函数引用

Function.bind(obj, param1, param2, ...)

// 还测狗拿耗子
function Cat(name) {
	this.name = name
	this.catchRats = function (num, size) {
		console.log(`${this.name} 双抓到了 ${num} 只${size}老鼠`)
	}
}

function foo() {
	console.log(`${this.name} 双多管闲事`)
}

function Dog(name) {
	this.name = name
}

var cat = new Cat('猫')
var dog = new Dog('狗')

var dogCatch = cat.catchRats.bind(dog, 4, '小')
dogCatch()
var dogComment = foo.bind(dog)()

总结

• call、apply 和 bind 的主要作用，都是改变当前对象的执行期上下文
• 区别是，call 和 apply 是立即执行的，只在参数传递方式上有区别，而 bind 返回一个函数引用，需要加上执行符号才能执行