از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
کلاس‌های جاوا اسکریپت شکی نیست که محبوبیت جاوا اسکریپت در چند سال اخیر به شدت افزایش یافته است و به سرعت در حال تبدیل شدن به زبان انتخابی نه تنها برای کد سمت کلاینت، بلکه سمت سرور نیز شده است. من هرگز طرفدار پر و پا قرص جاوا اسکریپت نبودم، فقط خیلی نامرتب و بی جهت گیج کننده به نظر می رسید. در حالی که من هنوز …
سرفصلهای مطلب
معرفی
شکی نیست که محبوبیت جاوا اسکریپت در چند سال اخیر به شدت افزایش یافته است و به سرعت در حال تبدیل شدن به زبان انتخابی نه تنها برای کدهای سمت کلاینت، بلکه سمت سرور نیز شده است. من هرگز طرفدار پر و پا قرص جاوا اسکریپت نبودم، فقط خیلی نامرتب و بی جهت گیج کننده به نظر می رسید. در حالی که من هنوز بر این باورم که برخی از اینها درست است، بسیاری از آنها فقط یک سوء تفاهم از زبان و عدم تحمل برای فقدان برخی ویژگی ها/ نحو (یعنی کلاس های سنتی) بود.
با انتشار ES6، به نظر می رسد جاوا اسکریپت بیشتر به سمت زبانی که من شخصاً می خواهم، حرکت می کند، با افزودن کلاس های سنتی، ژنراتورها، تکرار کننده ها، Promises داخلی و بسیاری ویژگی های دیگر. من شخصاً معتقدم که این انتقال برای توسعه دهندگانی که از زبان های دیگری مانند جاوا (مانند من انجام دادم)، پایتون و C++ را تسهیل می کند. یادگیری جاوا اسکریپت امکانات بسیار بیشتری را در اختیار توسعه دهندگان قرار می دهد و به آنها امکان می دهد تقریباً برای هر پلتفرمی که می خواهید کد بنویسند (در سمت مرورگر، سمت سرور از طریق گره/io.js، برنامه های موبایل از طریق React Nativeو حتی برنامه های دسکتاپ).
مراقب بودن روی ویژگی‌های جدید ES6 و ES7، همه آنها به دلایلی وجود دارند و برخی از مشکلات بزرگ را برای توسعه‌دهندگان حل می‌کنند، مانند برخورد با جهنم پاسخ به تماس.
در این مقاله، ویژگی‌ها و اخطارهای کلاس‌های ES6 را مرور می‌کنم.
کلاس های ES6
بنابراین، بیایید مستقیماً وارد آن شویم. در اینجا موارد ضروری برای ایجاد کلاس ES6 آمده است:
class Animal {}
var a = new Animal();
این دقیقاً همان چیزی است که به نظر می رسد، یک کلاس خالی را بدون ویژگی یا متد تعریف می کند. چند راه مختلف برای تعریف کلاس ES6 وجود دارد که نحو بالا یکی از آنهاست. همچنین می‌توانید کلاس‌های ناشناس یا بدون نام را تعریف کنید، مانند:
var Animal = class {
constructor(name) {
this.name = name;
}
};
این معادل کلاس‌های ناشناس در جاوا است که در آن کلاس را همزمان تعریف و نمونه‌سازی می‌کنید.
از اینجا می توانیم ویژگی ها را اضافه کنیم. برای انجام این کار، ما باید آنها را در داخل سازنده تعریف کنیم، برخلاف خارج از آن مانند جاوا.
class Animal {
constructor() {
this._name = 'cow';
}
}
var a = new Animal();
console.log(a._name); // Prints 'cow'
برای دسترسی یا اصلاح این داده ها، می توانیم متدهای گیرنده و تنظیم کننده را تعریف کنیم:
class Animal {
constructor(n) {
this._name = n;
}
get name() {
return this._name;
}
set name(n) {
this._name = n;
}
}
var a = new Animal('cow');
console.log(a.name); // Prints 'cow'
a.name = 'cat'
console.log(a.name); // Prints 'cat'
مانند بسیاری از زبان‌های دیگر، می‌توانیم از هر دو روش استاتیک و نمونه برای دسترسی یا دستکاری داده‌های کلاس استفاده کنیم:
class Animal {
constructor(n) {
this._name = n;
}
get name() {
return this._name;
}
set name(n) {
this._name = n;
}
fullName() {
return 'holy ' + this._name;
}
static className() {
return 'Animal';
}
}
var a = new Animal('cow');
console.log(Animal.className()); // Prints 'Animal'
console.log(a.fullName()); // Prints 'holy cow'
برای توسعه دهندگان جاوا و سی شارپ، این باید آشنا به نظر برسد. ما روش های سنتی و روش های ایستا را داریم، درست مانند بسیاری از زبان های دیگر.
تا کنون، ویژگی‌هایی که من نشان داده‌ام چیز زیادی به جاوا اسکریپت اضافه نمی‌کند که قبلاً نمی‌توانستیم انجام دهیم. سودمندی واقعی کلاس‌های ES6 زمانی مشخص می‌شود که از وراثت با آن استفاده کنیم extends کلمه کلیدی. این قابلیت قبلا در دسترس بود، اما باید با آن مقابله می‌کردید prototype و استفاده کنید util.inherits، که کمی ناخوشایند بود و برای توسعه دهندگان تازه کار JS خیلی واضح نبود. اکنون می توانیم کاری شبیه به این انجام دهیم:
class Dog extends Animal {
constructor() {
super('dog');
}
fullName() {
return 'snoop ' + this._name;
}
static className() {
return 'Dog';
}
}
var d = new Dog();
console.log(Dog.className()); // Prints 'Dog'
console.log(d.fullName()); // Prints 'snoop dog'
این نحو و رفتار باید به اندازه کافی قابل درک و شهودی برای اکثر توسعه دهندگان باشد تا بتوانند مستقیماً وارد آن شوند.
یکی از نکاتی که باید مراقب آن بود «بالا بردن» است. Hoisting رفتار پیش‌فرض جاوا اسکریپت برای انتقال اعلان‌ها به بالا است. تفاوت بین اعلان کلاس و اعلان تابع در این است که توابع هستند برافراشته شد و کلاس ها نیستند. یعنی برای استفاده از یک کلاس باید تعریف شود قبل از شما از آن استفاده می کنید
var a = new Animal(); // ReferenceError!
class Animal {}
کارکرد، روی از سوی دیگر، می توان قبل از تعریف آنها استفاده کرد.
نتیجه
اگرچه بسیاری از این قابلیت همیشه در دسترس بوده است، من معتقدم این گام بزرگی در کاربرپسندتر کردن JS است. نحو و سهولت استفاده یک عامل بزرگ در پذیرش زبان است، بنابراین این امر احتمالاً محبوبیت JS را بیشتر خواهد کرد.
نظر شما در مورد کلاس های جدید ES6 چیست؟ نظر خود را در نظرات با ما در میان بگذارید!
(برچسب‌ها برای ترجمه)# توضیح داده شده
منتشر شده در 1403-01-30 22:45:05
