なぜ次のJSコードが機能していないのですか？

Question

コード

var x = {};

x.request = window.requestAnimationFrame;

function step(timestamp) {

    console.log('sth');
}

x.request(step);

それは返されます：

NS_ERROR_XPC_BAD_OP_ON_WN_PROTO：ラップネイティブプロトタイプオブジェクトの違法な操作

X.RequestをWindow.RequestanimationFrameと同じように動作させるはずです。次のようなものを作りたいので、私はそれが必要です

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

Answer 1

これはの問題です 環境. 。コンテキストはの値です this 関数内。

例えば：

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

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

どの結果を得ますか？あなたはあなたが得るだろうと思うかもしれません 'object a', 、それが関数の定義方法だからです。実際、あなたは得るでしょう object b, 、それが関数がどのように呼ばれるかだからです。あなたはaを提供しています 環境 関数呼び出しのために、そしてそのコンテキストはオブジェクトです b.

あなたはあなたのコードと類似した明確なものを見ることができます！

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

これで、呼び出しのコンテキストは次のとおりです x. 。明らかに requestAnimationFrame その文脈を気にし、間違ったものとは機能しません。

したがって、正しいものを提供する必要があります。これを行うには2つの方法があります。使用を使用して関数を呼び出すときにコンテキストを設定できます Function#call, 、または、以前にコンテキストを使用して設定することができます Function#bind:

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

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

（ただし、すべてのブラウザがサポートしているわけではないことに注意してください bind, 、そうする必要があります そうでない人にシムを提供します.)

Answer 2

試す

x.request.call(window, step);

それはそれを確実にします this は window.