Perché il seguente codice JS non funziona?

Question

Il codice

var x = {};

x.request = window.requestAnimationFrame;

function step(timestamp) {

    console.log('sth');
}

x.request(step);

Ritorna:

Ns_error_xpc_bad_op_on_wn_proto: operazione illegale su oggetto prototipo avvolto

Dovrebbe far funzionare X.Request come Window.RequestanimationFrame. Ne ho bisogno perché voglio fare qualcosa di simile:

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

Answer 1

Questo è un problema di contesto. Il contesto è il valore di this All'interno della funzione.

Per esempio:

var a = {
    name: 'object a',
    fn: function() {
        return name;
    }
},
    b = {
    name: 'object b'
};

b.fn = a.fn;
console.log(b.fn());

Quale risultato otterrai? Potresti pensare che avresti ottenuto 'object a', perché è così che è stata definita la funzione. In effetti otterrai object b, perché è così che viene chiamata la funzione. Stai fornendo un contesto per la chiamata di funzione e quel contesto è l'oggetto b.

Puoi vedere il parallelo chiaro con il tuo codice!

x.request = window.requestAnimationFrame;
x.request(step);

Ora, il contesto per la chiamata è x. Chiaramente requestAnimationFrame Si prende cura del suo contesto e non funzionerà con quello sbagliato.

È quindi necessario fornire quello giusto. Ci sono due modi per farlo. È possibile impostare il contesto al momento in cui si chiama la funzione utilizzando Function#call, o puoi impostare il contesto in precedenza 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);

(Nota, tuttavia, che non tutti i browser supportano bind, quindi dovrai farlo fornire uno spessore per coloro che non lo fanno.)

Answer 2

Provare

x.request.call(window, step);

Questo lo farà this è window.