Por que o código JS a seguir não está funcionando?

Question

O código

var x = {};

x.request = window.requestAnimationFrame;

function step(timestamp) {

    console.log('sth');
}

x.request(step);

Ele retorna:

NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Operação ilegal no objeto de protótipo embrulhado

Deve fazer X.Request funcionar da mesma forma que Window.RequestanimationFrame. Eu preciso porque quero fazer algo como:

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

Answer 1

Este é um problema de contexto. Contexto é o valor de this dentro da função.

Por exemplo:

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

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

Qual resultado você obterá? Você pode pensar que você conseguiria 'object a', porque é assim que a função foi definida. Na verdade você vai conseguir object b, porque é assim que a função é chamada. Você está fornecendo um contexto para a chamada de função, e esse contexto é o objeto b.

Você pode ver o paralelo claro com o seu código!

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

Agora, o contexto para a chamada é x. Claramente requestAnimationFrame se preocupa com seu contexto e não funcionará com o errado.

Portanto, você precisa fornecer o certo. Há duas maneiras de fazer isso. Você pode definir o contexto no momento em que você chama a função usando Function#call, ou você pode definir o contexto mais cedo 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);

(Observe, porém, que nem todos os navegadores suportam bind, então você precisará forneça um calço para aqueles que não.)

Answer 2

Tentar

x.request.call(window, step);

Isso vai garantir que this é window.