ES6 তীর ফাংশনগুলির সাথে jQuery $ (এটি) ব্যবহার করা হচ্ছে (এই বাঁধনীয়টি বর্ণিত)

Question

লেসিকাল thisবাইন্ডিং সহ ES6 তীর ফাংশন ব্যবহার করা দুর্দান্ত।

যাইহোক, আমি একটি সাধারণ jQuery ক্লিক বাঁধাইয়ের সাথে এটি ব্যবহার করে কিছুক্ষণ আগে একটি ইস্যুতে ছুটে এসেছি:

class Game {
  foo() {
    self = this;
    this._pads.on('click', function() {
      if (self.go) { $(this).addClass('active'); }
    });
  }
}

পরিবর্তে একটি তীর ফাংশন ব্যবহার:

class Game {
  foo() {
    this._pads.on('click', () => {
      if (this.go) { $(this).addClass('active'); }
    });
  }
}

এবং তারপরে $(this)ES5 (স্ব = এটি) টাইপ বন্ধে রূপান্তরিত হয়।

লেসিকাল বাঁধার জন্য ট্রেসারকে "" (এটি) "উপেক্ষা করার কোনও উপায় কি?

Comments

এটি কখন একটি তীর ফাংশনটি ব্যবহার করবেন না তার একটি নিখুঁত উদাহরণ বলে মনে হচ্ছে যেহেতু .on()সত্যই আপনার পক্ষে একটি thisমূল্য কার্যকর। আমার thisকাছে ইভেন্টটি পাস করার ও ম্যানুয়ালি টার্গেটটি সন্ধান করার চেয়ে ইভেন্ট টার্গেটের উল্লেখের সাথে এটি আরও পরিষ্কার । আমি তীর ফাংশনগুলির সাথে খুব বেশি খেলিনি তবে মনে হচ্ছে এটি বেনামে ফাংশনগুলি নিয়ে পিছনে যেতে বিভ্রান্ত হবে।

— রবিস্রোব

Answer 1

এটি ট্রেসুরের সাথে কোনও কিছু বন্ধ করার কোনও সম্পর্ক রাখে না, এটি সহজভাবে ES6 কীভাবে কাজ করে। এটির =>পরিবর্তে ব্যবহার করে আপনি যা সুনির্দিষ্ট কার্যকারিতা জিজ্ঞাসা করছেন তাfunction () { } ।

আপনি যদি ES6 লিখতে চান তবে আপনাকে ES6 সর্বদা লিখতে হবে, আপনি কোডের নির্দিষ্ট লাইনে এটিকে স্যুইচ করতে বা বের করতে পারবেন না এবং আপনি অবশ্যই উপায়টিকে দমন বা পরিবর্তন করতে পারবেন না => works এমনকি যদি আপনি পারতেন তবে জাভাস্ক্রিপ্টের কিছু উদ্ভট সংস্করণটি কেবলমাত্র আপনিই বুঝতে পেরেছিলেন এবং এটি আপনার কাস্টমাইজড ট্রেসারের বাইরে কখনও সঠিকভাবে কাজ করবে না যা অবশ্যই ট্রেসারের মূল বিষয় নয়।

এই নির্দিষ্ট সমস্যাটি সমাধানের thisউপায়টি ক্লিক করা উপাদানগুলিতে অ্যাক্সেস পাওয়ার জন্য ব্যবহার না করে পরিবর্তে ব্যবহার করুন event.currentTarget:

Class Game {
  foo(){
    this._pads.on('click', (event) => {
      if(this.go) {
        $(event.currentTarget).addClass('active');
      }
    });
  }
}

jQuery event.currentTargetবিশেষত সরবরাহ করে কারণ ES6 এর আগেও, jQuery এর পক্ষে thisকলব্যাক ফাংশনটিতে চাপিয়ে দেওয়া সবসময় সম্ভব নয় (অর্থাত্ যদি এটি অন্য কোনও প্রসঙ্গে আবদ্ধ থাকে bind।

Comments

দ্রষ্টব্য, যদিও এটি কেবল ডেলিগেট করা .onকলগুলির জন্য ডাইভারেজ করে, thisএটি আসলে event.currentTarget।

— লোগানফস্মিথ

এই উত্তর ঠিক আছে? লোগানফস্মিথের মত, this== event.currentTarget। কোন?

— লিয়ন পেলেটিয়ার

ES6 তীর ফাংশন অনুসারে @ লোনপেল্লেটিয়ার নং thisএবং এনকোলেসিং স্কোপটিতে আবদ্ধ event.currentTargetনা হলে এটি সমান this।

— মেগার

আপনি যদি কিছু কোড সংরক্ষণ করতে চান তবে আপনি এটির গঠনও করতে পারেন: ({কারেন্টট্যাজেট}) => {$ (কারেন্ট ট্রেজার্ট) .ড্যাডক্লাস ('অ্যাক্টিভ')

— Frank

Answer 2

ইভেন্ট বাঁধাই

$button.on('click', (e) => {
    var $this = $(e.currentTarget);
    // ... deal with $this
});

লুপ

Array.prototype.forEach.call($items, (el, index, obj) => {
    var $this = $(el);
    // ... deal with $this
});

Comments

খুঁজছেন $jQueryElements.each()? jQuery আসলে প্রতিটি বস্তুর কাছে কিছু যুক্তি প্রেরণ করে যাতে আপনার এটির প্রয়োজন হয় না => এটি$(...).each((index, el) => console.log(el))

— jave.web

Answer 3

আর একটি মামলা

শীর্ষের উত্তরটি সঠিক এবং আমি এটিতে ভোট দিয়েছি।

তবে, আরও একটি মামলা রয়েছে:

$('jquery-selector').each(() => {
    $(this).click();
})

হিসাবে ঠিক করা যেতে পারে:

$('jquery-selector').each((index, element) => {
    $(element).click();
})

এই jQuery মধ্যে একটি ঐতিহাসিক ভুল যা রাখে সূচক , পরিবর্তে উপাদান প্রথম আর্গুমেন্ট হিসাবে:

.each (ফাংশন)

ফাংশনের
ধরণ: Function( Integer index, Element element )
প্রতিটি মিলিত উপাদানগুলির জন্য নির্বাহ করার জন্য একটি ফাংশন।

দেখুন: https://api.jquery.com/each/#each-function

Comments

ফোকশনগুলির জন্য একই$('jquery-selector').map

— নিকোলাস সিগমুন্ড্ট

$ ('জকিউরি-সিলেক্টর') ফিল্টার ইত্যাদির মতো জিনিসগুলিতে এটি ব্যবহার করা আমার পক্ষে অত্যন্ত কার্যকর ছিল ... এটিকে পরিষ্কার করার জন্য ধন্যবাদ।

— আর জোন্স

Answer 4

(এটি একটি উত্তর যা আমি এই প্রশ্নের অন্য সংস্করণের জন্য লিখেছিলাম, এটি শেখার আগে এটি এই প্রশ্নের সদৃশ ছিল I আমি মনে করি উত্তরটি পরিষ্কারভাবে স্পষ্টভাবে তথ্যকে একত্রিত করে তাই আমি এটি একটি সম্প্রদায়ের উইকি হিসাবে যুক্ত করার সিদ্ধান্ত নিয়েছি, যদিও এটি মূলত একেবারেই আলাদা অন্যান্য উত্তরের বাক্য গঠন।)

আপনি পারবেন না। এটি তীরের ফাংশনগুলির অর্ধেক পয়েন্ট, তারা thisকীভাবে ডাকা হয় তার দ্বারা সেট করা তাদের নিজের পরিবর্তে বন্ধ হয়ে যায় । প্রশ্নের ক্ষেত্রে ব্যবহারের ক্ষেত্রে, যদি thisহ্যান্ডলারটি কল করার সময় আপনি jQuery দ্বারা সেট করতে চান তবে হ্যান্ডলারটি একটি হতে হবেfunction ফাংশন ।

তবে আপনার যদি তীর ব্যবহারের কোনও কারণ থাকে (সম্ভবত আপনি thisএটির তীরের বাইরে যা বোঝায় তার জন্য ব্যবহার করতে চান ), আপনি যদি পছন্দ করেন তবে e.currentTargetপরিবর্তে ব্যবহার thisকরতে পারেন:

class Game {
  foo(){
    this._pads.on('click', e => {                   // Note the `e` argument
      if(this.go) {
        $(e.currentTarget).addClass('active');      // Using it
      }
    });
  }
}

currentTargetঘটনা বস্তুর উপর কি jQuery এর সেট করে হিসাবে একই thisযখন আপনার হ্যান্ডলার কলিং করতে।

Answer 5

মেজার এই একই প্রশ্নের উত্তরে যেমনটি বলেছিলেন আপনি যদি ES6 লিখতে চান তবে আপনাকে সর্বদা ES6 লিখতে হবে ,

সুতরাং আপনি যদি ES6 এর তীর ফাংশন ব্যবহার করছেন: (event)=>{}তবে আপনাকে এর $(event.currentTarget)পরিবর্তে ব্যবহার করতে হবে $(this)।

আপনি বর্তমানের টার্গেট হিসাবে আরও সুন্দর এবং ক্লিনার উপায় ব্যবহার করতে পারেন ({currentTarget})=>{},

Class Game {
  foo(){
    this._pads.on('click', ({currentTarget}) => {
      if(this.go) {
        $(currentTarget).addClass('active');
      }
    });
  }
}

মূলত এই ধারণাটি @ মিজারের উত্তরে রিজি ফ্র্যাঙ্ক দ্বারা মন্তব্য করা হয়েছিল , এবং আমি এটি দরকারী বলে মনে করেছি এবং আমি মনে করি যে সমস্ত লোক সেই মন্তব্যটি পড়বে না তাই আমি এটিকে অন্য উত্তর হিসাবে লিখেছি।