Este es un problema de contexto. El contexto es el valor de this
Dentro de la función.
Por ejemplo:
var a = {
name: 'object a',
fn: function() {
return name;
}
},
b = {
name: 'object b'
};
b.fn = a.fn;
console.log(b.fn());
¿Qué resultado obtendrás? Podrías pensar que obtendrías 'object a'
, porque así se definió la función. De hecho obtendrás object b
, porque así es como se llama la función. Estás proporcionando un contexto para la llamada de función, y ese contexto es el objeto b
.
¡Puedes ver el paralelo claro con tu código!
x.request = window.requestAnimationFrame;
x.request(step);
Ahora, el contexto para la llamada es x
. Claramente requestAnimationFrame
Se preocupa por su contexto y no funcionará con el incorrecto.
Por lo tanto, debe proporcionar el correcto. Hay dos formas de hacer esto. Puede establecer el contexto en el momento en que llame a la función usando Function#call
, o puede establecer el contexto antes usando Function#bind
:
// with call
x.request.call(window, step); // provide the window object as the context
// with bind
x.request = window.requestAnimationFrame.bind(window);
(Tenga en cuenta, sin embargo, que no todos los navegadores admiten bind
, entonces necesitarás proporcionar una cuña para aquellos que no.)