"Uncaught TypeError: Illegal invocation" in Chrome크롬에서 "Uncaught TypeError: Illegal invocation"

아래 코드를 사용하여 일부 네이티브 지원 애니메이션을 수행 할 때 requestAnimationFrame을 사용합니다:

var support = {
    animationFrame: window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame
};
support.animationFrame(function() {}); //에러
support.animationFrame.call(window, function() {}); //올바름

support.animationFrame를 직접 호출하면...

Uncaught TypeError: 잘못된 호출

크롬에서 왜 그럴까요?

답변 1

당신의 코드에서는 사용자 정의 객체의 속성에 네이티브 메소드를 할당하고 있습니다.
support.animationFrame(function () {})을 호출할 때, 현재 객체의 컨텍스트에서 실행됩니다 (즉, support). 네이티브 requestAnimationFrame 함수가 제대로 작동하려면 window의 컨텍스트에서 실행되어야 합니다.

따라서 여기서 올바른 사용법은 support.animationFrame.call(window, function() {});입니다.

alert도 동일한 일이 발생합니다:

var myObj = {
  myAlert : alert //네이티브 alert를 객체로 복사
};
myObj.myAlert('this is an alert'); //잘못된 사용법
myObj.myAlert.call(window, 'this is an alert'); // window의 컨텍스트에서 실행 

다른 옵션으로는 모던 브라우저에서 모두 사용 가능한 ES5 표준의 일부인 Function.prototype.bind()를 사용하는 것입니다.

var _raf = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame;
var support = {
   animationFrame: _raf ? _raf.bind(window) : null
};

var _raf = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame;
var support = {
   animationFrame: _raf ? _raf.bind(window) : null
};

var _raf = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame;
var support = {
   animationFrame: _raf ? _raf.bind(window) : null
};

답변 2

Uncaught TypeError: Illegal invocation 크롬에서 발생하는 오류에 대한 친환경적인 한국어 에세이
안녕하세요, 이번 글에서는 크롬에서 발생하는 Uncaught TypeError: Illegal invocation 오류에 대해 알아보고자 합니다. 이 문제는 개발자들 사이에서 꽤 흔히 발생하며, 웹 개발 분야에서 작업하는 사람들에게는 친숙한 오류입니다.
먼저, Uncaught TypeError: Illegal invocation 오류는 자바스크립트 코드에서 발생하는 유형 중 하나입니다. 일반적으로 이 오류는 함수의 호출 방법이 잘못되었을 때 발생합니다. 함수가 어떻게 호출되는지에 따라 발생하는데, 이러한 호출 방법이 제한되는 것을 Illegal invocation이라고 합니다.
이 오류를 해결하기 위해서는 함수 호출 시 올바른 방법을 사용해야 합니다. 이를 위해 다음 몇 가지 접근법을 소개하겠습니다.
첫째로, 함수를 호출할 때는 주의 깊게 파라미터를 전달해야 합니다. 파라미터의 타입과 개수가 함수의 기대치와 정확히 일치해야 합니다. 예를 들어, 함수가 문자열을 기대하는데 숫자를 전달하면 Uncaught TypeError: Illegal invocation 오류가 발생할 수 있습니다. 이런 경우에는 함수 호출에 사용되는 파라미터의 타입을 확인해야 합니다.
둘째로, 함수의 호출 방법을 정확히 이해하고 사용해야 합니다. 자바스크립트에서 함수를 호출할 때는 객체와 함께 사용하는 경우가 많습니다. 객체의 메서드로 정의된 함수를 호출할 때는 해당 객체를 함수 호출의 첫 번째 인자로 전달해야 합니다. 이 호출 방법을 제대로 사용하지 않으면 Uncaught TypeError: Illegal invocation 오류가 발생할 수 있습니다.
셋째로, 함수의 메서드를 사용하는 경우에는 해당 메서드를 호출할 수 있는 컨텍스트에서 호출해야 합니다. 예를 들어, 어떤 함수를 특정 객체의 메서드로 호출하고자 할 때, 그 함수가 적용되는 객체의 컨텍스트에서 호출해야 합니다. 그렇지 않으면 Uncaught TypeError: Illegal invocation 오류가 발생할 수 있습니다. 이러한 경우, 함수를 해당 객체의 메서드로 변환하거나 함수를 호출할 때 객체를 전달해야 할 수도 있습니다.
마지막으로, 오류 메시지를 주의깊게 살펴보고 디버깅 과정에서 중요한 정보를 찾아야 합니다. Uncaught TypeError: Illegal invocation 오류 메시지에는 코드의 특정 부분에 대한 정보 또는 오류가 발생한 줄 번호가 포함될 수 있습니다. 이 정보를 활용하여 오류를 해결하는데 도움이 됩니다.
이렇게, Uncaught TypeError: Illegal invocation 오류를 해결하기 위해 함수 호출 방법을 확인하고, 파라미터와 컨텍스트를 올바르게 사용하는 것이 중요합니다. 코드를 개발할 때 이러한 사소한 오류를 방지하면 더 나은 사용자 경험을 제공할 수 있습니다. 따라서 개발자들은 이러한 에러를 해결하기 위한 지식과 주의를 기울여야 합니다.
이번에 다룬 주제는 크롬에서 발생하는 Uncaught TypeError: Illegal invocation 오류에 대한 내용이었습니다. 이 글이 웹 개발 분야에서 작업하시는 분들에게 유익한 정보가 되었으면 좋겠습니다. 서로의 코드를 발전시키기 위해 지식을 공유하는 것은 항상 중요하니, 오류가 발생했을 때 이러한 지식을 적용하여 문제를 해결할 수 있도록 노력해 보세요. 감사합니다.