Question

代码

var x = {};

x.request = window.requestAnimationFrame;

function step(timestamp) {

    console.log('sth');
}

x.request(step);

它返回：

NS_ERROR_XPC_BAD_OP_ON_WN_PROTO：WrappedNative上的非法操作原型对象

它应该使x.request与window.requestAnimationFrame一样工作。我需要它，因为我想做类似的事情：

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

Answer 1

尝试

x.request.call(window, step);

这将确保this为window。

Answer 2

这是 context 的问题。 Context是函数内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，因此您需要provide a shim for those that don't。）

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

2 个答案: