다음 JS 코드가 작동하지 않는 이유는 무엇입니까?

Question

코드

var x = {};

x.request = window.requestAnimationFrame;

function step(timestamp) {

    console.log('sth');
}

x.request(step);

반환 :

NS_ERROR_XPC_BAD_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, 그것이 함수가 호출되는 방식이기 때문입니다. 당신은 a 문맥 함수 호출의 경우 해당 컨텍스트는 객체입니다. 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.