Great question! I get where you're coming from—attaching functions directly to objects works for simple cases, but these three methods fill critical gaps in flexibility, reusability, and context control. Let’s break down why they matter, when to use each, and how they fit into modern ES6 code.

First, a quick reality check: When you do obj.myFunc = myFunc and call obj.myFunc(), you’re tying that function to one specific object. This gets messy fast—you duplicate function references, can’t easily reuse the logic across multiple objects, and lose control over this in scenarios like callbacks. That’s where call(), apply(), and bind() come in to save the day.

Let’s break down each method with practical, relatable examples.

1. call(): Run a Function Right Now with a Custom this #

call() executes a function immediately, forcing this to point to the object you specify. It takes the target this value as the first argument, followed by individual parameters for the function.

Common Use Cases: #

• Borrowing built-in methods: Use Array methods on non-array objects (like DOM node collections or the old arguments object).
• Reusing a single function across multiple objects: Avoid duplicating function logic for every object you work with.

ES6 Example: #

// Convert a DOM node collection to an array by borrowing Array.slice()
const divNodes = document.querySelectorAll('div');
const divArray = Array.prototype.slice.call(divNodes);

// Reuse a greeting function for different people
function introduce(title) {
  console.log(`Hi, I'm ${this.name}, ${title} (${this.age} years old)`);
}

const alice = { name: 'Alice', age: 28 };
const bob = { name: 'Bob', age: 32 };

// Call introduce with alice as `this`, plus a title parameter
introduce.call(alice, 'a software engineer'); 
// Output: Hi, I'm Alice, a software engineer (28 years old)

introduce.call(bob, 'a freelance designer');
// Output: Hi, I'm Bob, a freelance designer (32 years old)

2. apply(): Run Immediately with Arguments as an Array #

apply() works just like call(), but instead of passing individual parameters, you pass an array (or array-like object) of arguments.

Common Use Cases: #

• Passing dynamic arrays to functions that don’t accept arrays: Think Math.max()—it expects individual numbers, not an array.
• Handling variable-length argument lists: When you don’t know how many parameters you’ll need upfront.

ES6 Notes: #

ES6’s spread operator (...) often replaces apply() for simple cases, but apply() is still useful in legacy code or with array-like objects you can’t spread easily.

Example: #

// Find the maximum value in an array (a classic pre-ES6 trick)
const numbers = [14, 3, 27, 10];
const maxNumber = Math.max.apply(null, numbers); // 27

// ES6 equivalent with spread: Math.max(...numbers)

// Reuse a sum function with dynamic arguments
function sum(...args) { // ES6 rest parameter to capture all inputs
  return args.reduce((total, num) => total + num, 0);
}

const randomArgs = [5, 10, 15];
sum.apply(null, randomArgs); // 30
// ES6 equivalent: sum(...randomArgs)

3. bind(): Create a New Function with a Fixed this #

Unlike call() and apply(), bind() doesn’t execute the function immediately. Instead, it returns a new function where this is permanently bound to the object you specify. You can also preset parameters (a technique called currying).

Common Use Cases: #

• Preserving this in callbacks: Fix the classic problem where this loses its context in setTimeout, event listeners, or array methods like forEach.
• Currying functions: Create reusable partial functions with preset parameters.

ES6 Example: #

// Preserve `this` in a setTimeout callback
const person = {
  name: 'Charlie',
  sayHello: function() {
    console.log(`Hello, I'm ${this.name}!`);
  }
};

// Without bind, `this` would point to the global window object
setTimeout(person.sayHello.bind(person), 1000); 
// Output after 1s: Hello, I'm Charlie!

// ES6 alternative: Arrow functions (but bind is better for reusable bound functions)
setTimeout(() => person.sayHello(), 1000);

// Currying with bind: Create a "double" function from a multiply function
function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2); // Preset the first parameter to 2
double(5); // 10
double(15); // 30

// ES6 arrow function equivalent: const double = b => multiply(2, b);

• Use call() when you need to run a function right now with specific this and individual parameters.
• Use apply() when you need to run a function right now with specific this and an array of parameters (or use ES6 spread instead).
• Use bind() when you need a reusable function with a fixed this context, or want to curry parameters.

These methods keep your code DRY (Don’t Repeat Yourself), avoid cluttering objects with unnecessary methods, and solve common this context headaches that attaching functions directly can’t fix.

内容的提问来源于stack exchange，提问作者sravan ganji