前端面试题——bind()、apply()、call()的区别和用法

前言

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 则是立即执行