প্রস্তাব অনুসারে , তীরগুলি লক্ষ্য করে "প্রচলিত কয়েকটি সাধারণ ব্যথা পয়েন্টগুলিকে সম্বোধন করা এবং সমাধান করা Function Expression।" তারা উদ্দেশ্যমূলকভাবে বাঁধাই করে thisএবং সংশ্লেষের সিনট্যাক্স সরবরাহ করে বিষয়গুলির উন্নতি করতে চেয়েছিল ।
যাহোক,
thisএকটানা নিয়মিতভাবে বাঁধতে পারে না- তীর ফাংশন সিনট্যাক্স নাজুক এবং অস্পষ্ট
অতএব, তীর ফাংশনগুলি বিভ্রান্তি এবং ত্রুটির জন্য সুযোগ তৈরি করে এবং একটি জাভাস্ক্রিপ্ট প্রোগ্রামারের শব্দভাণ্ডার থেকে বাদ দেওয়া উচিত, functionএকচেটিয়াভাবে প্রতিস্থাপন ।
লেক্সিকাল সম্পর্কিত this
this সমস্যাযুক্ত:
function Book(settings) {
this.settings = settings;
this.pages = this.createPages();
}
Book.prototype.render = function () {
this.pages.forEach(function (page) {
page.draw(this.settings);
}, this);
};
তীর ফাংশনগুলি যেখানে আমাদের thisকলব্যাকের অভ্যন্তরে কোনও সম্পত্তি অ্যাক্সেস করতে হবে সেখানে সমস্যাটি ঠিক করার উদ্দেশ্যে । এটি করার জন্য ইতিমধ্যে বেশ কয়েকটি উপায় রয়েছে: সমষ্টিগত পদ্ধতিতে 3 য় আর্গুমেন্ট ব্যবহারযোগ্য thisএকটি পরিবর্তনশীলকে ব্যবহার করতে পারে bindবা ব্যবহার করতে পারে Array। তবু তীরগুলি সহজতম কাজ বলে মনে হচ্ছে, সুতরাং পদ্ধতিটি এভাবে রিফ্যাক্ট করা যায়:
this.pages.forEach(page => page.draw(this.settings));
যাইহোক, বিবেচনা করুন যে কোডটি jQuery এর মতো একটি লাইব্রেরি ব্যবহার করেছে, যার পদ্ধতিগুলি thisবিশেষভাবে আবদ্ধ । এখন, এর thisসাথে মোকাবিলা করার জন্য দুটি মান রয়েছে:
Book.prototype.render = function () {
var book = this;
this.$pages.each(function (index) {
var $page = $(this);
book.draw(book.currentPage + index, $page);
});
};
আমরা ব্যবহার করা আবশ্যক function, যাতে জন্য eachজুড়তে অনুমতি thisপরিবর্তনশীল। আমরা এখানে একটি তীর ফাংশন ব্যবহার করতে পারি না।
একাধিক thisমান নিয়ে কাজ করাও বিভ্রান্তিকর হতে পারে, কারণ thisকোন লেখক যার বিষয়ে কথা বলছিলেন তা জানা মুশকিল :
function Reader() {
this.book.on('change', function () {
this.reformat();
});
}
লেখক আসলে ফোন করার ইচ্ছা করেছিল Book.prototype.reformat? বা সে বাঁধতে ভুলে গেছে this, এবং কল করার ইচ্ছা করেছিল Reader.prototype.reformat? যদি আমরা হ্যান্ডলারটিকে একটি তীর ফাংশনে পরিবর্তন করি তবে আমরা একইভাবে ভাবব যে লেখক গতিশীল চান কিনা this, তবুও একটি তীর বেছে নিয়েছেন কারণ এটি একটি লাইনে ফিট করে:
function Reader() {
this.book.on('change', () => this.reformat());
}
একটি হতে পারে: "এটি কি ব্যতিক্রমী যে তীরগুলি ব্যবহার করার জন্য কখনও কখনও ভুল ফাংশন হতে পারে? সম্ভবত আমাদের যদি কেবলমাত্র গতিশীল thisমানগুলির প্রয়োজন হয় , তবে বেশিরভাগ সময় তীর ব্যবহার করা ঠিক হবে" "
তবে নিজেকে এটি জিজ্ঞাসা করুন: "কোডটি ডিবাগ করা কি কোনও 'মূল্যবান' কাজ এবং 'তীরের কেস' দ্বারা ত্রুটির ফলস্বরূপ আনা হয়েছে? '' আমি কেবল বেশিরভাগ সময়ই সমস্যা এড়াতে পছন্দ করি না, তবে 100% সময়।
আরও ভাল উপায় আছে: সর্বদা ব্যবহার করুন function(তাই thisসর্বদা গতিবদ্ধভাবে আবদ্ধ হতে পারে), এবং সর্বদা thisএকটি চলক মাধ্যমে রেফারেন্স । চলকগুলি বর্ণনামূলক এবং বহু নাম ধরে নেওয়া হয়। thisকোনও ভেরিয়েবলকে অর্পণ করা আপনার উদ্দেশ্যগুলি পরিষ্কার করে দেবে:
function Reader() {
var reader = this;
reader.book.on('change', function () {
var book = this;
book.reformat();
reader.reformat();
});
}
তদ্ব্যতীত, সবসময় বরাদ্দ thisএকটি পরিবর্তনশীল (এমনকি যখন সেখানে একটি একক thisঅথবা অন্য কোন ফাংশন) নিশ্চিত করে নিজের উদ্দেশ্য স্পষ্ট থাকা পরেও কোড পরিবর্তিত হয়।
এছাড়াও, গতিশীল thisখুব কমই ব্যতিক্রমী। jQuery 50 মিলিয়নেরও বেশি ওয়েবসাইটে (ফেব্রুয়ারী 2016 এ এই লেখা হিসাবে) ব্যবহৃত হয়। এখানে অন্যান্য এপিআইগুলি thisগতিশীলভাবে বাঁধাই করছে :
- মোচা (গতকাল ~ 120 কে ডাউনলোড) এর মাধ্যমে এর পরীক্ষার জন্য পদ্ধতিগুলি প্রকাশ করে
this।
- গ্রান্ট (গতকাল ~ 63 কে ডাউনলোড) এর মাধ্যমে বিল্ড টাস্কের পদ্ধতি প্রকাশ করে
this।
- ব্যাকবোন (গতকাল 22 ডলার ডাউনলোড) অ্যাক্সেসের পদ্ধতিগুলি সংজ্ঞায়িত করে
this।
- ইভেন্ট API গুলি (করে DOM এর মত) একটি পড়ুন
EventTargetসঙ্গে this।
- প্রোটোটাইপাল এপিআইগুলি যা প্যাচযুক্ত বা প্রসারিত তার সাথে দৃষ্টান্তগুলি উল্লেখ করে
this।
( Http://trends.builtwith.com/javascript/jQuery এবং https://www.npmjs.com এর মাধ্যমে পরিসংখ্যান ))
আপনার সম্ভবত thisইতিমধ্যে গতিশীল বাইন্ডিংয়ের প্রয়োজন ।
একটি শব্দার্থক thisকখনও কখনও প্রত্যাশিত হয়, তবে কখনও কখনও হয় না; যেমন একটি গতিশীল thisকখনও কখনও আশা করা হয়, কিন্তু কখনও কখনও না। ধন্যবাদ, একটি আরও ভাল উপায় আছে, যা সর্বদা প্রত্যাশিত বাঁধাই উত্পাদন করে এবং যোগাযোগ করে।
টর্স সিনট্যাক্স সম্পর্কিত
তীর ফাংশনগুলি ফাংশনগুলির জন্য একটি "সংক্ষিপ্ত সিনট্যাকটিকাল ফর্ম" সরবরাহ করতে সফল হয়েছিল। তবে এই সংক্ষিপ্ত ফাংশনগুলি কি আপনাকে আরও সফল করে তুলবে?
Is x => x * x"সহজ পড়ার জন্য" চেয়ে function (x) { return x * x; }? সম্ভবত এটি হ'ল কারণ এটির একটি একক, সংক্ষিপ্ত কোডের কোড উত্পাদন করার সম্ভাবনা বেশি। ডাইসনের সাথে সামঞ্জস্য করা পর্দা থেকে পড়ার কার্যকারিতার উপর পড়ার গতি এবং রেখার দৈর্ঘ্যের প্রভাব ,
একটি মাঝারি লাইনের দৈর্ঘ্য (প্রতি লাইনে 55 টি অক্ষর) স্বাভাবিক এবং দ্রুত গতিতে কার্যকর পঠন সমর্থন করে appears এটি বোধের সর্বোচ্চ স্তরের উত্পাদন করেছে। । ।
কন্ডিশনাল (টেরিনারি) অপারেটর এবং একক-লাইন ifস্টেটমেন্টের জন্য অনুরূপ ন্যায়সঙ্গততা তৈরি করা হয় ।
তবে, আপনি কি প্রস্তাবটিতে বিজ্ঞাপন দেওয়া সাধারণ গাণিতিক কাজগুলি সত্যিই লিখছেন ? আমার ডোমেনগুলি গাণিতিক নয়, তাই আমার সাবরুটাইনগুলি খুব কমই মার্জিত হয়। পরিবর্তে, আমি সাধারণত তীরের ক্রিয়াকলাপগুলি কলামের সীমা ভেঙে দেখি এবং সম্পাদক বা স্টাইল গাইডের কারণে অন্য লাইনে আবৃত করি যা ডাইসনের সংজ্ঞা অনুসারে "পাঠযোগ্যতা" বাতিল করে দেয়।
কেউ বলতে পারে, "সম্ভব হলে সংক্ষিপ্ত ফাংশনগুলির জন্য সংক্ষিপ্ত সংস্করণটি কীভাবে ব্যবহার করা যায়?" তবে এখন একটি স্টাইলিস্টিক নিয়ম একটি ভাষার সীমাবদ্ধতার বিরোধিতা করে: "কখনও কখনও কেবলমাত্র দীর্ঘতম স্বরলিপি thisযেমন প্রত্যাশার সাথে আবদ্ধ হয় তা মনে রেখে, সংক্ষিপ্ততম ফাংশন স্বরলিপিটি ব্যবহার করার চেষ্টা করুন ।" এই ধরনের সংঘাত তীরগুলি বিশেষত ব্যবহারের প্রবণ করে তোলে।
তীর ফাংশন সিনট্যাক্স সহ অসংখ্য সমস্যা রয়েছে:
const a = x =>
doSomething(x);
const b = x =>
doSomething(x);
doSomethingElse(x);
এই উভয় ফাংশন সিনথেটিকভাবে বৈধ। তবে doSomethingElse(x);এর শরীরে নয় b, এটি কেবলমাত্র দুর্বল-উদ্বিগ্ন, শীর্ষ-স্তরের বক্তব্য।
ব্লক ফর্মটিতে প্রসারিত করার সময়, আর কোনও অন্তর্নিহিত নেই return, যা পুনরুদ্ধার করতে ভুলে যেতে পারে। তবে এই অভিব্যক্তিটি কেবলমাত্র একটি পার্শ্ব-প্রতিক্রিয়া তৈরির উদ্দেশ্যেই করা হয়েছিল, সুতরাং কে জানে যে কোনও স্পষ্টতই returnএগিয়ে যাওয়ার প্রয়োজন হবে কিনা?
const create = () => User.create();
const create = () => {
let user;
User.create().then(result => {
user = result;
return sendEmail();
}).then(() => user);
};
const create = () => {
let user;
return User.create().then(result => {
user = result;
return sendEmail();
}).then(() => user);
};
বিশ্রামের প্যারামিটার হিসাবে চিহ্নিত করা যেতে পারে তা স্প্রেড অপারেটর হিসাবে পার্স করা যায়:
processData(data, ...results => {}) // Spread
processData(data, (...results) => {}) // Rest
অ্যাসাইনমেন্টটি ডিফল্ট যুক্তিগুলির সাথে বিভ্রান্ত হতে পারে:
const a = 1;
let x;
const b = x => {}; // No default
const b = x = a => {}; // "Adding a default" instead creates a double assignment
const b = (x = a) => {}; // Remember to add parens
ব্লকগুলি বস্তুর মতো দেখতে:
(id) => id // Returns `id`
(id) => {name: id} // Returns `undefined` (it's a labeled statement)
(id) => ({name: id}) // Returns an object
এটার মানে কি?
() => {}
লেখক কি কোনও অনিঃপশন তৈরি করার পরিকল্পনা করেছেন, বা এমন কোনও ফাংশন যা একটি খালি অবজেক্ট ফেরত দেয়? (এটি মাথায় রেখে, আমাদের কি কখনও এই {পরে রাখা উচিত =>? আমরা কি কেবলমাত্র বাক্য বাক্য গঠনকে সীমাবদ্ধ রাখতে পারি? এটি তীরের ফ্রিকোয়েন্সি আরও কমিয়ে দেবে))
=>দেখতে দেখতে <=এবং >=:
x => 1 ? 2 : 3
x <= 1 ? 2 : 3
if (x => 1) {}
if (x >= 1) {}
তাত্ক্ষণিকভাবে একটি তীর ফাংশন এক্সপ্রেশন শুরু করতে, একটি অবশ্যই ()বাহিরে রাখা উচিত , তবুও ()ভিতরে থাকা বৈধ এবং উদ্দেশ্যমূলক হতে পারে।
(() => doSomething()()) // Creates function calling value of `doSomething()`
(() => doSomething())() // Calls the arrow function
যদিও, যদি কেউ (() => doSomething()());তাত্ক্ষণিকভাবে অনুরোধ করা ফাংশন এক্সপ্রেশন লেখার অভিপ্রায় নিয়ে লিখেন, তবে কিছুই হবে না।
উপরোক্ত সমস্ত ক্ষেত্রে মাথায় রেখে তীর ফাংশনগুলি "আরও বোধগম্য" তর্ক করা শক্ত hard এক পারে এই সিনট্যাক্স ব্যবহার করা প্রয়োজন সব বিশেষ নিয়ম শিখতে। এটা কি আসলেই এর যোগ্য?
এর সিনট্যাক্সটি functionনিঃসন্দেহে সাধারণীকরণ করা হয়। functionএকচেটিয়াভাবে ব্যবহার করার অর্থ ভাষাটি নিজেই একটি বিভ্রান্তিকর কোড লিখতে বাধা দেয়। সমস্ত ক্ষেত্রে সিনথেটিকভাবে বোঝা উচিত এমন প্রক্রিয়াগুলি লিখতে, আমি চয়ন করি function।
একটি গাইডলাইন সম্পর্কে
আপনি এমন একটি গাইডলাইন অনুরোধ করেছেন যা "পরিষ্কার" এবং "ধারাবাহিক" হওয়া দরকার। তীর ফাংশনগুলি ব্যবহারের ফলে পরিণামে সিনথেটিক্যালি-বৈধ, যৌক্তিকভাবে-অবৈধ কোড হবে, উভয় ফাংশনই একত্রে জড়িত, অর্থপূর্ণ এবং নির্বিচারে। অতএব, আমি নিম্নলিখিত অফার:
ES6 এ ফাংশন স্বরলিপির জন্য গাইডলাইন:
- সর্বদা সঙ্গে পদ্ধতি তৈরি করুন
function।
- সর্বদা
thisএকটি পরিবর্তনশীল বরাদ্দ করুন । ব্যবহার করবেন না () => {}।
Fixed this bound to scope at initialisationএকটি সীমাবদ্ধতা হিসাবে বিবেচনা ?