¿Por qué el siguiente código JS no funciona?

Question

El código

var x = {};

x.request = window.requestAnimationFrame;

function step(timestamp) {

    console.log('sth');
}

x.request(step);

Vuelve:

NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Operación ilegal en el objeto prototipo de NetrappedNative

Debe hacer que X.Request funcione lo mismo que Window.RequestanimationFrame. Lo necesito porque quiero hacer algo como:

x.request = window.requestAnimationFrame
                ||
            window.webkitRequestAnimationFrame
                ||
            window.mozRequestAnimationFrame;

Answer 1

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.)

Answer 2

Probar

x.request.call(window, step);

Eso se asegurará de que this es window.