ویژگی Getter و Setter در جاوا اسکریپت

کامل بهرامیخرداد ۱۲, ۱۴۰۱

0 2,445 خواندن این مطلب 5 دقیقه زمان میبرد

Getter و Setter در جاوا اسکریپت چه چیزی هستند و از کجا در آن ها استفاده میشود؟ در این پست آموزشی از مکتب خونه میخواهیم در رابطه با ویژگی Getter و Setter باهم به گفتگو بپردازیم. پس تا آخر این مقاله ما را همراهی کنید.

فهرست مطالب این نوشته

ویدئو پیشنهادی: جاوا اسکریپت

Getter و Setter در جاوا اسکریپت

دو نوع ویژگی شی وجود دارد.

اولین نوع، ویژگی های داده است. این ویژگی ها معمولی هستند و به وفور از آن ها در برنامه نویسی جاوا اسکریپت استفاده میشود.
نوع دوم ویژگی ها یک ویژگی جدید در جاوا اسکریپت است که به ویژگی دسترسی یا Accessor معروف است. آنها در اصل توابعی هستند که با گرفتن و تنظیم یک مقدار اجرا می شوند، اما شبیه ویژگی های معمولی یک کد خارجی هستند. ویژگی های Accessor با روش های Getter و Setter در جاوا اسکریپت نشان داده می شوند. در یک قطعه کد جاوا اسکریپت با get و set آن ها را نشان می دهند:

مثالی از Getter و Setter در جاوا اسکریپت

<span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>

  <span class="token keyword">get</span> <span class="token function">propName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// getter, the code executed on getting obj.propName</span>

  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token keyword">set</span> <span class="token function">propName</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

    <span class="token comment">// setter, the code executed on setting obj.propName = value</span>

  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

getter زمانی که object.propName خوانده می شود کار می کند و Setter زمانی که به آن متغیر مقداری اختصاص داده می شود. به عنوان مثال، ما یک شی کاربر با نام و نام خانوادگی داریم. من ایهنجا از نام و نام خانوادگی خودم استفاده کرده ام.

<span class="token keyword">let</span> user <span class="token operator">=</span> <span class="token punctuation">{</span>

  name<span class="token operator">:</span> <span class="token string">"kamel"</span><span class="token punctuation">,</span>

  surname<span class="token operator">:</span> <span class="token string">"bahrami"</span>

<span class="token punctuation">}</span><span class="token punctuation">;</span>

اکنون می خواهیم یک ویژگی fullName اضافه کنیم که باید “kamel bahrami” باشد. بنابراین می‌توانیم آن را به عنوان یک دسترسی پیاده‌سازی کنیم:

<span class="token keyword">let</span> user <span class="token operator">=</span> <span class="token punctuation">{</span>

  name<span class="token operator">:</span> <span class="token string">"kamel"</span><span class="token punctuation">,</span>

  surname<span class="token operator">:</span> <span class="token string">"bahrami"</span><span class="token punctuation">,</span>

  <span class="token keyword">get</span> <span class="token function">fullName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

    <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>surname<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>

  <span class="token punctuation">}</span>

<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token function">alert</span><span class="token punctuation">(</span>user<span class="token punctuation">.</span>fullName<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// kame bahrami</span>

از بیرون، یک ویژگی Accessor مانند یک ویژگی معمولی به نظر می رسد. این ایده ویژگی های دسترسی است. ما user.fullName را به‌عنوان تابعی صدا نمی‌زنیم، آن را به طور معمول می‌خوانیم: getter در پشت صحنه اجرا می‌شود.

در حال حاضر، fullName فقط یک getter دارد. اگر بخواهیم user.fullName= را اختصاص دهیم، خطایی رخ می دهد:

<span class="token keyword">let</span> user <span class="token operator">=</span> <span class="token punctuation">{</span>

  <span class="token keyword">get</span> <span class="token function">fullName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

    <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">...</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>

  <span class="token punctuation">}</span>

<span class="token punctuation">}</span><span class="token punctuation">;</span>

user<span class="token punctuation">.</span>fullName <span class="token operator">=</span> <span class="token string">"Test"</span><span class="token punctuation">;</span> <span class="token comment">// Error (property has only a getter)</span>

بیایید با افزودن یک setter برای user.fullName آن خطا را برطرف کنیم:

<span class="token keyword">let</span> user <span class="token operator">=</span> <span class="token punctuation">{</span>

  name<span class="token operator">:</span> <span class="token string">"kamel"</span><span class="token punctuation">,</span>

  surname<span class="token operator">:</span> <span class="token string">"bahrami"</span><span class="token punctuation">,</span>

  <span class="token keyword">get</span> <span class="token function">fullName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

    <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>surname<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>

  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token keyword">set</span> <span class="token function">fullName</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

    <span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>surname<span class="token punctuation">]</span> <span class="token operator">=</span> value<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">" "</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token punctuation">}</span>

<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// set fullName is executed with the given value.</span>

user<span class="token punctuation">.</span>fullName <span class="token operator">=</span> <span class="token string">"ALI AHMADI"</span><span class="token punctuation">;</span>

<span class="token function">alert</span><span class="token punctuation">(</span>user<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ALI</span>

<span class="token function">alert</span><span class="token punctuation">(</span>user<span class="token punctuation">.</span>surname<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// AHMADI</span>

در نتیجه، یک ویژگی “مجازی” fullName داریم. قابل خواندن و نوشتن است. دقیقا نقش Getter و Setter در جاوا اسکریپت ساخت این ویژگی مجازی برای دسترسی ایجاد دسترسی آسانتر است.

پیشنهاد مطالعه: آموزش متد bind در جاوا اسکریپت به زبان ساده

توصیفگرهای دسترسی یا Accessor descriptors

توصیف کننده ها برای ویژگی های دسترسی با توصیف کننده های ویژگی های داده متفاوت است. برای ویژگی های دسترسی، هیچ مقدار یا قابل نوشتن وجود ندارد، اما در عوض توابع get و set در جاوا اسکریپت وجود دارد. یعنی یک توصیفگر دسترسی ممکن است دارای عناصر زیر باشد:

Getter و Setter در جاوا اسکریپت

get – تابعی بدون آرگومان که هنگام خواندن یک ویژگی کار می کند،
set – تابعی با یک آرگومان که با تنظیم ویژگی فراخوانی می شود.
قابل شمارش enumerable – مانند خصوصیات داده،
قابل تنظیم configurable – مانند ویژگی های داده.

به عنوان مثال، برای ایجاد یک accessor fullName با defineProperty، می‌توانیم یک توصیفگر را با get و set ارسال کنیم:

<span class="token keyword">let</span> user <span class="token operator">=</span> <span class="token punctuation">{</span>

  name<span class="token operator">:</span> <span class="token string">"kamel"</span><span class="token punctuation">,</span>

  surname<span class="token operator">:</span> <span class="token string">"bahrami"</span>

<span class="token punctuation">}</span><span class="token punctuation">;</span>

Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>user<span class="token punctuation">,</span> <span class="token string">'fullName'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>

  <span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

    <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>surname<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>

  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token function">set</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>

    <span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>surname<span class="token punctuation">]</span> <span class="token operator">=</span> value<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">" "</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token punctuation">}</span>

<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function">alert</span><span class="token punctuation">(</span>user<span class="token punctuation">.</span>fullName<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// kamel bahrami</span>

<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> key <span class="token keyword">in</span> user<span class="token punctuation">)</span> <span class="token function">alert</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// name, surname</span>

لطفاً توجه داشته باشید که یک ویژگی می تواند یک دسترسی (دارای متدهای get/set) یا یک ویژگی داده (دارای مقدار) باشد، نه هر دو.

اگر بخواهیم هم get و هم مقدار را در یک توصیفگر ارائه کنیم، یک خطا وجود دارد:

Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'prop'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>

  <span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

    <span class="token keyword">return</span> <span class="token number">1</span>

  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  value<span class="token operator">:</span> <span class="token number">2</span>

<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

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

Getter و Setter هوشمند در جاوا اسکریپت

get و set در جاوا اسکریپت می‌توانند به‌عنوان بسته‌بندی بر روی مقادیر واقعیبرای به دست آوردن کنترل بیشتر بر عملیات با آنها استفاده شوند. به عنوان مثال، اگر بخواهیم نام‌های خیلی کوتاه را برای کاربر ممنوع کنیم، می‌توانیم یک تنظیم‌کننده نام داشته باشیم و مقدار را در یک ویژگی مجزا نگه داریم. ویژگی مانند _name:

<span class="token keyword">let</span> user <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token keyword">get</span> <span class="token function">name</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_name<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>

<span class="token keyword">set</span> <span class="token function">name</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 <span class="token keyword">if</span> <span class="token punctuation">(</span>value<span class="token punctuation">.</span>length

<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Name is too short, need at least 4 characters"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>_name <span class="token operator">=</span> value<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

user<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">"kamel"</span><span class="token punctuation">;</span>
<span class="token function">alert</span><span class="token punctuation">(</span>user<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// kamel</span>
user<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span> <span class="token comment">// Name is too short...</span>

بنابراین، نام در ویژگی _name ذخیره می شود و دسترسی از طریق getter و setter انجام می شود.

از لحاظ فنی، کد خارجی می تواند با استفاده از user._name به طور مستقیم به نام دسترسی پیدا کند. اما یک قرارداد کاملاً شناخته شده وجود دارد که مشخص می کند ویژگی هایی که با اندر لاین “_” شروع می شوند داخلی هستند و نباید از خارج از شی قابل دسترسی باشند.

پیشنهاد مطالعه: کلمه کلیدی let در جاوا اسکریپت

استفاده از Accessor برای سازگاری

یکی از کاربردهای عالی Accessor ها این است که آنها اجازه می دهند تا هر لحظه با جایگزین کردن یک گیرنده (getter ) و تنظیم کننده (setter ) و تغییر رفتار آن، بر روی یک ویژگی داده “عادی” کنترل داشته باشیم.

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

<span class="token keyword">function</span> <span class="token function">User</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

  <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>

  <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span>

<span class="token punctuation">}</span>

<span class="token keyword">let</span> kamel <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">User</span><span class="token punctuation">(</span><span class="token string">"kamel"</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">alert</span><span class="token punctuation">(</span> kamel<span class="token punctuation">.</span>age <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 28</span>

اما دیر یا زود ممکن است همه چیز تغییر کند. به جای سن ممکن است تصمیم بگیریم ویژگی تولد را ذخیره کنیم، به مثال زیر دقت کنید:

<span class="token keyword">function</span> <span class="token function">User</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> birthday</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

  <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>

  <span class="token keyword">this</span><span class="token punctuation">.</span>birthday <span class="token operator">=</span> birthday<span class="token punctuation">;</span>

<span class="token punctuation">}</span>

<span class="token keyword">let</span> kamel <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">User</span><span class="token punctuation">(</span><span class="token string">"kamel"</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">1994</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

حالا با کد قدیمی که هنوز از ویژگی age استفاده می کند چه باید کرد؟ ما می‌توانیم همه چنین مکان‌هایی که این ویژگی قدیمی در آن استفاده میشود را پیدا کنیم و آنها از لحاظ خطایی برطرف کنیم، اما این کار زمان می‌برد و اگر این کد توسط افراد زیادی استفاده شود، انجام این کار دشوار است. پس باید ان را نگه داریم.

اضافه کردن یک getter برای ویژگی سن در این مثال مشکل را حل می کند. به مثال زیر دقت کنید.

<span class="token keyword">function</span> <span class="token function">User</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> birthday</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

  <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>

  <span class="token keyword">this</span><span class="token punctuation">.</span>birthday <span class="token operator">=</span> birthday<span class="token punctuation">;</span>

  <span class="token comment">// سن از تاریخ و روز تولد فعلی محاسبه می شود</span>

  Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">"age"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>

    <span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

      <span class="token keyword">let</span> todayYear <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

      <span class="token keyword">return</span> todayYear <span class="token operator">-</span> <span class="token keyword">this</span><span class="token punctuation">.</span>birthday<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token punctuation">}</span>

  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token punctuation">}</span>

<span class="token keyword">let</span> john <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">User</span><span class="token punctuation">(</span><span class="token string">"kamel"</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">1992</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function">alert</span><span class="token punctuation">(</span> kamel<span class="token punctuation">.</span>birthday <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// birthday is available</span>

<span class="token function">alert</span><span class="token punctuation">(</span> kamel<span class="token punctuation">.</span>age <span class="token punctuation">)</span><span class="token punctuation">;</span>      <span class="token comment">// ...as well as the age</span>

اکنون کد قدیمی نیز کار می کند و هیچ خطایی نیز اتفاق نمی افتد.

خلاصه

از کلمات کلیدی get و set در جاوا اسکریپت برای تعریف Getter و Setter در جاوا اسکریپت برای یک کلاس یا یک شی استفاده کنید. کلمه کلیدی get یک ویژگی شی را به روشی متصل می کند که با جستجوی آن ویژگی فراخوانی می شود. کلمه کلیدی set یک ویژگی شی را به روشی متصل می کند که با اختصاص آن ویژگی فراخوانی می شود.

کامل بهرامیخرداد ۱۲, ۱۴۰۱

0 2,445 خواندن این مطلب 5 دقیقه زمان میبرد