call()/apply()/bind()

Mr.Liu大约 4 分钟

call()/apply()/bind()的区别及用法

call() (靠哦)、apply() (额普类)、bind() (白的) 都是用来改变this指向
第一个参数都是 this 的指向对象，如果没有这个参数或参数为undefined或null，则this指向全局的window。
传参的形式不同
- apply的参数要放在数组中传入
- call的参数是列表形式（以逗号分割）
- bind的参数可以是列表形式也可以是数组形式
- apply和call是一次性传入，而bind可以分两次传入
bind返回的是有指定的 this值和初始参数的原函数拷贝，便于稍后调用，apply、call则是立即调用。

call

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

语法

// thisArg: 可选,在 function 函数运行时使用的 this 值
// arg1, arg2, ... :可选: 指定的参数列表
function.call(thisArg, arg1, arg2, ...)

示例

let person1 = { 
  firstName: "John", 
  lastName : "Doe", 
  fullName: function (args1, args2) {
    // 在方法中，不改变this指向的情况下，this 表示该方法所属的对象，也就是person1
    return this.firstName + " " + this.lastName 
    + " " + args1 + " " + args2;
  } 
}
var person2 = { 
  firstName:"Tom", 
  lastName: "Liming", 
} 
let result = person1.fullName.call(person2, 'a', 'b')
console.log(result) // Tom Liming a b

apply

apply() 方法调用一个具有给定 this 值的函数，以及以一个数组的形式提供的参数。虽然这个函数的语法与 call() 几乎相同，但根本区别在于，call()接受一个参数列表，而 apply() 接受一个参数的单数组语法

// thisArg: 在 func 函数运行时使用的 this 值。
// argsArray: 可选，一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数。
apply(thisArg, argsArray)

示例

let person1 = { 
  firstName: "John", 
  lastName : "Doe", 
  fullName: function (args) {
    return this.firstName + " " + this.lastName 
    + " " + args[0] + " " + args[1];
  } 
}
var person2 = { 
  firstName:"Tom", 
  lastName: "Liming", 
}
let result = person1.fullName.call(person2, ['a','b'])
console.log(result) // Tom Liming a b

bind

bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用语法

bind(thisArg, arg1, arg2, /* …, */ argN)

示例

let person1 = { 
  firstName: "John", 
  lastName : "Doe", 
  fullName: function (args1, args2) {
    return this.firstName + " " + this.lastName 
    + " " + args1 + " " + args2;
  },
  getfullName: function (args) {
    return this.firstName + " " + this.lastName 
    + " " + args[0] + " " + args[1];
  } 
}
var person2 = { 
  firstName:"Tom", 
  lastName: "Liming", 
} 
let result1 = person1.fullName.bind(person2, 'a', 'b')()
let result2 = person1.getfullName.bind(person2, ['a','b'])()
// 参数分两次传入例子
let func = person1.fullName.bind(person2, 'hello')
// 执行返回函数
let result3 = func(['world'])
console.log(result1) // Tom Liming a b
console.log(result2) // Tom Liming a b
console.log(result3) // Tom Liming hello world

案例一

apply()是函数的一个方法，作用是改变函数的调用对象。它的第一个参数就表示改变后的调用这个函数的对象。因此，这时this指的就是这第一个参数。

var x = 0;
function test() {
  console.log(this.x);
}  
var obj = {};
obj.x = 1;
obj.m = test;
obj.m.apply() // 0

apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为0，证明this指的是全局对象。如果把最后一行代码修改为

obj.m.apply(obj); //1

运行结果就变成了1，证明了这时this代表的是对象obj。

案例二

var xw = {
  name : "小王",
  gender : "男",
  age : 24,
  say : function() {
    console.log(this.name+","+this.gender+",今年"+this.age);                               
  }
}
var xh = {
  name : "小红",
  gender : "女",
  age : 18
}
xw.say();

结果：小王，男，今年24

那么如何用xw的say方法来显示xh的数据呢。

对于call可以这样：

xw.say.call(xh);

对于apply可以这样：

xw.say.apply(xh);

而对于bind来说需要这样：

xw.say.bind(xh)();

如果直接写xw.say.bind(xh)是不会有任何结果的，看到区别了吗？call和apply都是对函数的直接调用，而bind方法返回的仍然是一个函数，因此后面还需要()来进行调用才可以。

那么call和apply有什么区别呢？我们把例子稍微改写一下。

案例三

var xw = {
  name : "小王",
  gender : "男",
  age : 24,
  say : function(school,grade) {
    console.log(this.name+","+this.gender+",今年"+this.age+",在"+school+"上"+grade);                                
  }
}
var xh = {
  name : "小红",
  gender : "女",
  age : 18
}

可以看到say方法多了两个参数，我们通过call/apply的参数进行传参。

对于call来说是这样的

xw.say.call(xh,"实验小学","六年级");

而对于apply来说是这样的

xw.say.apply(xh,["实验小学","六年级郑州牛皮癣医院"]);

看到区别了吗，call后面的参数与say方法中是一一对应的，而apply的第二个参数是一个数组，数组中的元素是和say方法中一一对应的，这就是两者最大的区别。

那么bind怎么传参呢？它可以像call那样传参

xw.say.bind(xh,"实验小学","六年级")();

但是由于bind返回的仍然是一个函数，所以我们还可以在调用的时候再进行传参。

xw.say.bind(xh)("实验小学","六年级");