前言
this的指向问题往往是许多前端初学者会碰到的一大难题,按一般的规则来说是调用谁this就指向谁,不过本文并不细究this指向问题,而是三个十分重要的能改变this指向的方法。
bind()
第一参数是 this 的指向,后其余参数包括后面执行函数时传入的参数依次被原函数使用(柯里化)。改变 this 指向后不会立即执行,而是返回一个永久改变 this 指向的函数。
function.bind(thisArg,arg1, arg2,...)
let obj1 = {
name: "张三",
age: 24,
user: function (arg1, arg2) {
console.log("姓名:", this.name);
console.log("年龄:", this.age);
console.log("参数:", arg1, arg2);
}
}
let obj2 = {
name: "李四",
age: 30,
user: function (args) {
console.log("姓名:", this.name);
console.log("年龄:", this.age);
console.log("参数", args);
}
}
const func = obj1.user.bind(obj2, "我是参数1");
func("我是参数2")
//打印结果:
//姓名:"李四"
//年龄:"30"
//参数:"我是参数1" "我是参数2"
apply()
apply() 接受两个参数,第一个参数是 this 的指向,第二个参数是函数接受的参数,以数组的形式传入,改变 this 指向后原函数会立即执行,且此方法只是临时改变 this 指向一次。
function.apply(thisArg, [argsArray])
let obj1 = {
name: "张三",
age: 24,
user: function (args) {
console.log("姓名:", this.name);
console.log("年龄:", this.age);
console.log("参数", args);
}
}
let obj2 = {
name: "李四",
age: 30,
user: function (args) {
console.log("姓名:", this.name);
console.log("年龄:", this.age);
console.log("参数", args);
}
}
obj1.user.apply(obj2, ["我是参数"]);
//打印结果:
//姓名:"李四"
//年龄:"30"
//参数:"我是参数"
call()
function.call(thisArg, arg1, arg2, ...)
let obj1 = {
name: "张三",
age: 24,
user: function (args) {
console.log("姓名:", this.name);
console.log("年龄:", this.age);
console.log("参数", args);
}
}
let obj2 = {
name: "李四",
age: 30,
user: function (args) {
console.log("姓名:", this.name);
console.log("年龄:", this.age);
console.log("参数", args);
}
}
obj1.user.call(obj2, "我是参数");
//打印结果:
//姓名:"李四"
//年龄:"30"
//参数:"我是参数"
三者的区别
从上面可以看到 apply、call、bind 三者的区别在于:
- 三者都可以改变函数的 this 对象指向
- 三者第一个参数都是 this 要指向的对象,如果如果没有这个参数或参数为 undefined或 null 则默认指向全局 window
- 三者都可以传参,但是 apply 是数组,而 call 是参数列表,且 apply 和 call 是一次性传入参数,而 bind 可以分为多次传入
- bind 返回绑定this之后的函数, call 和 apply 则是立即执行