攻克call、apply、bind，助你彻底理解函数调用

在JavaScript中，函数调用是一个非常基础的概念。但是，call、apply和bind这三个函数调用方法却让许多人感到困惑。本文将对它们进行详细的讲解，帮助你彻底理解函数调用。

call和apply

call和apply方法允许你以不同的值来调用函数。这对于你想在函数内部访问不同的this值或者传递不同的参数时非常有用。

call方法的语法如下：

Function.call(thisArg, arg1, arg2, ...)

apply方法的语法如下：

Function.apply(thisArg, [arg1, arg2, ...])

这两个方法都有两个参数：

• thisArg：要将函数的this值设置为的值。
• args：要传递给函数的参数。

call方法以逗号分隔的形式传递参数，而apply方法则以数组的形式传递参数。

下面是一个使用call方法的例子：

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet.call(null, "John"); // Hello, John!

在这个例子中，我们使用call方法来调用greet函数，并将this值设置为null。这意味着greet函数内部的this值将是null。

下面是一个使用apply方法的例子：

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet.apply(null, ["John", "Doe"]); // Hello, John Doe!

在这个例子中，我们使用apply方法来调用greet函数，并将this值设置为null。同时，我们将参数以数组的形式传递给greet函数。

bind

bind方法允许你创建一个新的函数，这个新函数的this值被绑定到了bind方法的第一个参数。这对于你想创建一个可以被其他对象调用的函数时非常有用。

bind方法的语法如下：

Function.bind(thisArg, arg1, arg2, ...)

bind方法有两个参数：

• thisArg：要将新函数的this值设置为的值。
• args：要传递给新函数的参数。

bind方法返回一个新的函数，这个新函数的this值被绑定到了bind方法的第一个参数。

下面是一个使用bind方法的例子：

function greet(name) {
  console.log(`Hello, ${name}!`);
}

const boundGreet = greet.bind(null, "John");

boundGreet(); // Hello, John!

在这个例子中，我们使用bind方法来创建一个新的函数boundGreet。boundGreet函数的this值被绑定到了null，这意味着boundGreet函数内部的this值将是null。

科里化

科里化是一个函数式编程的概念，它允许你将一个函数的多个参数拆分成多个函数调用。这对于你想创建一个可以被其他函数调用的函数时非常有用。

下面是一个使用科里化的例子：

function add(a, b) {
  return a + b;
}

const add10 = add.bind(null, 10);

console.log(add10(20)); // 30

在这个例子中，我们使用bind方法来创建一个新的函数add10。add10函数的this值被绑定到了null，同时，第一个参数也被绑定到了10。这意味着add10函数只需要一个参数，就可以返回a + 10的值。

阻止bind返回的函数通过new来实例化对象

bind返回的函数可以通过new关键字来实例化对象。这对于你想创建一个构造函数时非常有用。

但是，有时你可能不想让bind返回的函数可以通过new关键字来实例化对象。你可以通过以下方法来阻止这种情况：

function greet(name) {
  if (this instanceof greet) {
    console.log(`Hello, ${name}!`);
  } else {
    throw new Error("This function cannot be called with the new keyword.");
  }
}

const boundGreet = greet.bind(null, "John");

boundGreet(); // Hello, John!

new boundGreet(); // Error: This function cannot be called with the new keyword.

在这个例子中，我们使用if (this instanceof greet)来检查函数是否被new关键字调用。如果函数被new关键字调用，我们将抛出一个错误。这样，我们就阻止了bind返回的函数可以通过new关键字来实例化对象。

总结

call、apply和bind是JavaScript中的三个函数调用方法，它们允许你以不同的方式来调用函数。call和apply方法允许你以不同的值来调用函数，而bind方法允许你创建一个新的函数，这个新函数的this值被绑定到了bind方法的第一个参数。科里化是一个函数式编程的概念，它允许你将一个函数的多个参数拆分成多个函数调用。bind返回的函数可以通过new关键字来实例化对象，但你可以通过if (this instanceof greet)来阻止这种情况。