۳۰
تیر

جلسه ۰۲ : مروری بر ES6

دسته‌بندی‌ها :

با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
با دومین جلسه از دوره آموزش React JS در خدمت شما عزیزان هستیم.
در این جلسه مروری بر ES6 (گرامر ES6) که جدیدترین نسخه زبان جاوا اسکریپت است، خواهیم داشت.

فهرست

مروری بر ES6

ES6 مخفف ECMAScript 6 است.

ECMAScript برای استاندارد سازی جاوا اسکریپت ایجاد شده و ES6 نسخه ششم آن است.
React هم از ES6 برای قابلیت های جدید از جمله شی گرایی بهتر و پیشرفته تر استفاده می‌کند.

کلاس ها (Class)

ES6 برای اولین بار امکان استفاده از کلاس ها در جاوا اسکریپت را معرفی کرد.

کلاس ها برای ساخت اشیا (object) به کار می‌روند.

برای تعریف کلاس از کلمه کلیدی class استفاده می‌کنیم. همچنین کلاس ها دارای تابعی به نام constructor (سازنده) هستند که برای تعریف و مقداردهی اولیه متغیر ها استفاده می‌شود.

مثال:

مثال :

tructor(name) {
    this.brand = name;
  }
}

tructor(name) {

this.brand = name;

}

برای ساخت اشیا از روی کلاس نیز از کلمه کلید new استفاده می‌کنیم:

مثال :

class Car {
  constructor(name) {
    this.brand = name;
  }
}

mycar = new Car("Ford");

class Car {

constructor(name) {

this.brand = name;

}

mycar = new Car("Ford");

هنگامی که یک شی ایجاد شود، تابع سازنده یا constructor به صورت خودکار اجرا می‌شود.

متد ها (Method)

متد ها همانند توابع هستند با این تفاوت که در کلاس تعریف می‌شوند و جزئی از ان هستند.

در مثال زیر متدی به نام present را تعریف و با استفاده از شی mycar ان را فراخوانی کرده ایم.

مثال :

class Car {
  constructor(name) {
    this.brand = name;
  }
  
  present() {
    return 'I have a ' + this.brand;
  }
}

mycar = new Car("Ford");
mycar.present();

class Car {

constructor(name) {

this.brand = name;

}

present() {

return 'I have a ' + this.brand;

}

mycar = new Car("Ford");

mycar.present();

وراثت

وراثت ویژگی در برنامه نویسی شی گرایی است که این امکان را به ما می‌دهد تا یک کلاس را از کلاس دیگر ارث بری کنیم. یعنی به تمام متد ها و متغیر های کلاس والد در کلاس فرزند دسترسی داشته باشیم.

برای ایجاد وراثت از کلمه کلیدی extends استفاده می‌کنیم.

در مثال از کلاس model، کلاس car را به ارث می‌برد.

مثال :

class Car {
  constructor(name) {
    this.brand = name;
  }

  present() {
    return 'I have a ' + this.brand;
  }
}

class Model extends Car {
  constructor(name, mod) {
    super(name);
    this.model = mod;
  }  
  show() {
      return this.present() + ', it is a ' + this.model
  }
}
mycar = new Model("Ford", "Mustang");
mycar.show();

class Car {

constructor(name) {

this.brand = name;

}

present() {

return 'I have a ' + this.brand;

}

class Model extends Car {

constructor(name, mod) {

super(name);

this.model = mod;

}

show() {

return this.present() + ', it is a ' + this.model

}

mycar = new Model("Ford", "Mustang");

mycar.show();

خروجی:

مثال :

 I have a Ford, it is a Mustang

1	I have a Ford, it is a Mustang

متد super به متد سازنده کلاس والد اشاره دارد.

توابع Arrow

با استفاده از Arrow Functions نیازی به کلیمه کلیدی fuction برای تعریف توابع نیست و در نتیجه کد کمتری تولید می‌شود.

تابع معمولی:

مثال :

hello = function() {
  return "Hello World!";
}

hello = function() {

return "Hello World!";

}

تابع Arrow:

مثال :

hello = () => {
  return "Hello World!";
}

hello = () => {

return "Hello World!";

}

حتی می‌توان برای کوتاه تر شدن کد از آکولاد ها و کلمه کلیدی return نیز چشم پوشی کرد:

مثال :

hello = () => "Hello World!";

1	hello = () => "Hello World!";

نکته : این کار فقط برای توابعی که حاوی یک خط کد هستند امکان پذیر است.

در مثال از از تابع arrow با پارامتر استفاده می‌کنیم:

مثال :

hello = (val) => "Hello " + val;

1	hello = (val) => "Hello " + val;

متغیر ها

قبل از ES6 تنها یک نوع متغیر در جاوا اسکریپت وجود داشت که با کلمه کلیدی var تعریف می‌شد.
اگر بدون کلمه کلیدی var تعریف می‌شدند، به شی سراسری اختصاص می‌یافتند.

در ES6 دو نوع جدید متغیر ها با کلمات کلیدی let و const معرفی شدند.

اگر متغیر های var در خارج از توابع تعریف شوند، به شی سراسری تعلق دارند و از همه جا می‌توان به آن ها دسترسی پیدا کرد.
اگر درون توابع تعریف شوند، فقط در همان تابع قابل دسترسی هستند.
اگر دورن یک بلاک کد مانند حلقه ها تعریف شوند، در خارج بلاک نیز قابل دسترس خواهند بود.

متغیر های let فقط در بلوک های کد و توابعی که تعریف می‌شوند، در دسترس هستند.

متغیر های const نیز فقط در بلوک هایی که تعریف می‌شوند، در دسترس هستند. همچنین مقدار این متغیر ها پس از مقداردهی اولیه هرگز تغییر نمی‌کند.

جلسه مروری بر ES6 نیز به پایان رسید.

در جلسه بعد به آموزش رندر HTML در React خواهیم پرداخت.

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۰۲ : مروری بر ES6

مروری بر ES6

کلاس ها (Class)

متد ها (Method)

وراثت

توابع Arrow

متغیر ها

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ