为什么以下JS代码不起作用？

Question

编码

var x = {};

x.request = window.requestAnimationFrame;

function step(timestamp) {

    console.log('sth');
}

x.request(step);

它返回：

NS_ERROR_XPC_BAD_OP_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, ，因为那是函数的调用方式。您正在提供 语境 对于函数调用，该上下文是对象 b.

您可以看到与代码的清晰相似之处！

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

现在，通话的上下文是 x. 。清楚地 requestAnimationFrame 关心其上下文，不会与错误的背景合作。

因此，您需要提供正确的一个。有两种方法。您可以在使用使用该函数的时间设置上下文 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.