Chrome এ "আনকাচড প্রকারভেদ: অবৈধ অনুরোধ"

Question

যখন আমি requestAnimationFrameনীচের কোড সহ কিছু স্থানীয় সমর্থিত অ্যানিমেশনটি ব্যবহার করি :

var support = {
    animationFrame: window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame
};

support.animationFrame(function() {}); //error

support.animationFrame.call(window, function() {}); //right

সরাসরি কল support.animationFrameদিলে দেবে ...

আনকাচড টাইপ এরির: অবৈধ অনুরোধ

ক্রোমে কেন?

Answer 1

আপনার কোডে আপনি কাস্টম অবজেক্টের একটি সম্পত্তিতে একটি স্থানীয় পদ্ধতি নির্ধারণ করছেন। আপনি যখন কল করবেন তখন support.animationFrame(function () {})এটি বর্তমান অবজেক্টের (যেমন সমর্থন) প্রসঙ্গে কার্যকর করা হবে। নেটিভ অনুরোধঅ্যানিমেশনফ্রেম ফাংশনটি সঠিকভাবে কাজ করার জন্য, অবশ্যই এর প্রসঙ্গে কার্যকর করা উচিত window।

সুতরাং সঠিক ব্যবহার এখানে support.animationFrame.call(window, function() {});।

সতর্কতার সাথেও একই ঘটনা ঘটে:

var myObj = {
  myAlert : alert //copying native alert to an object
};

myObj.myAlert('this is an alert'); //is illegal
myObj.myAlert.call(window, 'this is an alert'); // executing in context of window 

আর একটি বিকল্প হ'ল ফাংশন.প্রোটোটাইপ.বাইন্ড () যা ES5 স্ট্যান্ডার্ডের একটি অংশ এবং সমস্ত আধুনিক ব্রাউজারগুলিতে উপলব্ধ।

var _raf = window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame;

var support = {
   animationFrame: _raf ? _raf.bind(window) : null
};

Comments

Chrome 33 হিসাবে, দ্বিতীয় কলটি "অবৈধ অনুরোধ" এর সাথেও ব্যর্থ হয়। উত্তরটি আপডেট হয়ে গেলে ডাউনভোটটি সরিয়ে খুশি !

— ড্যান ড্যাসক্লেস্কু

@ ড্যানডাসকলেস্কু: আমি ক্রোম ৩৩ ব্যবহার করছি এবং এটি আমার জন্য কাজ করছে।

— নিময়

আমি স্রেফ আপনার কোডটি অনুলিপি করেছি এবং অবৈধ অনুরোধ ত্রুটি পেয়েছি। এখানে চিত্রনাট্য।

— ড্যান ড্যাসক্লেস্কু

আপনি অবশ্যই অবৈধ অনুরোধ ত্রুটি পাবেন, কারণ প্রথম পদক্ষেপ myObj.myAlert('this is an alert');অবৈধ। সঠিক ব্যবহার হয় myObj.myAlert.call(window, 'this is an alert')। উত্তরগুলি সঠিকভাবে পড়ুন এবং এটি বোঝার চেষ্টা করুন।

— নিময়

যদি আমি এখানে একমাত্র না হয়ে কনসোল.লগ পাওয়ার চেষ্টা করতে গিয়ে আটকে থাকি তবে একইভাবে কাজ করার জন্য আবেদন করুন, "এটি" কনসোল হওয়া উচিত, উইন্ডো নয়: স্ট্যাকওভারফ্লো

— অ্যালেক্স

Answer 2

আপনি এটি ব্যবহার করতে পারেন:

var obj = {
    alert: alert.bind(window)
};
obj.alert('I´m an alert!!');

Comments

এটি প্রশ্নের পুরোপুরি উত্তর দেয় না। আমি মনে করি এটি উত্তর নয় বরং মন্তব্য করা উচিত।

— মিশা পেরেকোস্কি

এছাড়াও, উপযুক্ত অবজেক্টের সাথে আবদ্ধ হওয়া জরুরী, যেমন ইতিহাসের সাথে কাজ করার var realReplaceState = history.replaceState.bind(history);

— সময়.প্লেস স্টেটটি

@ ডিআই: আমার প্রশ্নের উত্তর দেওয়ার জন্য ধন্যবাদ! ভবিষ্যতের লোকেদের জন্য, স্থানীয় স্টোরেজ.ক্লায়ার আপনার প্রয়োজন .bind(localStorage), না .bind(window)।

— সাম্যোক নেপাল

Answer 3

আপনি যখন কোনও পদ্ধতি চালিত করেন (অর্থাত্ কোনও বস্তুকে নির্ধারিত ফাংশন), তার ভিতরে thisআপনি এই বস্তুর উল্লেখ করতে ভেরিয়েবল ব্যবহার করতে পারেন , উদাহরণস্বরূপ:

var obj = {
  someProperty: true,
  someMethod: function() {
    console.log(this.someProperty);
  }
};
obj.someMethod(); // logs true

আপনি যদি একটি পদ্ধতি থেকে অন্য কোনও বস্তুকে অর্পণ করেন তবে এর thisভেরিয়েবলটি নতুন বস্তুকে বোঝায়, উদাহরণস্বরূপ:

var obj = {
  someProperty: true,
  someMethod: function() {
    console.log(this.someProperty);
  }
};

var anotherObj = {
  someProperty: false,
  someMethod: obj.someMethod
};

anotherObj.someMethod(); // logs false

আপনি requestAnimationFrameপদ্ধতি নির্ধারণ করার সময় একই জিনিস ঘটেwindow অন্য কোনও অবজেক্টের । নেটিভ ফাংশন, যেমন এর মতো, এটি অন্যান্য প্রসঙ্গে কার্যকর করা থেকে অন্তর্নির্মিত সুরক্ষা রয়েছে।

একটি Function.prototype.call()ফাংশন রয়েছে, যা আপনাকে অন্য প্রসঙ্গে কোনও ফাংশনটিতে কল করার অনুমতি দেয়। আপনাকে কেবল এই পদ্ধতির প্রথম পরামিতি হিসাবে এটি (প্রসঙ্গ হিসাবে ব্যবহৃত হবে এমন বস্তু) পাস করতে হবে। উদাহরণস্বরূপ alert.call({})দেয় TypeError: Illegal invocation। তবে, alert.call(window)সূক্ষ্মভাবে কাজ করে, কারণ এখনalert এটির আসল সুযোগে মৃত্যুদন্ড কার্যকর করা হয়েছে।

আপনি যদি .call()এটির মতো আপনার অবজেক্টটি ব্যবহার করেন:

support.animationFrame.call(window, function() {});

এটি সূক্ষ্মভাবে কাজ করে, কারণ requestAnimationFrameএর পরিধিতে কার্যকর করা হয়window আপনার বস্তুর পরিবর্তে ।

যাইহোক, .call()আপনি এই পদ্ধতিটি কল করতে প্রতিটি সময় ব্যবহার করা খুব মার্জিত সমাধান নয়। পরিবর্তে, আপনি ব্যবহার করতে পারেন Function.prototype.bind()। এটির সাথে একইরকম প্রভাব রয়েছে .call()তবে ফাংশনটি কল করার পরিবর্তে এটি একটি নতুন ফাংশন তৈরি করে যা নির্দিষ্ট প্রসঙ্গে সর্বদা ডাকা হবে। উদাহরণ স্বরূপ:

window.someProperty = true;
var obj = {
  someProperty: false,
  someMethod: function() {
    console.log(this.someProperty);
  }
};

var someMethodInWindowContext = obj.someMethod.bind(window);
someMethodInWindowContext(); // logs true

এর একমাত্র নেতিবাচকতা এটি Function.prototype.bind()হ'ল এটি ECMAScript 5 এর একটি অংশ যা আই <= 8 এ সমর্থিত নয় । ভাগ্যক্রমে, MDN- তে একটি পলিফিল রয়েছে ।

আপনি সম্ভবত ইতিমধ্যে নির্ধারিত হিসাবে, আপনি এর প্রসঙ্গে .bind()সর্বদা কার্যকর করতে ব্যবহার করতে পারেন । আপনার কোডটি দেখতে এমন হতে পারে:requestAnimationFramewindow

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

তারপরে আপনি সহজভাবে ব্যবহার করতে পারেন support.animationFrame(function() {});।