Warum funktioniert der folgende JS -Code nicht?

Question

Der Code

var x = {};

x.request = window.requestAnimationFrame;

function step(timestamp) {

    console.log('sth');
}

x.request(step);

Es kehrt zurück:

NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegale Operation über ein wickelndes Prototyp -Objekt

Es sollte X.Request machen, dass gleiche Arbeiten wie window.requestanimationframe. Ich brauche es, weil ich so etwas machen möchte wie:

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

Answer 1

Dies ist ein Problem von Kontext. Kontext ist der Wert von this Innerhalb der Funktion.

Zum Beispiel:

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

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

Welches Ergebnis erhalten Sie? Sie könnten denken, dass Sie bekommen würden 'object a', weil die Funktion so definiert wurde. In der Tat wirst du bekommen object b, weil die Funktion so aufgerufen wird. Sie bieten eine Kontext Für den Funktionsaufruf und dieser Kontext ist das Objekt b.

Sie können die klare Parallele zu Ihrem Code sehen!

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

Jetzt ist der Kontext für den Anruf x. Deutlich requestAnimationFrame kümmert sich um seinen Kontext und funktioniert nicht mit dem falschen.

Sie müssen daher die richtige bereitstellen. Es gibt zwei Möglichkeiten, dies zu tun. Sie können den Kontext zum Zeitpunkt des Aufrufens der Funktion mithilfe der Funktion festlegen Function#call, oder Sie können den Kontext früher mithilfe von Verwendung festlegen Function#bind:

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

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

(Beachten Sie jedoch, dass nicht alle Browser unterstützen bind, so musst du Bieten Sie einen Schim für diejenigen, die dies nicht tun.)

Answer 2

Versuchen

x.request.call(window, step);

Das wird sicherstellen this ist window.