لماذا لا يعمل رمز 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.