Почему следующий код 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, потому что так называется функция. Вы предоставляете контекст Для вызова функции, и этот контекст является объектом 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.