Array.prototype与bind组合如何替代箭头函数？原理及参数疑问

Great question! Let’s break down exactly how this combination works, and confirm whether the resolved Promise result gets implicitly passed to concat.

First, let’s ground this in the context from the article. Suppose we’re sequentially resolving Promises and collecting their results into a single array. A common arrow function approach might look like this:

promises.reduce((acc, currPromise) => {
  return acc.then(resultsArray => resultsArray.concat(currPromise()));
}, Promise.resolve([]));

Here, the then callback is the arrow function resultsArray => resultsArray.concat(currPromise()) — this is the function we’re replacing with Array.prototype.concat.bind([]) (or a slight variation of it, depending on the exact use case).

Step 1: How Array.prototype.concat works #

The concat method is called on an array, and accepts any number of arguments. It returns a new array containing:

• All elements of the original array (the this value when calling concat)
• Each argument added as elements (if an argument is an array, it’s flattened one level)

For example:

• [1,2].concat(3) → [1,2,3]
• [1,2].concat([3,4]) → [1,2,3,4]

Step 2: What bind([]) does #

The bind method creates a new function that:

1. Locks in the this value of the original function (concat, here) to the first argument passed to bind — in this case, an empty array [].
2. Optionally pre-fills additional arguments for the original function.

So Array.prototype.concat.bind([]) creates a reusable function where:

• When called, concat will treat [] as its "base" array (this).
• Any arguments passed to this new function will be used as the elements to concatenate with the base array.

Step 3: Implicitly passing the Promise result #

Here’s the key part: when you pass a function to Promise.then(), the Promise engine automatically invokes that function with the resolved value of the previous Promise as its first argument.

Let’s map this to a concrete example. Suppose we want to replace the arrow function val => resultsArray.concat(val) (which takes a Promise’s resolved value and appends it to our accumulated array). We can rewrite this as Array.prototype.concat.bind(resultsArray).

When the Promise resolves to val, it will implicitly pass val to the bound concat function. This means:

• The bound function executes resultsArray.concat(val)
• Which is exactly what the original arrow function did.

Another common scenario in the article is using this with reduce for sequential Promise resolution:

const sequential = promises => 
  promises.reduce((acc, currPromise) => 
    acc.then(results => 
      currPromise().then(Array.prototype.concat.bind(results))
    ), 
    Promise.resolve([])
  );

In this code:

1. acc starts as a Promise resolving to an empty array.
2. For each Promise in the list, we wait for acc to resolve to our accumulated results.
3. We then resolve the current Promise, and pass its value to the bound concat function. The bound function uses the accumulated results as its this value, so it appends the new value to the array.
4. The final result is a Promise resolving to all results in sequence.

To answer your core question directly: #

Yes! The resolved result (whether it’s the accumulated array from a reduce step or the value from a Promise) is implicitly passed as an argument to the bound concat function.

The bind only fixes the this value for concat — the rest of the arguments come from the context where the callback is invoked (the Promise engine or reduce method, which automatically passes the relevant values).

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