ES6 অবজেক্টে পদ্ধতি: তীর ফাংশন ব্যবহার করে

Question 1

ES6- এ, এই দুটিই আইনী:

var chopper = {
    owner: 'Zed',
    getOwner: function() { return this.owner; }
};

এবং, শর্টহ্যান্ড হিসাবে:

var chopper = {
    owner: 'Zed',
    getOwner() { return this.owner; }
}

নতুন তীর ফাংশনগুলিও কি ব্যবহার করা সম্ভব? কিছু চেষ্টা করে

var chopper = {
    owner: 'John',
    getOwner: () => { return this.owner; }
};

বা

var chopper = {
    owner: 'John',
    getOwner: () => (this.owner)
};

আমি একটি ত্রুটি বার্তা পেয়েছি যাতে পরামর্শ দেয় যে পদ্ধতিটিতে অ্যাক্সেস নেই this। এটি কি কেবল একটি সিনট্যাক্স সমস্যা, বা আপনি ES6 অবজেক্টগুলির মধ্যে ফ্যাট-পাইপ পদ্ধতি ব্যবহার করতে পারবেন না?

Question 2

তীর ফাংশনগুলি কেবল পুরানো ফ্যাশনগুলির সংক্ষিপ্ত সংস্করণ হিসাবে প্রতিটি পরিস্থিতিতে ব্যবহার করার জন্য ডিজাইন করা হয়নি। তারা মূল functionশব্দটি ব্যবহার করে ফাংশন সিনট্যাক্স প্রতিস্থাপন করার উদ্দেশ্যে নয় । তীর ফাংশনগুলির জন্য সর্বাধিক সাধারণ ব্যবহারের ক্ষেত্রে সংক্ষিপ্ত "ল্যাম্বডাস" যা নতুন সংজ্ঞা দেয় না this, প্রায়শই কোনও ফাংশনে কলব্যাক হিসাবে কোনও ফাংশন পাস করার সময় ব্যবহৃত হয়।

তীর ফাংশনগুলি অবজেক্টের পদ্ধতিগুলি লিখতে ব্যবহার করা যায় না কারণ আপনি যেমনটি খুঁজে পেয়েছেন যেহেতু অ্যারো ফাংশনগুলি thisলেক্সিক্যালি এনকোলেসিং প্রসঙ্গে চলেছে thisতাই তীরের অভ্যন্তরটি হ'লটি বর্তমান ছিল যেখানে আপনি বস্তুর সংজ্ঞা দিয়েছেন। যা বলতে হয়:

// Whatever `this` is here...
var chopper = {
    owner: 'Zed',
    getOwner: () => {
        return this.owner;    // ...is what `this` is here.
    }
};

আপনার ক্ষেত্রে, কোনও অবজেক্টে কোনও পদ্ধতি লিখতে চান, আপনার সহজভাবে traditional functionতিহ্যবাহী বাক্য গঠন বা ES6-তে প্রবর্তিত পদ্ধতি সিনট্যাক্স ব্যবহার করা উচিত :

var chopper = {
    owner: 'Zed',
    getOwner: function() {
        return this.owner;
    }
};

// or

var chopper = {
    owner: 'Zed',
    getOwner() {
        return this.owner;
    }
};

( এগুলির মধ্যে ছোট পার্থক্য রয়েছে, তবে আপনি কেবল তখন ব্যবহার superকরেন getOwner, যা আপনি নন বা আপনি যদি getOwnerঅন্য কোনও সামগ্রীতে অনুলিপি করেন তবে তা কেবল গুরুত্বপূর্ণ're )

এসো মেলিং তালিকায় তীর ফাংশনগুলির একটি টুইস্ট সম্পর্কে কিছুটা বিতর্ক ছিল যাগুলির নিজস্ব বাক্যগুলির সাথে একই রকম বাক্য গঠন রয়েছে this। তবে, এই প্রস্তাবটি খারাপভাবে গ্রহণ করা হয়েছিল কারণ এটি নিছক সিনট্যাক্স চিনির ফলে লোকেরা কয়েকটি অক্ষর টাইপ করে সংরক্ষণ করতে পারে এবং বিদ্যমান ফাংশন সিনট্যাক্সের চেয়ে কোনও নতুন কার্যকারিতা সরবরাহ করে না। বিষয়টিকে আনবাউন্ড তীরের ক্রিয়াগুলি দেখুন ।

Question 3

এই লাইনে getOwner: => (this.owner)হওয়া উচিত:

var chopper = {
    owner: 'John',
    getOwner: () => this.owner
}; //here `this` refers to `window` object.

আপনাকে thisকোনও ফাংশন হিসাবে ঘোষণা করতে হবে :

var chopper = {
    owner: 'John',
    getOwner() { return this.owner }
};

বা:

var chopperFn = function(){

    this.setOwner = (name) => this.owner = name;
    Object.assign(this,{
        owner: 'Jhon',
        getOwner: () => this.owner,
    })

}

var chopper = new chopperFn();
console.log(chopper.getOwner());
chopper.setOwner('Spiderman');
console.log(chopper.getOwner());

স্নিপেট প্রসারিত করুন

Question 4

তীর ফাংশনগুলি ব্যবহার করতে আমি অনুসরণ করি এমন একটি দ্রুত পরামর্শ।

object.method()সিনট্যাক্স ব্যবহার করা হবে এমন পদ্ধতিগুলির জন্য নন-অ্যার ফাংশন ব্যবহার করুন । (এগুলি হল এমন ফাংশন যা thisতাদের কলারের কাছ থেকে অর্থপূর্ণ মূল্য পাবে ))
প্রায় সব কিছুর জন্য তীর ফাংশন ব্যবহার করুন।

Question 5

এই ভিতরে তীর ফাংশন বস্তুর প্রসঙ্গ প্রতিফলিত করে না। পরিবর্তে এটি প্রসঙ্গটি দেয় যেখানে বস্তুর পদ্ধতিটি বলা হয়।

এটি পরীক্ষা করুন, এটি কখন তীর ব্যবহার করতে হবে এবং কখন নয় সে সম্পর্কে কিছুটা অন্তর্দৃষ্টি দেয়। https://dmitripavlutin.com/when-not-to-use-arrow-funifications-in-javascript/

Question 6

আপনার যদি তীর ফাংশনটি ব্যবহার করতে হয় তবে thisআপনি এতে পরিবর্তন করতে পারেন chopper,

var chopper = {
  owner: "John",
  getOwner: () => chopper.owner
};

যদিও এটি সর্বোত্তম অনুশীলন নয়, আপনি যখন বস্তুর নাম পরিবর্তন করেন, আপনাকে এই তীর ফাংশনটি পরিবর্তন করতে হবে।

Question 7

আরও একটি টিপ, কঠোর মোডে, thisএখনও অপরিবর্তিত পরিবর্তে উইন্ডোকে বোঝায়।

  (() => {
    "use strict";
    console.log(this); // window
  })();

  (function () {
    "use strict";
    console.log(this); // undefined
  })();