Chrome 中的“未捕获类型错误:非法调用”

2022-08-30 02:39:32

当我使用下面的代码做一些原生支持的动画时:requestAnimationFrame

var support = {
    animationFrame: window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame
};

support.animationFrame(function() {}); //error

support.animationFrame.call(window, function() {}); //right

直接打电话会给...support.animationFrame

未捕获的类型错误:非法调用

在浏览器中。为什么?


答案 1

在代码中,您将本机方法分配给自定义对象的属性。当您调用 时,它是在当前对象的上下文中执行的(即支持)。要使本机请求动画帧函数正常工作,必须在 的上下文中执行该函数。support.animationFrame(function () {})window

因此,此处的正确用法是 。support.animationFrame.call(window, function() {});

警报也是如此:

var myObj = {
  myAlert : alert //copying native alert to an object
};

myObj.myAlert('this is an alert'); //is illegal
myObj.myAlert.call(window, 'this is an alert'); // executing in context of window 

另一种选择是使用Function.prototype.bind(),它是ES5标准的一部分,在所有现代浏览器中都可用。

var _raf = window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame;

var support = {
   animationFrame: _raf ? _raf.bind(window) : null
};

答案 2

您还可以使用:

var obj = {
    alert: alert.bind(window)
};
obj.alert('I´m an alert!!');