درک کلمه کلیدی “این” جاوا اسکریپت

آیا شما جزو توسعه دهندگان جاوا اسکریپت هستید که کلمه کلیدی “این” را گیج کننده می دانند؟ این راهنما برای رفع هرگونه سردرگمی که ممکن است در مورد آن داشته باشید در اینجا آمده است.

این کلمه کلیدی در جاوا اسکریپت به چه معناست؟ و چگونه می توانید از آن به طور عملی در برنامه جاوا اسکریپت خود استفاده کنید؟ اینها برخی از سوالات رایجی است که تازه کارها و حتی برخی از توسعه دهندگان با تجربه جاوا اسکریپت در مورد این کلمه کلیدی می پرسند.

اگر شما از آن دسته از توسعه دهندگان هستید که نمی دانید این کلمه کلیدی در مورد چیست، پس این مقاله برای شما مناسب است. برای جلوگیری از سردرگمی و البته اشکالات در کد خود، در زمینه‌های مختلف به چه چیزی اشاره می‌کند و با برخی از گوچاها آشنا شوید.

“این” در محدوده جهانی

در زمینه جهانی، این شیء پنجره را تا زمانی که خارج از یک تابع باشد، برمی گرداند. زمینه جهانی به این معنی است که شما آن را در داخل یک تابع قرار نمی دهید.

if(true) {
  console.log(this) // returns window object
}

let i = 2
while(i < 10) {
  console.log(this) // returns window object till i === 9
  i++
}

اگر کد بالا را اجرا کنید، شی پنجره را دریافت خواهید کرد.

توابع درونی “this” (روش ها)

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

در مثال زیر، تابع sayName در داخل شی me قرار دارد (یعنی یک متد است). در مواردی مانند این، این به شیء حاوی تابع اشاره دارد.

 
function sayName() {
  return `My name is ${this.name}`
}

const me = {
  name: "Kingsley",
  sayName: sayName
}

console.log(me.sayName()) // My name is Kingsley

این شی me است، بنابراین گفتن this.name در متد sayName دقیقاً مشابه me.name است.

راه دیگری برای فکر کردن به آن این است که هر چیزی که در سمت چپ تابع در هنگام فراخوانی باشد این خواهد بود. این بدان معنی است که شما می توانید از تابع sayName در اشیاء مختلف استفاده مجدد کنید و هر بار به یک زمینه کاملاً متفاوت اشاره می کند.

مطلب مرتبط: 3 ساختار داده پیشرفته که هر برنامه نویسی باید بداند

اکنون، همانطور که قبلا ذکر شد، هنگامی که در داخل یک تابع مستقل استفاده می شود، شی پنجره را برمی گرداند. این به این دلیل است که یک تابع مستقل به طور پیش فرض به شی پنجره متصل است:

function talk() {
  return this
}

talk() // returns the window object

فراخوانی talk() همانند فراخوانی window.talk() است و هر چیزی که در سمت چپ تابع باشد به طور خودکار به این تبدیل می شود.

در یک یادداشت جانبی، این کلمه کلیدی در تابع در حالت سخت جاوا اسکریپت رفتار متفاوتی دارد (به صورت تعریف نشده برمی گردد). هنگامی که از کتابخانه‌های رابط کاربری استفاده می‌کنید که از حالت سخت (مثلاً React) استفاده می‌کنند، این نکته را نیز باید در نظر داشته باشید.

استفاده از “this” با Function.bind()

ممکن است سناریوهایی وجود داشته باشد که در آنها نتوانید تابع را به عنوان متد به یک شیء اضافه کنید (مانند بخش آخر).

شاید آن شی مال شما نیست و دارید آن را از کتابخانه بیرون می آورید. شی غیر قابل تغییر است، بنابراین نمی توانید آن را تغییر دهید. در مواردی مانند این، همچنان می‌توانید با استفاده از متد ()Function.bind دستور تابع را جدا از شیء اجرا کنید.

در مثال زیر، تابع sayName یک متد در شی me نیست، اما شما همچنان آن را با استفاده از تابع bind() محدود می‌کنید:

function sayName() {
  return `My name is ${this.name}`
}

const me = {
  name: "Kingsley"
}

const meTalk = sayName.bind(me)

meTalk() // My name is Kingsley

هر شیئی که به bind() ارسال کنید به عنوان مقدار آن در آن فراخوانی تابع استفاده خواهد شد.

به طور خلاصه، می‌توانید از bind() روی هر تابعی استفاده کنید و در یک متن جدید (یک شی) ارسال کنید. و آن شیء معنای این را در داخل آن تابع بازنویسی می کند.

استفاده از “this” با Function.call()

اگر نخواهید یک تابع کاملاً جدید را برگردانید، بلکه فقط تابع را پس از اتصال به متن خود فراخوانی کنید، چه؟ راه حل آن متد call() است:

function sayName() {
  return `My name is ${this.name}`
}

const me = {
  name: "Kingsley"
}

sayName.call(me) // My name is Kingsley

متد call() بلافاصله تابع را به جای برگرداندن تابع دیگری اجرا می کند.

مطلب مرتبط: 4 روش برای اتصال پایتون به MySQL

اگر تابع به پارامتر نیاز دارد، می توانید آن را از طریق متد call() ارسال کنید. در مثال زیر، زبان را به تابع sayName() می‌فرستید، بنابراین می‌توانید از آن برای برگرداندن پیام‌های مختلف به صورت مشروط استفاده کنید:

function sayName(lang) {
  if (lang === "en") {
    return `My name is ${this.name}`
  } else if (lang === "it") {
    return `Io sono ${this.name}`
  }
}

const me = {
  name: "Kingsley"
}

sayName.call(me, 'en') // My name is Kingsley
sayName.call(me, 'it') // Io sono Kingsley

همانطور که می بینید، می توانید هر پارامتری را که می خواهید به تابع به عنوان آرگومان دوم به متد call() ارسال کنید. همچنین می توانید هر تعداد پارامتر را که می خواهید ارسال کنید.

متد application() بسیار شبیه به call() و bind() است. تنها تفاوت این است که شما چندین آرگومان را با جدا کردن آنها با کاما با call() ارسال می کنید، در حالی که چندین آرگومان را در داخل یک آرایه با apply() ارسال می کنید.

به طور خلاصه، bind()، call() و application() همگی به شما این امکان را می دهند که توابع را با یک شی کاملاً متفاوت فراخوانی کنید، بدون اینکه هیچ گونه رابطه ای بین این دو داشته باشید (یعنی تابع یک متد روی شی نیست).

“این” توابع سازنده داخلی

اگر تابعی را با یک کلمه کلیدی جدید فراخوانی کنید، این شیء را ایجاد می کند و آن را برمی گرداند:

function person(name){
  this.name = name
}

const me = new person("Kingsley")
const her = new person("Sarah")
const him = new person("Jake")

me.name // Kingsley
her.name // Sarah
him.name // Jake

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

مطلب مرتبط: اعتبار سنجی طرحواره در Node.js با Joi

“این” توابع پاسخ به تماس درونی

عملکردهای برگشت به تماس با عملکردهای معمولی متفاوت است. توابع Callback توابعی هستند که شما آنها را به عنوان یک آرگومان به تابع دیگری منتقل می کنید، بنابراین می توان آنها را بلافاصله پس از اتمام اجرای اصلی اجرا کرد.

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

function person(name){
  this.name = name
  setTimeout(function() {
    console.log(this)
  }, 1000)
}

const me = new person("Kingsley") // returns the window object

پس از یک ثانیه فراخوانی تابع سازنده شخص و ایجاد یک شی جدید me، شی پنجره را به عنوان مقدار این ثبت می کند. بنابراین وقتی در یک تابع callback استفاده می شود، این به شی پنجره اشاره می کند و نه شی “ساخته شده”.

دو راه برای رفع این مشکل وجود دارد. روش اول از bind() برای اتصال تابع person به شی جدید ساخته شده استفاده می کند:

function person(name){
  this.name = name
  setTimeout(function() {
    console.log(this)
  }.bind(this), 1000)
}

const me = new person("Kingsley") // returns the me object

با اصلاح بالا، این در callback به همان تابع سازنده (شیء me) اشاره می کند.

راه دوم برای حل این مشکل در توابع برگشت تماس استفاده از توابع فلش است.

“این” توابع داخل فلش

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

function person(name){
  this.name = name
  setTimeout(() => {
    console.log(this)
  }, 1000)
}

const me = new person("Kingsley") // returns the me object

درباره جاوا اسکریپت بیشتر بیاموزید

شما همه چیز را در مورد کلمه کلیدی “this” و معنای آن در تمام زمینه های مختلف در جاوا اسکریپت یاد گرفته اید. اگر با جاوا اسکریپت تازه کار هستید، از یادگیری تمام اصول اولیه جاوا اسکریپت و نحوه کارکرد آن بسیار سود خواهید برد.