javascript - example - ¿Cómo funciona function.apply.bind en el siguiente código?

metodo bind javascript

Question

Así que entiendo que un conjunto de [200,599] se devuelve de la promesa y la función de devolución de llamada dentro de la dispersión se pasa a Function.apply.bind, pero ahora estoy perdido. ¿Cómo se divide la matriz de [200,599] en xey? ¿Cómo funciona exactamente el apply.bind?

function getY(x) {
        return new Promise( function(resolve,reject){
            setTimeout( function(){
                resolve( (3 * x) - 1 );
            }, 100 );
        } );
    }

function foo(bar,baz) {
    var x = bar * baz;

    // return both promises
    return [
        Promise.resolve( x ),
        getY( x )
    ];
}

function spread(fn) {
    return Function.apply.bind( fn, null );
}

Promise.all(
    foo( 10, 20 )
)
.then(
    spread( function(x,y){
        console.log( x, y );    // 200 599
    } )
)

Answer 1

La función de dispersión es solo una función de utilidad para convertir una matriz en parámetros pasados ​​a una función. La aplicación está haciendo la conversión, y el enlace lo vincula a la función de llamada para que el contexto "este" esté conectado a la misma función.

Para ver cómo se propaga está trabajando en una forma más simple ->

spread(function (x,y){console.log(x,y);})([1,2])

Obtendrá la respuesta, 1 2, cuando 1 pase a x, y 2 pase a y.

Entonces, en tu ejemplo, tu promesa. Todos devuelven una serie de promesas resueltas. Estos se asignan a los parámetros de su función (x, y).

Answer 2

Spread toma una función y vincula el método apply a, aplicando parcialmente el argumento null . En resumen,

spread(fn)

se transforma a

args => fn.apply(null, args)

que es lo mismo que usar la sintaxis de propagación ES6

args => fn(...args)

de donde la función obtuvo su nombre.

Si quieres la respuesta larga, recuerda lo que hace bind :

method.bind(context, ...args1)

devuelve una función que funciona como

(...args2) => method.call(context, ...args1, ...args2)

En nuestro caso, se apply method , el context es fn y los primeros argumentos son null , por lo que la llamada

Function.apply.bind( fn, null )

creará una función que funciona como

(...args2) => (Function.apply).call(fn, null, ...args2)

que es equivalente a la fn.apply(…) anterior, dado que apply es el método heredado de Function.prototype en ambos accesos.

Answer 3

.apply() es un método sobre objetos de función. Al igual que:

console.log(Math.max.apply(null, [1, 2, 3])); // 3

.apply() acepta dos argumentos, el contexto (lo que se convertiría en this dentro de la función objetivo) y un iterable de argumentos (generalmente una matriz, pero la matriz de arguments como también funciona).

.bind() es un método sobre objetos de función. Al igual que:

const x = {
  foo: function() {
    console.log(this.x);
  },
  x: 42
}

var myFoo = x.foo.bind({x: 5});

x.foo(); // 42
myFoo(); // 5

.bind() toma un contexto (lo que se convertiría en this ) y, opcionalmente, argumentos adicionales, y devuelve una nueva función , con el contexto vinculado , y los argumentos adicionales bloqueados

Como .apply() es una función en sí misma, se puede vincular con .bind() , de esta manera:

Function.prototype.apply.bind(fn, null);

Lo que significa que this de .apply() sería fn y el primer argumento para .apply() sería null . Lo que significa que se vería así:

fn.apply(null, args)

Que separaría los parámetros de una matriz.