خلاصه مطالب فصل جاوااسکریپت پیشرفته ( مرتب شده )

توابع و نکات پیشرفته در توابع

Arrow functions  :

let func = (arg1,arg2,.....,argN) => expression

توابع بازگشتی  :  توابعی هستند که اینقدر خودشون رو صدا می زنند تا به یک نتیجه دلخواه درون خودش برسه 

function pow(x,n){  
     if(n == 1 ) {
       return x;
       } else { 
       return x * pow(x,n-1) 
          }
        }
 alert( pow(2,3))   // 8     
 
   1- pow(2,4) =  2 * pow(2,3)
   2- pow(2,3) =  2 * pow(2,2)
   3- pow(2,2) =  2 * pow(2,1)
   4- pow(2,1) =  2
     

rest parameters :  دادن بی نهایت پارامتر به توابع امون و همیشه باید به عنوان ارگیومنت آخر در توابع امون قرار بگیرند

spread syntax : که ما با استفاده از اون می توانیم به مقادیر داخلی یک آرایه بیایم و دسترسی داشته باشیم

let arr1 = [1,-2,3,4]
let arr2 = [8,3,-8,1]
alert(Math.max(1,...arr1,...arr2,25))
یکی دیگه از کاربردهاش تبدیل کردن دو تا آرایه یا مرج کردن آن ها باهم دیگه هست

نکته :   می توان از spread برای کپی کردن محتوای یک ارایه درون یک آرایه جدید یا کپی کردن یک شی استفاده کرد 

کاربرد های استفاده از کلمه کلیدی  func در  named function  

1 - امکان استفاده بازگشتی از توابع تعریف شده به صورت named function 

2 - عدم دسترسی از بیرون به func  و برطرف کردن مشکل از دست رفتن فرنس به تابع 

wrapper : فرض کنید ما یک تابعی داریم به نام تسن  و میایم و داخل یک تابع دیگه این تابع فرضی تست مون رو صدا میزنیم  اون تابعی که اومد نشست دور تابع اصلی مون یا تست امون رو میگن بهش wrapper 

Decorator  :  توابعی هستند که میان و هم wrapper  میکنن همم تغیراتی رو ی خروجی میدهند

الگوهای برنامه نویسی 

-------------------------------------------------------------------------------------------

1 -  Procedural programing : برنامه نویسی خط به خط یا از بالا به پایین که اجرای آن ها هم از بالا به پایین هستش همچنین تقسیم بندی عملکرد های مختلف به فانکشن ها یا  Routine ها هستش و  وجود متغیر های مشترک بین تمام کد ها ( global ) هستش که با بالارفتن تعداد توابع و متغیر هامون به مشکل می خوریم و به این نوع مشکل خوردن اصطلاحا می گویند Spaghetti code  که 4 تا مشکل اساسی دارد 

اولی : روابط پیچیده بین بخش های کد

دومی : اشتراک داده ها بین تمام بخش های کد

سومی :  عدم کنترل روی تغیرات مربوط به یک بخش از کد 

چهارمی :  تاثیرهای غیر قابل پیش بینی در نتیجه تغیر بخشی از کد 

2 - Object Oriented Programming :  اولین مفهومی که در برنامه نویسی شی گرا باید یاد بگیریم اینه که هر چیزی در جهان مربوط تبدیل به یک object می شود و ما باید بیایم و کد هامون رو به بخش هایی به نام همین آبجکت ها تقسیم بندی کنیم تمام اطلاعات و عملکرد های یک چیز در داخل کلاس مربوط به خودش قرار میگیرد و هر آبجکت دارای کنترل کامل روی دیتای مربوط به خودش هست 

مزایای برنامه نویسی شی گرا 

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

دومی :  جلوگیری از تغیرات ناخواسته روی اطلاعات یک آبجکت

سومی : وجود ساختار معنادار برای تکه های کد برنامه و ساده سازی آن

چهارمی : جلوگیری از تکرار کد در بخش های مختلف 

پنجمی  : جلوگیری از ایجاد پیچیدگی های بیش از حد در روابط بخش های مختلف برنامه

مفاهیم پایه ای در برنامه نویسی شی گرایی 

1 - Abstraction : به معنی  ساده سازی برای کاربریی که ازش استفاده می شود برای مثال کاربر یک لاس میشه اون بخش هایی از اون کلاس یا کلاس هایی دیگه ای که از اون میان و استفاده می کند 

2 - Encapsulation : به معنی محفوظ کردن یا داخل یک محفظه قرار دادن هستش اون اطلاعات مربوط به یک کلاس رو طوری در آن کلاس قرار می دهیم که دیگه توسط کلاس های دیگه قابل تغیر نیست و یک کلاس دیگه به اون اطلاعات دسترسی نداشته باشد 

3 - Inheritance :به معنی ارث بری به این صورت که یک کلاسی می تونه ویژگی های یک کلاس رو به ارث ببره و ویژگی های جدید رو هم در خودش داشته باشه که به کلاسی که ازش ارث برده میگن کلاس parent و به خود اون کلاس میگن child ( ما بهتره بیایم و کلاس هایی به صورت پدر و فرزندی با هم دیگه  ارث بری کنیم که ویژگی های مشترک زیاد رو با هم داشته باشند ) 

4 - polymorphism : چند شکلی بودن  مثل مدل های صحبت کردن مثل صحبت کردن که میتونه متد هایی مختلفی در کلاس های مختلفی باشه که در پیاده سازی این متد ها باهم فرق دارند متد هایی که نام های یکی دارند ولی مدل های پیاده سازی شون باهم دیگه تفاوت دارد 

تفاوت class و object : ویژگی ها و عملکرد های یک چیز در قالب کلاس مدل بندی می شود  همچنین یک شی چیزی هست که از روی مدل تعریف شده کلاس ساخته می شود و کلاس نقشه ای است که از روی آن آبجکت ساخته می شود و اشیا عینیت یافته های کلاس ها هستند

نکته : مدل کردن در جهان یعنی تعریف چیزهایی از جهان که در برنامه از آن ها استفاده میکنیم در قالب یک آبجکت و ویژگی ها و عملکرد هایی که به آن نیاز داریم

function createPerson(name,age,height){
  var personObject = {}
  personObject.name = name;
  personObject.age = age;
  personObject .height = height;
  personObject.sayName = function(){
        return "My name is : " + personObject.name 
       }
       
    return personObject 
}

var mohamad = createPerson('mohamad',50,19)
console.log(mohamad.sayName())

function Person(name,age,height){
this.name = name;
this.age = age;
this.height = height;
this.sayName = function(){
        return "My name is : " + personObject.name 
       }
}
var emad = new Person('emad',50,34)
console.log(emad .sayName())

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

نکته : کلاس ها یا پروتوتایپ ها در واقع یک الگو یا یک نقشه هستش که بر اساس اون شی ما ساخته بشه 

نکته : تمامی Object ها در جاوااسکریپت یک آبجکت به نام پروتوتایپ دارند و همه چیز در جاوااسکریپت بر مبنای آبجکت ها بنا شده است

نکته : در هنگامی که یک شی میاد و از یک شی دیگه ارث بری میکند اگه یکی از متد های اون شی یکی باشد با اونی که ارث بری میکند اولویت با متدی که درون خودش وجود دارد هستش اما اگر خودش اون تابع نداشته باشه جاوااسکریپت میره و در پدرش دنبال اون تابع میگرده و اگر باز هم نباشه به پدر پدرش میره تا اون رو بگرده 

let animal = { 
  eats : ture,
  walk(){ 
    console.log('walking .....')
  }
}
let rabbit = { 
   __proto__ " : animal,
   jumb : ture
}
console.log(rabbit);
rabbit.walk();

نکته : کپسوله سازی در آبجکت های literal با استفاده از getter و setter انجام می شود ولی در ابجکت های کانستراکتور 

تفاوت  prototype و  __proto__  اولی در آبجکت های کانستراکتور در واقع باعث ساخته شدن دومی میشه و کاربرد های زیادی داره و می توانیم بیایم و با استفاده از آن تابع امون رو گسترشش بدهیم 

تفاوت کلاس با کانستراکتور فانکشن ها  :

1 - یک شی از یک کلاس را حتما باید با استفاده از کلمه کلیدی new ایجاد کرد 

2 - متد ها در گلاس  اصطلاحا non-enumerable  هستند در نتیحه در for..in طاهر نمی شوند

3 -کلاس ها همیشه در حالت strict mode هستند

در داخل متد های خود کلاس ها ما به اجزای خود کلاس با استفاده از this می تونیم بیایم و دسترسی داشته باشیم 

اشاره گر this در متد  

برای دسترسی به اشاره گر کلاس در متد های آن به صورت ارسال به عنوان call Back Function   

( وقتی ما در داخل یک متد کلاس میایم و برای دسترسی از this استفاده میکنیم هنگام نمونه گیری از این کلاس اصطلاحا اون this میاد و گم میشه و سر این اتفاق باید از راه حل های زیر استفاده بکنیم )

1 - استفاده از bind 

2 - استفاده از arrow function ها 

اجزای تشکیل دهنده یک کلاس 

class MyClass  {  
  prop = value // property
  
  constructor(...){ // constructor
  //...
  }
  
  method(...){} // method
  
  get something(..){}  // getter method
  
  set something(..){}  // setter method
  
  [Symbol.iterator](){} // method with computed name (symbol here)

}

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

ارث بری پویا  :  مابعد از کلمه کلیدی extends در کلاس ها ما میتونیم بیایم و هر نوع expression ای رو انجام بدهیم

و ما میتونیم نوع ارث بری متناسب با شرایط بیایم و مدیریت اش بکنیم  و استفاده زیاد ازش باعث میشه پیچیدگی کدمون زیاد بشه

function f(phrase){
    return class {
    sayHi(){  alert(phrase);  }
    }
}
class  User extends f("Hello"){}
new User().sayHi();  // Hello

مفاهیم  overloading Vs overriding :  هر دو تای این مفهوم یعنی این که ما یک کلاس x داریم و یک کلاس y  از اولی اومده و ارث بری کرده و کلاس x ما یک تابع یا یک متدی داشته و در کلاس فرزند ما میتونیم همون تابع با همون شرایط فرخوانی کنیم که در یک شرایطی میان و بهش میگن overloading یا overriding حال در شرایطی میگن   overloading  اون تابع یا متدی که در کلاس فرزند نوشته شده همون کار متد پدر رو انجام میده یا تکرار کنه یا بر اساس ورودی که میگیره یک پردازشی رو بکنه  overriding  اضافه کردن یک ارزش افزوده به اون کار اصلی هست یا یک کار دیگه به اون اضافه کنه

مثال برای درک بهتر مفهوم overriding  

class animal {

  walking() {
    console.log('.....  walking ......')
    }
}

class rabit extends animal {

  walking(){  
       console.log('.....  walking ......')
    }
}

let rabit1 = new rabit();
rabit1.walking();

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

class animal {
  walking() {
    console.log('.....  walking ......')
    }
}

class rabit extends animal {
  walking(){  
       console.log('.....  walking ......')
    }
}

let rabit1 = new rabit();
rabit1.walking();
rabit1.walking(10);

ما به طور کلی  overriding رو برای 3 تا چیز میتونیم بیاریم 

1 -  method    :   که در بالا مثالش آورده شد

2 - construct : در ارث بری ها حتما باید کانتستراکتور پدر باید ارث بری بشه وگرنه ارث بی انجام نمی شود که در کانستراکتور برای دسترسی به متد های کلاس پدر ما از super میایم و استفاده میکنیم 

class animal {
  constructor(name){
     this.animalName = name ;  }
  walking() {
    console.log('.....  walking ......') }
}

class rabit extends animal {
  constructor(name,type){
     super(name);
     this.typeName = type;  }
  walking(){  
       super.walking();
       console.log('.....  walking ......')  }
}

let rabit1 = new rabit('animal xxx','type x');
rabit1.walking();
rabit1.walking(10);

3 - Class field ها 

class animal {
  testData = "i am parent"
}

class rabit extends animal {
   testData = "i am child"
}

مبحث دیگه ای که در شی گرایی وجود دارد static method/fields ها هستش که چند تا خاصیت دارند یکی مقدار overhead کمتری دارند و دوم اینکه مقدار اشتراک داده بین همه اشیاء ها دارند و همچنین کمی هم با مفاهیم شی گرایی در تضاد هستند برای درست کردن استاتیک فیلد ها با استفاده از کلمه کلیدی static هست و وقتی ما میایم و همچین کاری انجام می دهیم اون متد یا فیلد میاد و قبل از آبجکت درست بشه تعریف میشه حالا این تضاد به خاطر اینه که میگن یک شی وقتی ساخته میشه باید رفتار و داده اش مطعلق به خودش باشه 

class animal {
  static test = "i am static "
}

console.log(animal.test)

برای ذخیره سازی داده ها در مرورگر ما 4 تا راه داریم 

--------------------------------------------------------------------------

1 - استفاده از cookie هم از طریق کلاینت و بک اند قابل دسترسی و استفاده هستند و این تعامل و بررسی این دو باهم از طریق http header اتفاق می افتد و با استفاده از اون می تونه اطلاعات کوکی بخونه  و اون هارو تغیر بده کوکی ها در واقع یکسری رشته های کوتاه هستند که در داخل آن ها یک سری داده اومدن و ذخیره شده و اطلاعات هست که در داخل مرورگر ذخیره شده است همچنین در واقع کوکی ها میان و داده هارو در واقع با یک فرمت خاصی تبدیل به رشته می کنند و اون هارو ذخیره میکنند

2 -استفاده از local Storage

3 - استفاده از Session Storage

4 - استفاده از IndexedDB 

نکته : کوکی ها اصطلاحا http مکانیزم هستند و بر اساس اون میان و کار میکنند همچنین برای استفاده از کوکی ها باید از یک وب سرور بیایم و استفاده بکنیم تا بتونیم در آن یک سری داده رو ست کنیم 

document.cookie   برای خواندن کوکی هامون ازاستفاده میکنیم 
document.cookie+encodeURLComponent  برای نوشتن کوکی هم از این استفاده میکنیم

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

کوکی ها یکسری آپشن هم میگیرند یکی از این آپشن ها دامین هستش ویژگی بعدش secure کردن کوکی ها هستش برای بالا بردن امنیت کوکی هامون همچنین ما میتونیم بیایم و دامین درکوکی مون رو هم قرار دهیم و ویژگی بعدی path هست که میگه در کدوم از مسیر های سیایت می تونیم از این کوکی بیایم و استفاده کنیم و ویژگی آخری هم expire هستش که به ما میگوید این کوکی مون تا چه تاریخی بیاد و در داخل کوکی هامون  ذخیره بشه و بعد از اون بیاد و  حذف بشه 

نکته : ما برای حذف کردن یک کوکی دو تا راه داریم یکی استفاده از expire  و دومی استفاده از maxAge 

نکته : ما با ست کردن تنظیمات same site باعث می شیم که کوکی هامون پیرامون حمله های امنیتی XSRF امنیت داشته باشند

ما برای استفاده از same site دو  تا حالت داریم

samesite = stric
samesite = lax میگه بفرست کوکی ولی همیشه نه فقط در حالت های خاص
   the Http safe method
   top level navigation آدرس بالای نویگشن امون باید بیاید و تغیر کند 
   کاربرد lax برای بالا بردن تجربه کاربری بهتر استفاده میشود

ذخیره سازی اطلاعات در داخل کوکی ها نهایتا 4 کیلوبایت هستش ولی ما در داخل لوکال استورج ها می تونیم تا  4 مگ اطلاعات رو بیایم و ذخیره کنیم برخلاف کوکی ها که هم کلاینت و هم بک اند قابل دسترسی هستند لوکال استورج ها فقط در کلاینت و منحصرا به جاوااسکریپت هستند 

تفاوت های local storage Vs sessionStorage  

هر دو بعد از رفرش صفحه در دسترس هستند   

لوکال استورج بین تب های باز از همان سایت نیز در دسترس است ولی  sessionStorage محدود به تبی است که در آن ایجاد شده است همچنین لوکال با بستن و باز کردن تب از بین نمی رود ولی sessionStorage از بین خواهد رفت 

localStorage.setItem("test","dsfdsfdsfdsfds")
console.log(localStorage.getItem("test"))