نکات جاوااسکریپت 2

نکات جاوااسکریپت 2
در تاریخ 1398/07/15 توسط حسین اکبرزاده

مواقع استفاده از : و =

وقتی داخل Object هستیم برای تخصیص مقدار از : استفاده میکنیم و در غیر این صورت از =

تفاوت let و var

let به صورت block scope است و var به صورت function scope است.

this

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

var yourObject = {
name : "hossein" ,
family : "Arbatan" ,
functionwithTHIS(){
       console.log(this.name + "  " + this.family)
  }
}

yourObject.functionwithTHIS();

در مثال بالا چون در بیرون از بلاک functionwithThis روی yourObject فراخوانی شده this روی yourObject کار خواهد کرد و به آن شی اشاره خواهد کرد.

درحالتی مثل زیر this چون درون خود object فراخوانی شده نه بیرون از آن (روی object پس از . فراخوانی نشده) This در واقع windows که بالاترین شی است را برمیگرداند.

var yourObject = {
name : "hossein" ,
family : "Arbatan" ,
myFunc() {
function myFunction() {
       console.log(this)
  }
myFumction();
 }
}


yourObject.myFunc();

اگر بخواهیم به this ای که به object جاری اشاره میکند دسترسی داشته باشیم میتوانیم از Arrow function استفاده کنیم چون در اون this مانند سیستم function‌ها نیست.

var yourObject = {
name : "hossein" ,
family : "Arbatan" ,

myFunc() {
   let myFumction = ()=> console.log(this);
   myFumction();
 }
}

yourObject.myFunc();

ارسال یک object به یک function : از این طریق this‌های درون یک function به آن object اشاره خواهند کرد .

function breate(){
  console.log(this.name + " " + this.family);
}
breate.call(yourObject );

addEventListener

این تابع یک رویداد رو به یک المنت متصل میکند .

function testEvent(){
    console.log("hi");
}
document.getElementById("myBtn").addEventListener("click" , testEvent())

و یا مثلا

document.addEventListener("click", function(){ alert("Hello World!"); });

Arrow Function

در هنگام استفاده از Arrow function‌ها عبارت function به () تبدیل میشود اگر صفر یا بیشتر از یکی متغیر داشته باشیم درون آن مینویسم و اگر یک متغیر بود فقط اون رو مینویسیم . بعد از اون <= اضافه میکنیم ،اگر تابع در چند خط باشد {} (curly brackets) اضافه میکنیم . در مواردی که return داریم اگر در یک خط عبارت نوشته میشه return رو هم میتونیم حذف کنیم .

معادل کد بالا

document.addEventListener("click" ,()=> console.log("hello"))

یک مثال دیگر

let myNumbers = [10 , 20 , 30];
myNumbers.map(function(x){
   return  x*10;
});

میتونه به صورت زیر نوشته بشه.

myNumbers.map( x => x*10 );

و خروجی هر دو

[100, 200, 300]

Template Literal

توی این فرمت نوشتن به جای استفاده از " و + از بک تیک (`) که قابلیت دریافت چند خط تکست را دارد و {}$ که قابلیت دریافت داینامیک متغیر را دارد استفاده میشود .

var name = "arbatan"
console.log(`hello dear ${name}`)

مثال جامع

  <form id="myForm">
     <input type="text" id="txt">
     <button type="button" onclick="subFrm()"> Add </button>
  </form>
  <ul id="myList"></ul>

let toDoText = document.getElementById("txt")
let list = document.getElementById("myList")

window.subFrm =  function() {
  list.insertAdjacentHTML("beforeend", ` value is ${toDoText.value} `);
  toDoText.value = "";
  toDoText.focus();
}

ترفند جاوا اسکریپت

ثبت لینک بدون آدرس و بدون #

<ahref="javascript: void(0)">I am a useless link</a>

گروه های پست :

java script جاوا اسکریپت

تعداد مشاهده : 519

تعداد پسندها : 1

تعداد نظرات : 0

تعداد پیوست ها : 0

این پست را می پسندم

ارسال دیدگاه

دیدگاه ها

تا کنون نظری داده نشده است .
اولین کسی باشید که دیدگاه خود را ثبت می کند .