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

پرسیده شده
فعالیت 9 روز پیش
دیده شده 40 بار
1

کلمات کلیدی getter و setter کلمات کلیدی هستند که پشت یک تابع میان و می قرار میگیرند و به ما اجازه می دهند از اسم اون تابع مثل یک متغیر بیایم و استفاده بکنیم و وقتی میخایم بیایم و اون متغیر رو  اصطلاحا get یا set بکنیم اون توابع هستند که میان و صدا زده می شوند و مثل یک پراپرتی میایم و باهاش رفتار میکنیم حال اگر یک ابجکتی فقط بیاد و مقدار Getter داشته باشه و setter نداشته باشه اون پراپرتی میاد و به صورت read only می شود و ما اجازه ی قرار دادن اطلاعاتی در داخل اون رو نداریم و اگر setter داشته باشد به صئرت write only  می شود و اگر هردوتا رو داشته باشد می توانیم هر دو تا رو  انجام بدهیم

let newObj {
  name : ' ddd ',
  family : 'gfgdfgf',
  get age(){  
     return this.userAge  },
  set age(uAge){
  if(uAge<10){
     throw new Error('dsdfsfdsfdsfdsf')
       }
       
       this.userAge =  uAge;
    } 
 }
 console.log(newObj)
 newObj.age = 5;
 console.log(newObj.age)

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

 

ما برای ایجاد یک شی دو تا  مدل داشتیم یکی به صورت معمولی یا literal  notation  دومی هم به صورت اشیاء سازنده یا کانستراکتور فانکشن   constructor function همچنین ما در این حالت برای تعریف و قرار دادن پراپرتی ها باید از this استفاده بکنیم

 

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

 

حال برای این که بیایم و  getter و setter در داخل توابع سازنده امون تعریف کنیم صرفا کافی است به شیوه زیر تعریف کنیم 

function secondObj(){ 
  this.name = "mohamad";
  this.family = "sadeghi";
  Object.defineProperties(this,{ 
    age: { 
          get:  function(){  return  this.userAge;  },
          set:  function(uAge){  ig(uAge < 10) { throw new Error('Access defind'); }
          this.userAge = uAge;
          console.log('in setter')
                }
             }
          })
}

تفاوت constructor object  و  literal  object  

 

1 - استفاده از this که در  توابع سازنده ما برای تعریف متغیر هامون باید از اون استفاده بکنیم ولی در لیترال ها نیازی به اون نداریم

 

2- تعریف توابع  getter و  setter در هر دو 

 

3 - آبجت های از نوع  کانستراکتور میان و می تونن مقادیر ورودی بگیرند و برا اساس ورودی که میگیرند اون آبجکت متفاوت باشند ولی نوع literal   چون عملا new نمی شوند پس عملا ورودی رو هم نمی تونن بیان و بگیرند و برا اساس ورودی که میگیرند بیاین و  مقدار اون رو تغیر بدهند

 

4- در حالت literal نمی توانید چند نسخه از شی رو داشته باشید  و به یاد داشته باشد همواره از همان نسخه اصلی استفاده خواهید کرد و اگر بیایم و یک کپی ازش بگیریم و در اون نسخه کپی بیایم و تغیر بدیم تغیر ما در نسخه ی اصلی هم ایجاد می شود ( مقادیر رفرنس آن ها یکی هستش )

// literal notation
var original = {  'property' : 'orignal' } 
console.log(original.property); // original
var clone = original;
clone.property = 'clone'
console.log(original.property); // clone

5- مفاهیم public و private در اشیاء اگر بیایم  و  در یک تابع سازنده یک متغیر رو تعریف کنیم مثلا با let اون متغیر به صورت private تعریف شده است و برای دسترسی به اون در داخل تابع نیازی به this نداریم و در خارج تابع هم نمی تونیم به اون دسترسی داشته باشیم و صرفا درون اون تابع ب اون دسترسی داریم همچنین در اشیا literal  ما هر چی متغیر تعریف بکنیم به صورت public هستش و از بیرون می تونیم بیایم و بهش دسترسی پیدا بکنیم 

 

نکته : هنگام کپی کردن آبجکت ها یا متغیر ها در اصل میاد و یک خونه از اون رفرنس رو برامون کپی میکند حال  اگر ما بخایم بیایم و یک کپی یا کلون رو انجام بدیم که این کلون به صورت مستقل رفتار کنه و کپی نباشه باید به  چند شیوه زیر بیایم و عمل بکنیم

  

روش اول 

let user = { name : "John" , age : 30 } 
let clone = {}
for (let key in user){ 
     clone[key] = user[key]  }

روش دوم استفاده از تابع assign :  که برای کپی کردن و مرج کردن چند ابجکت میاد و مورد استفاده قرار میگیرد 

Object.assign(dest,[src1,src2,src3,..])
در هنگام مرج کردن اوویت با سمت راستی هست و اگر پراپرتی های یکسانی داشته باشند اولویت با مقدار سمت راستی هستش  و اون رو  اعمال میکند 

استفاده از garbage collection  :  در هر زبانی ما تعداد زیادی متغیر و داده رو تعریف میکنیم حال اگر این داده های زبان های برنامه نویسی مون هیچ کاری با این داده های ما نداشته باشند به مرور زمان این داده ها هی بزرگ بزرگ تر میشه و حافظه زیادی رو از ما مصرف میکند و ممکن باعث خطا یا کرش در برنامه امون بشه و همه زبان ها یک ابزاری دارند به نام  garbage collection که  متغیر هایی که استفاده نمی شوند بیاد و اون متغیر هارو حذف کند 

فایل پیوست

emad ta
emad ta

19 فروردین 00

1
حذف شده

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

 

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  میکنن همم تغیراتی رو ی خروجی میدهند

فایل پیوست

emad ta

توسط

emad ta

19 فروردین 00

1
حذف شده

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

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

 

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())
فایل پیوست

emad ta

توسط

emad ta

20 فروردین 00

0
حذف شده

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

 

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

 

نکته : تمامی 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  میایم و استفاده میکنیم 

 

فایل پیوست

emad ta

توسط

emad ta

20 فروردین 00

0
حذف شده

ارث بری پویا  :  مابعد از کلمه کلیدی 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)
فایل پیوست

emad ta

توسط

emad ta

21 فروردین 00

0
حذف شده

برای ذخیره سازی داده ها در مرورگر ما 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"))
فایل پیوست

emad ta

توسط

emad ta

22 فروردین 00