Javascript 为什么下面的js代码不起作用？

代码

var x = {};

x.request = window.requestAnimationFrame;

function step(timestamp) {

    console.log('sth');
}

x.request(step);

它返回：

NS\u错误\u XPC\u错误\u操作\u WN\u协议：WrappedNative上的非法操作 原型对象

它应该使x.request与window.requestAnimationFrame工作相同。 我需要它，因为我想做一些像：

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

试一试

这将确保

此

是

窗口

这是上下文问题。Context是函数中此的值

例如：

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

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

你会得到什么结果？您可能会认为您会得到对象a，因为函数就是这样定义的。事实上，您将获得对象b，因为函数就是这样调用的。您正在为函数调用提供上下文，该上下文就是对象

b

您可以看到与代码的清晰并行

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

现在，调用的上下文是

x

。显然，

requestAnimationFrame

关心它的上下文，不会使用错误的上下文

因此，您需要提供正确的。有两种方法可以做到这一点。您可以在调用函数时使用设置上下文，也可以在调用函数之前使用：

---

（不过请注意，并非所有浏览器都支持绑定，因此您需要。）

来自Paul Irish的polyfillYes，但将其指定给window对象并不是我一直在寻找的。

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

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

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