call、apply、bind

69 阅读2分钟

在JavaScript中,call、apply、bind都是用来改变函数的this指向的方法。

call

call方法的语法格式如下:fun.call(thisArg, arg1, arg2, ...)

其中,thisArg表示函数中this的指向,arg1、arg2、...表示函数的参数。

call方法的作用是将函数中的this指向thisArg,并且立即执行该函数。

例如:

const obj = {
  name: "Tom",
  sayName() {
    console.log(this.name);
  },
};

const obj2 = {
  name: "Jerry",
};

obj.sayName.call(obj2); // 输出:Jerry

在上面的代码中,我们定义了一个对象obj,该对象有一个方法sayName,该方法用来输出对象的name属性。

然后,我们定义了另一个对象obj2,该对象有一个name属性。

最后,我们使用call方法将obj中的sayName方法中的this指向obj2,并且立即执行该方法,输出obj2的name属性。

apply

apply方法的语法格式如下:fun.apply(thisArg, [argsArray])

其中,thisArg表示函数中this的指向,argsArray表示函数的参数数组。

apply方法的作用和call方法类似,将函数中的this指向thisArg,并且立即执行该函数。只是它的参数是一个数组。

例如:

const arr = [1, 2, 3];

console.log(Math.max.apply(null, arr)); // 输出:3

在上面的代码中,我们定义了一个数组arr,然后使用apply方法将Math.max方法中的this指向null,并且将arr作为参数传入,返回数组中的最大值。

bind

bind方法的语法格式如下:fun.bind(thisArg, arg1, arg2, ...)

其中,thisArg表示函数中this的指向,arg1、arg2、...表示函数的参数。

bind方法的作用是将函数中的this指向thisArg,并且返回一个新的函数,该函数的this指向被绑定为thisArg。

例如:

const obj = {
  name: "Tom",
  sayName() {
    console.log(this.name);
  },
};

const obj2 = {
  name: "Jerry",
};

const sayName = obj.sayName.bind(obj2);
sayName(); // 输出:Jerry

在上面的代码中,我们定义了一个对象obj,该对象有一个方法sayName,该方法用来输出对象的name属性。

然后,我们定义了另一个对象obj2,该对象有一个name属性。

最后,我们使用bind方法将obj中的sayName方法中的this指向obj2,并且返回一个新的函数sayName,该函数的this指向被绑定为obj2。

最后,我们调用sayName方法,输出obj2的name属性。

总结

综上所述,call、apply、bind都是用来改变函数的this指向的方法,它们的区别在于传入参数的不同,call和apply是立即执行函数,而bind是返回一个新的函数。