在JS中，函数也是对象——用好call，apply和bind三个方法

2023-12-21 16:30:18

JavaScript 中，函数本身也是对象，函数对象有自己的构造函数Function，call、apply和bind三个方法定义在Function.prototype上。我们将函数定义后，它就是一个Fun对象，除了常规的属性和方法外，它还有三套方法call、apply和bind。三者都是用来操控函数调用的方式，以便在不同的上下文环境中调用函数。

1. call

function func() {
  console.log(this);
}

func(); // this 指向 window

var obj = {
  name: '张三'
};

func.call(obj); // this 指向 obj

call方法接收两个参数，第一个是this指向的对象，第二个参数是函数调用时要传递的参数。call方法会立即执行函数，并且this指向第一个参数所指向的对象。

2. apply

function func() {
  console.log(this);
}

func(); // this 指向 window

var obj = {
  name: '张三'
};

var args = [obj];

func.apply(null, args); // this 指向 obj

apply方法与call方法类似，但是apply方法接收一个参数数组，而call方法接收单个参数。apply方法会立即执行函数，并且this指向第一个参数所指向的对象。

3. bind

function func() {
  console.log(this);
}

func(); // this 指向 window

var obj = {
  name: '张三'
};

var boundFunc = func.bind(obj);

boundFunc(); // this 指向 obj

bind方法与call和apply方法不同，它不会立即执行函数，而是返回一个新的函数。当我们调用这个新函数时，this指向第一个参数所指向的对象。

总结

call、apply和bind三个方法都是用来操控函数调用的方式，以便在不同的上下文环境中调用函数。

call方法接收两个参数，第一个是this指向的对象，第二个参数是函数调用时要传递的参数。call方法会立即执行函数，并且this指向第一个参数所指向的对象。
apply方法与call方法类似，但是apply方法接收一个参数数组，而call方法接收单个参数。apply方法会立即执行函数，并且this指向第一个参数所指向的对象。
bind方法与call和apply方法不同，它不会立即执行函数，而是返回一个新的函数。当我们调用这个新函数时，this指向第一个参数所指向的对象。