js中apply、bind、call的用法和区别

先来看一下 this 的指向问题：

var name = '小王', age = 12;
const obj = {
	name: '小李',
	objAge: this.age,
	info: function () {
		console.log(this.name + '的年龄是：' + this.age)
	}
}
console.log(obj.name, obj.objAge)
obj.info()

输出结果：

小李 12
小李的年龄是：undefined

解析：

• 在 obj 中的 objAge: this.age 中的 this 指向的是 window，所以获取的结果是 12
• 在 obj.info() 调用时， this 指向的是 obj，调用 this.age 值为 undefined

var name = '小张'
function showName() {
	console.log(this)
	console.log(this.name)
}
showName()

输出结果：

Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
小张

解析：

• 在全局环境中： this 指向的都是全局对象，window 对象即是全局对象
• 在函数环境中：this 指向的是最终调用它的那个对象

js中如何使 this 的指向改变

使用 apply、bind 和 call 方法来改变 this 的指向

apply() 的用法

将一个对象作为 apply 的第一个参数，this 将会绑定到这个参数对象上，其他参数都要放进数组中
语法：

fn.apply(target, [aparam1, param2, ... , paramn])

实例：

// 通过 apply() 将 this 指向的 window 对象，重新指向到 obj 对象
var name = '小张'
var obj = { name: '小王' }
function info() {
	console.log(this.name)
}
info() // 小张
info.apply(obj) // 小王

// 通过 apply() 将 this 指向的 obj 对象，重新指向到 db 对象
const obj = {
	name: '小李',
	age: 33,
	info: function () {
		console.log(this.name + '的年龄是：' + this.age)
	}
}
const db = {
	name: '小丽',
	age: 22
}
obj.info.apply(db) //小丽的年龄是：22

// apply() 传递参数的形式
const obj = {
	name: '小李',
	age: 33,
	info: function (param1, param2) {
		console.log(this.name + '的年龄是：' + this.age + '，喜欢' + param1 + '和' + param2)
	}
}
const db = {
	name: '小丽',
	age: 22
}
obj.info.apply(db, ['香蕉','冰淇淋']) //小丽的年龄是：22，喜欢香蕉和冰淇淋

bind() 的用法

第一格参数为 this 的指向对象，调用 fn.bind(target) 会创建一个与 ``fn 相同的函数体和作用域的函数，但是，在这个新函数中，this 将被永久地绑定到了 bind 的第一个参数，不管函数是怎么调用的
语法：

fn.bind(target, param1, ... , param2)

注意：bind() 返回的是一个新的函数，你必须调用它才会被执行
实例：

// 通过 bind() 将 this 指向的 window 对象，重新指向到 obj 对象
var name = '小张'
var obj = { name: '小王' }
function info() {
	console.log(this.name)
}
info() // 小张
// bind() 返回的是一个新函数，必须调用它才会被执行
info.bind(obj)() // 小王

// 通过 bind() 将 this 指向的 obj 对象，重新指向到 db 对象
const obj = {
	name: '小李',
	age: 33,
	info: function () {
		console.log(this.name + '的年龄是：' + this.age)
	}
}
const db = {
	name: '小丽',
	age: 22
}
obj.info.bind(db)() //小丽的年龄是：22

// bind() 传递参数的形式
const obj = {
	name: '小李',
	age: 33,
	info: function (param1, param2) {
		console.log(this.name + '的年龄是：' + this.age + '，喜欢' + param1 + '和' + param2)
	}
}
const db = {
	name: '小丽',
	age: 22
}
obj.info.bind(db, '香蕉','冰淇淋')() //小丽的年龄是：22，喜欢香蕉和冰淇淋

call() 的用法

将一个对象作为 call() 的第一个参数，this 将会被绑定到这个参数对象上
语法：

fn.call(target, param1, ... , paramn)

实例：

// 通过 call() 将 this 指向的 window 对象，重新指向到 obj 对象
var name = '小张'
var obj = { name: '小王' }
function info() {
	console.log(this.name)
}
info() // 小张
info.call(obj) // 小王

// 通过 call() 将 this 指向的 obj 对象，重新指向到 db 对象
const obj = {
	name: '小李',
	age: 33,
	info: function () {
		console.log(this.name + '的年龄是：' + this.age)
	}
}
const db = {
	name: '小丽',
	age: 22
}
obj.info.call(db) //小丽的年龄是：22

// call() 传递参数的形式
const obj = {
	name: '小李',
	age: 33,
	info: function (param1, param2) {
		console.log(this.name + '的年龄是：' + this.age + '，喜欢' + param1 + '和' + param2)
	}
}
const db = {
	name: '小丽',
	age: 22
}
obj.info.call(db, '香蕉','冰淇淋') //小丽的年龄是：22，喜欢香蕉和冰淇淋

区别

• apply()、bind()、call() 都可以用来改变 this 的指向问题
• apply() 传递的参数形式是 [param1, ... , paramn] ，bind() 和 call() 传递的参数是 (param1, ... , paramn)
• bind() 会返回一个新函数，必须调用它才会执行