وبسایت شخصی حسن هاشمی

برنامه نویس. ایران. قم :))

امکانات syntax ی جدید جاوا اسکریپت در es6

توی این 2،3 روز یه چند ساعت فرصت خالی گیرم اومد و گفتم یه نگاهی به وضعیت فعلی جاوا اسکریپت بندازم. 

با امکانات جدیدی که اومده بخش زیادی از دردسرهای جاوا اسکریپت حل شدن. توی این پست به صورت لیستی یه مروری میکنم تا شما هم اگه اطلاع ندارین با خبری بشین :) 

توی این پست (مباحث مقدمات):

  • Arrow function
  • string template
  • rest parameter
  •  let keyowrd
  • optional parameters
  • Classes / inheritance / async + await


موارد پست بعدی ( مباحث پیشرفته تر ):

  • کلاس ها و ماژول ها
  • Generator/ Iterator + Promises : این مورد برای درک نحوه پیاده سازی async/await در جاوا اسکریپت خیلی مهم هست.
  • async/await: دو کلم کلیدی جدید که ��ه جاوا اسکریپت اضافه شدن و اگه با سی شارپ آشنا هستن، دقیقا همون کارهای قبلی رو می کنه براتون.
  • Proxy Objects: که یه api جدید هست. هنوز به کار خودم نیومده توی این 1 ساله که سوئیچ کردم به es 6


1- توابع Arrow و string template و پارامترهای optional

Arrow که یه چیزی تو مایه های همون lambda ی خودمون توی #C هست ولی خب اینجا بدنه هم میتونه داشته باشه. یه جورایی پسر همونه و string template هم یه چیزی شبیه string interploation توی سی شارپ 6 هست. 


var add = (first, second) => first + second;
add(3, 4); => "7"

var addMore = (first, second) =>
{
var result = first + second;
console.log(result);
return result;
};

var getFullName = (firstName, lastName) => `full name is: ${firstName} ${lastName}`
console.log(getFullName("Hassan", "Hashemi")); -> "full name is Hassan Hashemi";

نکته در مورد arrow function این هست که بستر اجرایی شون global جورایی مستقل تر هست. یعنی مثلا اگه event handler رو به صورت arrow ارسال کردید، در اون صورت دیگه this میشه window. در بسترش میشه بستر کدی که در زمان تعریف بهش ارجاع داده شده.


var person = {
  name: "hassan",
  printName: () => console.log(this.name), // will print "Undefined" !!!!
printNameNormal: function() { console.log(this.name); } // will print "Hassan"
};
person.printName();

2- کلمه کلیدی let

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


console.log(name); // will do => name is unidefined
var name = "hassan";
console.log(lastName);
let lastName = "Hashemi"; // will do => "Reference ERROR"
توی مورد اول اگه متغیر رو بعدا توی یه فایل دیگه تعریف می کردیم مقدارش اعمال می شد به بالایی ولی برای دومی خطا میده قسمت خیلی بهترش این هست:
let age = 25;
{
let age = 30;
let golabi = "Pear";
}
console.log(age) => will print "25"
console.log(golabi) => "RAISE ERROR!!"
متغیر گلابی برعکس چیزی که انتظار می رفت خارج از اسکوپ در دسترس نیست


و در نهایت یه چیزی که خیلی ساده هست ولی خیلی کار راه اندازه، پارامترهای دلخواه:

function printName(name = "John Nash")
{
console.log(name);
}
printName(); // invoking without specifying parameter -> "John Nash"


3- پارامترهای rest

این یکی که واقعا خیلی کار راه اندازه، کلاً کپی برابر اصل #C هست. و بهتون اجازه میده تعداد پارامتر نامعلوم به تابع پاس بدین وبعدا داخل تابع به صورت ارایه بهش دسترسی پیدا کنید.


function disableButtons(firstArg, ...buttons)
{
for(var b in buttons) { } // do something with buttons
}


4- پشتیبانی native از کلاس ها و وراثت و async/await

البته تا جایی که دیدم هنوز نمیشه بهش گفت وراثت واقعی (به این دلیل که قبلا اینجا گفتم) :

ولی خب همینش هم غنیمته، syntax ش تا حدود زیادی کپی برابر اصل typescript هست. (یه جورایی خودشه اصلا)

از async/await فقط یه تکه کد کوچیک میذارم، برای کسایی که سی شارپ بلد هستن. 

توضیحات تکمیلیش رو انشالله اگه عمری بود و حالش هم بود توی پست های بعدیوقتی Iterator و Generator رو توضیح دادم می نویسم.


class HttpHelper {
constructor() {
this.scheme = "http";
}
}

class HttpClient extends HttpHelper {

GetAsync(url) {
return $.get(url);
// will return a promise object that can be awaited
}

PostAsync(url, data) {
return $.post(url, data);
// will return a promise object that can be awaited
}
}

async function getUserInfo()
{
var info = await new HttpClient().GetAsync("/User/GetInfo");
console.log(info.fullName);
}

نکته اینه که دیگه برای متد های async نیازی call back نداریم چون Promise به شکست مواجه میشه و ما می تونیم به صورت نرمال exceptiong handling رو انجام بدیم. مثلا می تونیم بذاریمش توی try/cach و به خطا دسترسی پیدا کنیم . (دقیقا مثل سی شارپ)


x

Loading