چیز‌هایی که از جاوااسکریپت نمیدانیم (قسمت دوم)

قسمت اول این مقاله را در اینجا و مقاله اصلی به زبان انگلیسی را در اینجا میتوانید بخوانید .
ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

6. the keyword "this" :

برای اشاره به object مورد نظرمون از‌کلمه کلیدی this استفاده میکینم که به نزدیکترین object اشاره میکنه .

let person = {  
 name: &quotshiva&quot, 
  age: 20,  
 introduceMe: function(){   
  return &quotMy name is &quot+this.name+&quot, I am &quot+this.age + &quot years old&quot   } } console.log(person.introduceMe());

خروجی به صورت زیر است:

My name is shiva, I am 20 years old

بهتره بگیم this به ابجکتی اشاره میکنه که در current context باشه :

let person = {
  name: &quotshirin&quot,
  age: 40,
  introduceMe: function(){
    return &quotMy name is &quot+this.name+&quot, I am &quot+this.age + &quot years old&quot
  },
  child: {
    name: &quotshiva&quot,
    age: 20,
    indroduceMe: function(){
      return &quotMy name is &quot+this.name+&quot, I am &quot+this.age + &quot years old&quot
    }
  }
};
console.log(person.indroduceMe());
console.log(person.child.indroduceMe());

خروجی به صورت زیر است:

My name is shirin, I am 40 years old
My name is shiva, I am 20 years old

اما زمانی که از asynchronous function استفاده میکنیم کمی پیچیده تر میشود به مثال زیر توجه کنید:

let person = { 
  firstName: &quotshiva&quot, 
  age: 20, 
  introduceMe: function(){ 
  setTimeout(function(){ 
      console.log(this.firstName + &quot is &quot + this.age + &quot years old&quot)  
   },6000) 
  } } 
person.introduceMe();

اما خروجی به شکل زیر است:

undefined is undefined years old

برای جلوگیری از این مشکل یکی از راه ها این هست که متدمون رو bind کنیم :

let person = { 
  firstName: &quotshiva&quot,
   age: 20, 
  introduceMe: function(){ 
    setTimeout(function(){ 
      console.log( this.firstName + &quot is &quot + this.age + &quot years old&quot) 
     }.bind(person),5000) 
  }
 }
 person.introduceMe();

خروجی به صورت زیر است:

shiva is 20 years old

7.Promise :

قبل از اینکه Promise رو توضیح بدم خیلی کوتاه راجب callback میگم .
از callback زمانی استفاده میکنیم که میخواهیم مطمئن شویم که قطعه کد مشخصی بعد از انجام قطعه کد دیگری انجام میشود :

function doHomework(subject, callback) { 
  alert(`Starting my ${subject} homework.`); 
  callback(); 
}

  doHomework('math', function() {
   alert('Finished my homework');
 });

در برنامه‌نویسی Asynchronous ما نمیدونیم که کار Async چه زمانی به پایان میرسه و به همین خاطر از Callback استفاده میکنیم. Callback یک تابع هست و زمانی فراخوانی میشه که کار Async به پایان رسیده باشه. پس با استفاده از Callback میتونیم کار خاصی رو بعد از به اتمام رسیدن فعالیت Async انجام بدیم.
اگر کار مورد نظر موفقیت‌آمیز باشه که اطلاعات در اختیارمون قرار میگیره و اگر هم اروری وجود داشته باشه میتونیم اون رو دریافت کنیم و Error handling رو انجام بدیم.
زمانی که از Callback‌ ها استفاده میکنیم، اغلب به مشکلات خوانایی کد برمیخوریم چون بعضی مواقع ممکنه که 10 مورد Callback تودرتو داشته باشیم و اصطلاحا به این مورد callback hell یا جهنم Callback میگن.
برای همین از Promise استفاده میکنیم .
مثال ساده ی زیر نحوه ی عملکرد Promise رو نشون میده:

let p = new Promise((resolve, reject) = > {
let a = 1+1
if (a== 2){
resolve('success')
}
else{
reject('failed')
}
});
p.then ((message) = >{
console.log('this is in then ' +message)
}).catch((message) = >{
console.log('this is in catch ' +message)
})

بجای succeccCallback تابع resolve و بجای errorCallback تابع reject رو پاس میدیم .
چیزی که به resolve پاس میدیم در اختیار then و چیزی که به reject پاس میدیم د راختیار catch قرار میگیره.

حالا فرض کنید که چند Promise داشته باشیم :

const recordVideoOne = new Promise ((resovle , reject) = >{
resolve(&quotvideo 1 recorded&quot) 
})

const recordVideoTwo = new Promise ((resovle , reject) = >{
 resolve(&quotvideo 2 recorded&quot)  
})

const recordVideoThree = new Promise ((resovle , reject) = >{
 resolve(&quotvideo 3 recorded&quot)  
})

Promise.all([
recordVideoOne ,
recordVideoTwo,
recordVideoThree
]).then ((messages) = > {
console.log(messages)
})

خروجی به صورت زیر خواهد بود:

0 :"video 1 recorded"
1 :"video 2 recorded"
2 :"video 3 recorded"

در Promise.all باید همه Promise ها انجام شوند یعنی اگر یکی از promise ها هم مقداری طول بکشد تا انجام شود بقیه Promise ها صبر میکنند تا آن Promise نیز به پایان برسد.

ولی اگر بخواهیم اولین Promise که مراحلش به پایان رسید را داشته باشیم میتوانیم از Promise.race استفاده کنیم .

اگر این مقاله برای شما مفید بود در انتشار آن کوتاهی نکنید.

شیوا توکل |29 فروردین 99