Pourquoi le code JS suivant ne fonctionne pas?

Question

Le code

var x = {};

x.request = window.requestAnimationFrame;

function step(timestamp) {

    console.log('sth');
}

x.request(step);

Il revient:

Ns_error_xpc_bad_op_on_wn_proto: fonctionnement illégal sur un objet prototype enveloppé

Il devrait faire en sorte que x.request fonctionne de la même manière que Window.FesterAnimationFrame. J'en ai besoin parce que je veux faire quelque chose comme:

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

Answer 1

C'est un problème de le contexte. Le contexte est la valeur de this à l'intérieur de la fonction.

Par exemple:

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

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

Quel résultat obtiendrez-vous? Vous pourriez penser que vous obtiendriez 'object a', parce que c'est ainsi que la fonction a été définie. En fait, vous obtiendrez object b, parce que c'est ainsi que la fonction est appelée. Vous fournissez un le contexte pour l'appel de fonction, et ce contexte est l'objet b.

Vous pouvez voir le parallèle clair avec votre code!

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

Maintenant, le contexte de l'appel est x. Clairement requestAnimationFrame se soucie de son contexte et ne fonctionnera pas avec le mauvais.

Vous devez donc fournir le bon. Il y a deux façons de le faire. Vous pouvez définir le contexte au moment où vous appelez la fonction en utilisant Function#call, ou vous pouvez définir le contexte plus tôt en utilisant Function#bind:

// with call
x.request.call(window, step); // provide the window object as the context

// with bind
x.request = window.requestAnimationFrame.bind(window);

(Notez cependant que tous les navigateurs ne prennent pas en charge bind, donc vous devrez fournir une cale pour ceux qui ne le font pas.)

Answer 2

Essayer

x.request.call(window, step);

Qui s'assurera que this est window.