آشنایی با جاوا اسکریپت

بهنام رسولی | ۱۴ شهریور ۱۳۹۳ | دسته : آموزش جاوا اسکریپت | یک دیدگاه

با سلام در خدمت شما هستیم با آموزش sysntax جاوا اسکریپت :

جاوااسکریپت توسط برندن ایش از شرکت NetScape در سال ۱۹۹۵ ساخته شد. در ابتدا به عنوان یک زبان اسکریپت‌نویسی در کنار جاوا (که برای موارد پیچیده تر در طراحی وب در نظر گرفته میشد) مورد استفاده بود، ولی در پی نفوذ بسیار گسترده آن در وب و همچنین پشتیبانی پیش-ساخته آن در مرورگر ها، امروزه به مراتب بیشتر از جاوا در برنامه نویسی سمت-کاربر در وب به کار برده میشود. با این حال جاوااسکریپت فقط محدود به مرورگر های وب نمیشود. Node.js پروژه ایست که یک نسخه ی مستقل از اجراکننده ی موتور جاوااسکریپت V8 از گوگل کروم را در اختیار قرار میده که هر روزه درحال محبوب تر شدن نیز هست.

// توضیحات همانند C هستند. توضیحات یک خطی با دو خط مورب شروع میشوند.,

/* و توضیحات چند خطی با خط مورب-ستاره شروع، و با ستاره-خط مورب ختم میشوند */

/*
iwebpro.ir comment
*/

iwebpro.ir comment

آخر هر دستور از ; استفاده میشه.

۱. اعداد، رشته ها و عملگرها

جاوااسکریپت فقط یک نوع عدد دارد و آن عدد اعشاری ۶۴ بیتی IEEE 754 است.

نترسید! و نگران اعداد صحیح نباشید! این اعداد اعشاری دارای ۵۴ بیت مانتیس هستند که قابلیت ذخیره ی

دقیق اعداد صحیح تا مقدار تقریبی ۹×۱۰¹⁵ را دارند.

<span class="mi">3</span><span class="p">;</span> <span class="c1">// = 3
</span><span class="mf">1.5</span><span class="p">;</span> <span class="c1">// = 1.5
</span>

۳; // = ۳

۱.۵; // = ۱.۵

تمامی عملگر های محاسباتی آن طوری که انتظارش را دارید عمل خواهند کرد.

<span class="mi">1</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span> <span class="c1">// = 2
</span><span class="mi">8</span> <span class="o">-</span> <span class="mi">1</span><span class="p">;</span> <span class="c1">// = 7
</span><span class="mi">10</span> <span class="o">*</span> <span class="mi">2</span><span class="p">;</span> <span class="c1">// = 20
</span><span class="mi">35</span> <span class="o">/</span> <span class="mi">5</span><span class="p">;</span> <span class="c1">// = 7
</span>

۱ + ۱; // = ۲

۸ - ۱; // = ۷

۱۰ * ۲; // = ۲۰

۳۵ / ۵; // = ۷

و این حتی شامل تقسیم هم میشود.

<span class="mi">5</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span> <span class="c1">// = 2.5
</span>

۱ ۲	<span class="mi">۵</span> <span class="o">/</span> <span class="mi">۲</span><span class="p">;</span> <span class="c1">// = ۲.۵ </span>

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

به عدد صحیح علامت دار *تا ۳۲ بیت* تبدیل میشود.

<span class="mi">1</span> <span class="o">&lt;&lt;</span> <span class="mi">2</span><span class="p">;</span> <span class="c1">// = 4
</span>

۱ ۲	<span class="mi">۱</span> <span class="o"><<</span> <span class="mi">۲</span><span class="p">;</span> <span class="c1">// = ۴ </span>

عملیات داخل پرانتز تقدم بالاتری دارند.

<span class="p">(</span><span class="mi">1</span> <span class="o">+</span> <span class="mi">3</span><span class="p">)</span> <span class="o">*</span> <span class="mi">2</span><span class="p">;</span> <span class="c1">// = 8
</span>

۱ ۲	<span class="p">(</span><span class="mi">۱</span> <span class="o">+</span> <span class="mi">۳</span><span class="p">)</span> <span class="o">*</span> <span class="mi">۲</span><span class="p">;</span> <span class="c1">// = ۸ </span>

سه مقدار خاص وجود دارند که در واقع مقادیر عددی نیستند:

<span class="kc">Infinity</span><span class="p">;</span> <span class="c1">// result of e.g. 1/0
</span><span class="o">-</span><span class="kc">Infinity</span><span class="p">;</span> <span class="c1">// result of e.g. -1/0
</span><span class="kc">NaN</span><span class="p">;</span> <span class="c1">// result of e.g. 0/0
</span>

Infinity; // result of e.g. 1/0

-Infinity; // result of e.g. -1/0

NaN; // result of e.g. 0/0

مقادیر بولی هم تعریف شده هستند:

<span class="kc">true</span><span class="p">;</span>
<span class="kc">false</span><span class="p">;</span>

۱ ۲	<span class="kc">true</span><span class="p">;</span> <span class="kc">false</span><span class="p">;</span>

رشته ها با آپستروف و یا گیومه تعریف میشوند.

<span class="s1">'abc'</span><span class="p">;</span>
<span class="s2">"Hello, world"</span><span class="p">;</span>

۱ ۲	<span class="s1">'abc'</span><span class="p">;</span> <span class="s2">"Hello, world"</span><span class="p">;</span>

و منفی کردن شرط با علامت تعجب

<span class="o">!</span><span class="kc">true</span><span class="p">;</span> <span class="c1">// = false
</span><span class="o">!</span><span class="kc">false</span><span class="p">;</span> <span class="c1">// = true
</span>

!true; // = false

!false; // = true

تساوی دو مقدار با ==

<span class="mi">1</span> <span class="o">==</span> <span class="mi">1</span><span class="p">;</span> <span class="c1">// = true
</span><span class="mi">2</span> <span class="o">==</span> <span class="mi">1</span><span class="p">;</span> <span class="c1">// = false
</span>

۱ == ۱; // = true

۲ == ۱; // = false

و عدم تساوی با !=

<span class="mi">1</span> <span class="o">!=</span> <span class="mi">1</span><span class="p">;</span> <span class="c1">// = false
</span><span class="mi">2</span> <span class="o">!=</span> <span class="mi">1</span><span class="p">;</span> <span class="c1">// = true
</span>

۱ != ۱; // = false

۲ != ۱; // = true

و سایر عمیلات های مقایسه

<span class="mi">1</span> <span class="o">&lt;</span> <span class="mi">10</span><span class="p">;</span> <span class="c1">// = true
</span><span class="mi">1</span> <span class="o">&gt;</span> <span class="mi">10</span><span class="p">;</span> <span class="c1">// = false
</span><span class="mi">2</span> <span class="o">&lt;=</span> <span class="mi">2</span><span class="p">;</span> <span class="c1">// = true
</span><span class="mi">2</span> <span class="o">&gt;=</span> <span class="mi">2</span><span class="p">;</span> <span class="c1">// = true
</span>

۱ < ۱۰; // = true

۱ > ۱۰; // = false

۲ <= ۲; // = true

۲ >= ۲; // = true

رشته ها با علامت جمع به یکدیگر متصل میشوند

<span class="s2">"Hello "</span> <span class="o">+</span> <span class="s2">"world!"</span><span class="p">;</span> <span class="c1">// = "Hello world!"
</span>

۱ ۲	<span class="s2">"Hello "</span> <span class="o">+</span> <span class="s2">"world!"</span><span class="p">;</span> <span class="c1">// = "Hello world!" </span>

و با علامت برگتر و یا کوچکتر با یکدیگر مقایسه میشوند.

<span class="s2">"a"</span> <span class="o">&lt;</span> <span class="s2">"b"</span><span class="p">;</span> <span class="c1">// = true
</span>

۱ ۲	<span class="s2">"a"</span> <span class="o"><</span> <span class="s2">"b"</span><span class="p">;</span> <span class="c1">// = true </span>

نوع متغیر برای عملیات مقایسه تطبیق داده میشود

<span class="s2">"5"</span> <span class="o">==</span> <span class="mi">5</span><span class="p">;</span> <span class="c1">// = true
</span>

۱ ۲	<span class="s2">"۵"</span> <span class="o">==</span> <span class="mi">۵</span><span class="p">;</span> <span class="c1">// = true </span>

مگر اینکه از سه مساوی استفاده شود!

<span class="s2">"5"</span> <span class="o">===</span> <span class="mi">5</span><span class="p">;</span> <span class="c1">// = false
</span>

۱ ۲	<span class="s2">"۵"</span> <span class="o">===</span> <span class="mi">۵</span><span class="p">;</span> <span class="c1">// = false </span>

با استفاده از charAt میتوانید به کارکتر های یک رشته دسترسی پیدا کنید.

<span class="s2">"This is a string"</span><span class="p">.</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>

۱	<span class="s2">"This is a string"</span><span class="p">.</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">۰</span><span class="p">);</span>

از null برای نشان دادن عمدی مقدار هیج استفاده میشود.

و از undefined برای نشان دادن اینکه در حال حاظر مقدار موجود نمی باشد، هرچند خود undefined یک مقدار محسوب میشود.

<span class="kc">null</span><span class="p">;</span> <span class="c1">// used to indicate a deliberate non-value
</span><span class="kc">undefined</span><span class="p">;</span> <span class="c1">// used to indicate a value is not currently present (although undefined
</span>           <span class="c1">// is actually a value itself)
</span>

null; // used to indicate a deliberate non-value

undefined; // used to indicate a value is not currently present (although undefined

// is actually a value itself)

false, null, undefined, NaN, 0 و “” مقدار نادرست و هر چیز دیگر مقدار درست طلقی میشوند.

توجه داشته باشید که ۰ نادرست و “۰” درست طلقی میشوند حتی در عبارت ۰==“۰”.

۲. متغیر ها، آرایه ها و شئ ها

متغیر ها با کلید واژه var تعریف میشوند. اشیا در جاوااسکریپت دارای نوع پویا هستند،

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

برای مقدار دهی از علامت مساوی استفاده میشود.

<span class="kd">var</span> <span class="nx">someVar</span> <span class="o">=</span> <span class="mi">5</span><span class="p">;</span>

۱	<span class="kd">var</span> <span class="nx">someVar</span> <span class="o">=</span> <span class="mi">۵</span><span class="p">;</span>

اگر کلید واژه var را قرار ندهید، هیچ خطایی دریافت نخواهید کرد…

<span class="nx">someOtherVar</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span>

۱	<span class="nx">someOtherVar</span> <span class="o">=</span> <span class="mi">۱۰</span><span class="p">;</span>

در عوض متغیر شما در گستره ی کل برنامه تعریف شده خواهد بود.

متغیر هایی که تعریف شده ولی مقدار دهی نشوند، دارای مقدار undefined خواهند بود.

<span class="kd">var</span> <span class="nx">someThirdVar</span><span class="p">;</span> <span class="c1">// = undefined
</span>

۱ ۲	<span class="kd">var</span> <span class="nx">someThirdVar</span><span class="p">;</span> <span class="c1">// = undefined </span>

برای اعمال عملگر های محاسباتی، میانبر هایی وجود دارند:

<span class="nx">someVar</span> <span class="o">+=</span> <span class="mi">5</span><span class="p">;</span> <span class="c1">// equivalent to someVar = someVar + 5; someVar is 10 now
</span><span class="nx">someVar</span> <span class="o">*=</span> <span class="mi">10</span><span class="p">;</span> <span class="c1">// now someVar is 100
</span>

someVar += ۵; // equivalent to someVar = someVar + 5; someVar is 10 now

someVar *= ۱۰; // now someVar is 100

حتی از این هم کوتاهتر برای اضافه یا کم کردن یک عدد با مقدار یک.

<span class="nx">someVar</span><span class="o">++</span><span class="p">;</span> <span class="c1">// now someVar is 101
</span><span class="nx">someVar</span><span class="o">--</span><span class="p">;</span> <span class="c1">// back to 100
</span>

someVar++; // now someVar is 101

someVar--; // back to 100

آرایه ها در واقع لیستی مرتب شده از مقادیر مختلف از هر نوعی هستند.

<span class="kd">var</span> <span class="nx">myArray</span> <span class="o">=</span> <span class="p">[</span><span class="s2">"Hello"</span><span class="p">,</span> <span class="mi">45</span><span class="p">,</span> <span class="kc">true</span><span class="p">];</span>

۱	<span class="kd">var</span> <span class="nx">myArray</span> <span class="o">=</span> <span class="p">[</span><span class="s2">"Hello"</span><span class="p">,</span> <span class="mi">۴۵</span><span class="p">,</span> <span class="kc">true</span><span class="p">];</span>

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

نمایه ی آرایه از صفر شروع میشود.

<span class="nx">myArray</span><span class="p">[</span><span class="mi">1</span><span class="p">];</span> <span class="c1">// = 45
</span>

۱ ۲	<span class="nx">myArray</span><span class="p">[</span><span class="mi">۱</span><span class="p">];</span> <span class="c1">// = ۴۵ </span>

آرایه ها ناپایدار و دارای طول قابل تغییر هستند

<span class="nx">myArray</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s2">"World"</span><span class="p">);</span>
<span class="nx">myArray</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="c1">// = 4
</span>

myArray.push("World");

myArray.length; // = ۴

در جاوااسکریپت، اشیاء چیزی شبیه دیکشنری و یا نقشه در زبان های دیگر هستند:

یک مجموعه ی نامرتب از جفت های کلید-مقدار.

<span class="kd">var</span> <span class="nx">myObj</span> <span class="o">=</span> <span class="p">{</span><span class="na">key1</span><span class="p">:</span> <span class="s2">"Hello"</span><span class="p">,</span> <span class="na">key2</span><span class="p">:</span> <span class="s2">"World"</span><span class="p">};</span>

var myObj = {key1: "Hello", key2: "World"};

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

<span class="kd">var</span> <span class="nx">myObj</span> <span class="o">=</span> <span class="p">{</span><span class="na">myKey</span><span class="p">:</span> <span class="s2">"myValue"</span><span class="p">,</span> <span class="s2">"my other key"</span><span class="p">:</span> <span class="mi">4</span><span class="p">};</span>

var myObj = {myKey: "myValue", "my other key": ۴};

اعضای یک شئ را نیز میتوانید با استفاده از کروشه در مقابل نام آنها استخراج کنید.

<span class="nx">myObj</span><span class="p">[</span><span class="s2">"my other key"</span><span class="p">];</span> <span class="c1">// = 4
</span>

۱ ۲	<span class="nx">myObj</span><span class="p">[</span><span class="s2">"my other key"</span><span class="p">];</span> <span class="c1">// = ۴ </span>

…و یا از طریق نقطه در صورتی که اسم عضو مورد نظر اسم معتبری برای اسم گزاری باشد.

<span class="nx">myObj</span><span class="p">.</span><span class="nx">myKey</span><span class="p">;</span> <span class="c1">// = "myValue"
</span>

۱ ۲	<span class="nx">myObj</span><span class="p">.</span><span class="nx">myKey</span><span class="p">;</span> <span class="c1">// = "myValue" </span>

اشیاء ناپایدار و قابل اضافه کردن عضو جدید هستند.

<span class="nx">myObj</span><span class="p">.</span><span class="nx">myThirdKey</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>

۱	<span class="nx">myObj</span><span class="p">.</span><span class="nx">myThirdKey</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>

اگر سعی کنید عضوی را که وجود ندارد استخراج کنید، مقدار undefined را دریافت خواهید کرد.

<span class="nx">myObj</span><span class="p">.</span><span class="nx">myFourthKey</span><span class="p">;</span> <span class="c1">// = undefined
</span>

۱ ۲	<span class="nx">myObj</span><span class="p">.</span><span class="nx">myFourthKey</span><span class="p">;</span> <span class="c1">// = undefined </span>

۳. منطق و ساختار کنترل

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

<span class="kd">var</span> <span class="nx">count</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">count</span> <span class="o">==</span> <span class="mi">3</span><span class="p">){</span>
    <span class="c1">// evaluated if count is 3
</span><span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">count</span> <span class="o">==</span> <span class="mi">4</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// evaluated if count is 4
</span><span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
    <span class="c1">// evaluated if it's not either 3 or 4
</span><span class="p">}</span>

var count = ۱;

if (count == ۳){

// evaluated if count is 3

} else if (count == ۴) {

// evaluated if count is 4

} else {

// evaluated if it's not either 3 or 4

}

و همینطور حلقه while

<span class="k">while</span> <span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// An infinite loop!
</span><span class="p">}</span>

while (true) {

// An infinite loop!

}

حلقه do-while شبیه while است با این تفاوت که حداقل یکبار اجرا میشود.

<span class="kd">var</span> <span class="nx">input</span>
<span class="k">do</span> <span class="p">{</span>
    <span class="nx">input</span> <span class="o">=</span> <span class="nx">getInput</span><span class="p">();</span>
<span class="p">}</span> <span class="k">while</span> <span class="p">(</span><span class="o">!</span><span class="nx">isValid</span><span class="p">(</span><span class="nx">input</span><span class="p">))</span>

var input

do {

input = getInput();

} while (!isValid(input))

حلقه for همانند زبان C و جاوا کار می کند.

مقدار دهی اولیه; شرط ادامه; چرخش حلقه

<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="mi">5</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">){</span>
    <span class="c1">// will run 5 times
</span><span class="p">}</span>

for (var i = ۰; i < ۵; i++){

// will run 5 times

}

عملگر && و || به ترتیب “و” و “یا” ی منطقی هستند.

<span class="k">if</span> <span class="p">(</span><span class="nx">house</span><span class="p">.</span><span class="nx">size</span> <span class="o">==</span> <span class="s2">"big"</span> <span class="o">&amp;&amp;</span> <span class="nx">house</span><span class="p">.</span><span class="nx">colour</span> <span class="o">==</span> <span class="s2">"blue"</span><span class="p">){</span>
    <span class="nx">house</span><span class="p">.</span><span class="nx">contains</span> <span class="o">=</span> <span class="s2">"bear"</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">colour</span> <span class="o">==</span> <span class="s2">"red"</span> <span class="o">||</span> <span class="nx">colour</span> <span class="o">==</span> <span class="s2">"blue"</span><span class="p">){</span>
    <span class="c1">// colour is either red or blue
</span><span class="p">}</span>

if (house.size == "big" && house.colour == "blue"){

house.contains = "bear";

}

if (colour == "red" || colour == "blue"){

// colour is either red or blue

}

از || همچنین میتوان برای تعیین مقدار پیشفرض استفاده کرد.

<span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">otherName</span> <span class="o">||</span> <span class="s2">"default"</span><span class="p">;</span>

۱	<span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">otherName</span> <span class="o">\|\|</span> <span class="s2">"default"</span><span class="p">;</span>

۴. توابع و مفاهیم گستره و بستار

توابع در جاوااسکریپت با استفاده از کلیدواژه ی function تعریف میشوند.

<span class="kd">function</span> <span class="nx">myFunction</span><span class="p">(</span><span class="nx">thing</span><span class="p">){</span>
    <span class="k">return</span> <span class="nx">thing</span><span class="p">.</span><span class="nx">toUpperCase</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">myFunction</span><span class="p">(</span><span class="s2">"foo"</span><span class="p">);</span> <span class="c1">// = "FOO"
</span>

function myFunction(thing){

return thing.toUpperCase();

}

myFunction("foo"); // = "FOO"

توابع در جاوااسکریپت نوعی شئ پایه محسوب میشوند، بنابر این می توانید آنها را به اشیاء مختلف

اضافه کنید و یا به عنوان پارامتر به توابع دیگر ارسال کنید.

– برای مثال وقتی که با یک رویداد کار میکنید.

<span class="kd">function</span> <span class="nx">myFunction</span><span class="p">(){</span>
    <span class="c1">// this code will be called in 5 seconds' time
</span><span class="p">}</span>
<span class="nx">setTimeout</span><span class="p">(</span><span class="nx">myFunction</span><span class="p">,</span> <span class="mi">5000</span><span class="p">);</span>

function myFunction(){

// this code will be called in 5 seconds' time

}

setTimeout(myFunction, ۵۰۰۰);

توجه کنید که setTimeout تابعی تعریف شده در جاوااسکریپت نیست، ولی مرورگر ها و node.js از آن پشتیبانی میکنند.

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

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

<span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
    <span class="c1">// this code will be called in 5 seconds' time
</span><span class="p">},</span> <span class="mi">5000</span><span class="p">);</span>

setTimeout(function(){

// this code will be called in 5 seconds' time

}, ۵۰۰۰);

توابع دارای محدوده ی متغیر های خود هستند.

بر خلاف دیگر ساختار ها – مانند if

<span class="k">if</span> <span class="p">(</span><span class="kc">true</span><span class="p">){</span>
    <span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">5</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">i</span><span class="p">;</span> <span class="c1">// = 5 - not undefined as you'd expect in a block-scoped language
</span>

if (true){

var i = ۵;

}

i; // = ۵ - not undefined as you'd expect in a block-scoped language

به همین دلیل الگوی خاصی به نام “تابعی که بلافاصله صدا زده میشود” پدید آمده

تا از اضافه شدن متغیر های قسمتی از برنامه به گستره ی کلی برنامه جلوگیری شود.

<span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
    <span class="kd">var</span> <span class="nx">temporary</span> <span class="o">=</span> <span class="mi">5</span><span class="p">;</span>
    <span class="c1">// We can access the global scope by assiging to the 'global object', which
</span>    <span class="c1">// in a web browser is always 'window'. The global object may have a
</span>    <span class="c1">// different name in non-browser environments such as Node.js.
</span>    <span class="nb">window</span><span class="p">.</span><span class="nx">permanent</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span>
<span class="p">})();</span>
<span class="nx">temporary</span><span class="p">;</span> <span class="c1">// raises ReferenceError
</span><span class="nx">permanent</span><span class="p">;</span> <span class="c1">// = 10
</span>

۱۰

(function(){

var temporary = ۵;

// We can access the global scope by assiging to the 'global object', which

// in a web browser is always 'window'. The global object may have a

// different name in non-browser environments such as Node.js.

window.permanent = ۱۰;

})();

temporary; // raises ReferenceError

permanent; // = ۱۰

یکی از برترین ویژگی های جاوااسکریپت مفهومی با نام بستار است

بدین شکل که اگر تابعی درون تابع دیگری تعریف شود، تابع درونی به تمام متغیر های تابع خارجی دسترسی

خواهد داشت، حتی بعد از اینکه تابع خارجی به اتمام رسیده باشد.

<span class="kd">function</span> <span class="nx">sayHelloInFiveSeconds</span><span class="p">(</span><span class="nx">name</span><span class="p">){</span>
    <span class="kd">var</span> <span class="nx">prompt</span> <span class="o">=</span> <span class="s2">"Hello, "</span> <span class="o">+</span> <span class="nx">name</span> <span class="o">+</span> <span class="s2">"!"</span><span class="p">;</span>
    <span class="kd">function</span> <span class="nx">inner</span><span class="p">(){</span>
        <span class="nx">alert</span><span class="p">(</span><span class="nx">prompt</span><span class="p">);</span>
    <span class="p">}</span>
    <span class="nx">setTimeout</span><span class="p">(</span><span class="nx">inner</span><span class="p">,</span> <span class="mi">5000</span><span class="p">);</span>
    <span class="c1">// setTimeout is asynchronous, so the sayHelloInFiveSeconds function will
</span>    <span class="c1">// exit immediately, and setTimeout will call inner afterwards. However,
</span>    <span class="c1">// because inner is "closed over" sayHelloInFiveSeconds, inner still has
</span>    <span class="c1">// access to the 'prompt' variable when it is finally called.
</span><span class="p">}</span>
<span class="nx">sayHelloInFiveSeconds</span><span class="p">(</span><span class="s2">"Adam"</span><span class="p">);</span> <span class="c1">// will open a popup with "Hello, Adam!" in 5s
</span>

۱۰

۱۱

۱۲

۱۳

function sayHelloInFiveSeconds(name){

var prompt = "Hello, " + name + "!";

function inner(){

alert(prompt);

}

setTimeout(inner, ۵۰۰۰);

// setTimeout is asynchronous, so the sayHelloInFiveSeconds function will

// exit immediately, and setTimeout will call inner afterwards. However,

// because inner is "closed over" sayHelloInFiveSeconds, inner still has

// access to the 'prompt' variable when it is finally called.

}

sayHelloInFiveSeconds("Adam"); // will open a popup with "Hello, Adam!" in 5s

۵. دیگر اشیاء، سازنده ها و پیش‌نمونه ها

اشیاء میتوانند تابع داشته باشند.

<span class="kd">var</span> <span class="nx">myObj</span> <span class="o">=</span> <span class="p">{</span>
    <span class="na">myFunc</span><span class="p">:</span> <span class="kd">function</span><span class="p">(){</span>
        <span class="k">return</span> <span class="s2">"Hello world!"</span><span class="p">;</span>
    <span class="p">}</span>
<span class="p">};</span>
<span class="nx">myObj</span><span class="p">.</span><span class="nx">myFunc</span><span class="p">();</span> <span class="c1">// = "Hello world!"
</span>

var myObj = {

myFunc: function(){

return "Hello world!";

}

};

myObj.myFunc(); // = "Hello world!"

وقتی تابع یک شی صدا زده می شود، تابع میتواند به سایر مقادیر درون آن شی

از طریق کلید واژه ی this دسترسی داشته باشد.

<span class="nx">myObj</span> <span class="o">=</span> <span class="p">{</span>
    <span class="na">myString</span><span class="p">:</span> <span class="s2">"Hello world!"</span><span class="p">,</span>
    <span class="na">myFunc</span><span class="p">:</span> <span class="kd">function</span><span class="p">(){</span>
        <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">myString</span><span class="p">;</span>
    <span class="p">}</span>
<span class="p">};</span>
<span class="nx">myObj</span><span class="p">.</span><span class="nx">myFunc</span><span class="p">();</span> <span class="c1">// = "Hello world!"
</span>

myObj = {

myString: "Hello world!",

myFunc: function(){

return this.myString;

}

};

myObj.myFunc(); // = "Hello world!"

اینکه مقدار this چه باشد بستگی به این دارد که تابع چگونه صدا زده شود

نه اینکه تابع کجا تعریف شده است.

بنابر این تابع بالا اگر بدین شکل صدا زده شود کار نخواهد کرد

<span class="kd">var</span> <span class="nx">myFunc</span> <span class="o">=</span> <span class="nx">myObj</span><span class="p">.</span><span class="nx">myFunc</span><span class="p">;</span>
<span class="nx">myFunc</span><span class="p">();</span> <span class="c1">// = undefined
</span>

var myFunc = myObj.myFunc;

myFunc(); // = undefined

به همین شکل، تابعی که در جای دیگر تعریف شده را میتوانید به یک شی الحاق کنید

و بدین ترتیب تابع میتواند به مقادیر درون شی از طریق this دسترسی پیدا کند.

<span class="kd">var</span> <span class="nx">myOtherFunc</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
    <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">myString</span><span class="p">.</span><span class="nx">toUpperCase</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">myObj</span><span class="p">.</span><span class="nx">myOtherFunc</span> <span class="o">=</span> <span class="nx">myOtherFunc</span><span class="p">;</span>
<span class="nx">myObj</span><span class="p">.</span><span class="nx">myOtherFunc</span><span class="p">();</span> <span class="c1">// = "HELLO WORLD!"
</span>

var myOtherFunc = function(){

return this.myString.toUpperCase();

}

myObj.myOtherFunc = myOtherFunc;

myObj.myOtherFunc(); // = "HELLO WORLD!"

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

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

<span class="kd">var</span> <span class="nx">MyConstructor</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">myNumber</span> <span class="o">=</span> <span class="mi">5</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">myNewObj</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">MyConstructor</span><span class="p">();</span> <span class="c1">// = {myNumber: 5}
</span><span class="nx">myNewObj</span><span class="p">.</span><span class="nx">myNumber</span><span class="p">;</span> <span class="c1">// = 5
</span>

var MyConstructor = function(){

this.myNumber = ۵;

}

myNewObj = new MyConstructor(); // = {myNumber: 5}

myNewObj.myNumber; // = ۵

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

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

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

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

طریق عضو جادویی __proto__ میدهند.

هرچند این به شناخت پیش نمونه ها کمک میکند ولی در حیطه ی جاوااسکریپت استاندارد قرار نمیگیرد.

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

<span class="kd">var</span> <span class="nx">myObj</span> <span class="o">=</span> <span class="p">{</span>
    <span class="na">myString</span><span class="p">:</span> <span class="s2">"Hello world!"</span><span class="p">,</span>
<span class="p">};</span>
<span class="kd">var</span> <span class="nx">myPrototype</span> <span class="o">=</span> <span class="p">{</span>
    <span class="na">meaningOfLife</span><span class="p">:</span> <span class="mi">42</span><span class="p">,</span>
    <span class="na">myFunc</span><span class="p">:</span> <span class="kd">function</span><span class="p">(){</span>
        <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">myString</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">()</span>
    <span class="p">}</span>
<span class="p">};</span>
<span class="nx">myObj</span><span class="p">.</span><span class="nx">__proto__</span> <span class="o">=</span> <span class="nx">myPrototype</span><span class="p">;</span>
<span class="nx">myObj</span><span class="p">.</span><span class="nx">meaningOfLife</span><span class="p">;</span> <span class="c1">// = 42
</span>

۱۰

۱۱

۱۲

var myObj = {

myString: "Hello world!",

};

var myPrototype = {

meaningOfLife: ۴۲,

myFunc: function(){

return this.myString.toLowerCase()

}

};

myObj.__proto__ = myPrototype;

myObj.meaningOfLife; // = ۴۲

این موضوع در مورد توابع نیز صدق میکند.

<span class="nx">myObj</span><span class="p">.</span><span class="nx">myFunc</span><span class="p">();</span> <span class="c1">// = "hello world!"
</span>

۱ ۲	<span class="nx">myObj</span><span class="p">.</span><span class="nx">myFunc</span><span class="p">();</span> <span class="c1">// = "hello world!" </span>

اگر عضو مورد نظر در پیش نمونه ی شی یافت نشود، پیش نمونه ی پیش نمونه جستجو شده و الی آخر

<span class="nx">myPrototype</span><span class="p">.</span><span class="nx">__proto__</span> <span class="o">=</span> <span class="p">{</span>
    <span class="na">myBoolean</span><span class="p">:</span> <span class="kc">true</span>
<span class="p">};</span>
<span class="nx">myObj</span><span class="p">.</span><span class="nx">myBoolean</span><span class="p">;</span> <span class="c1">// = true
</span>

myPrototype.__proto__ = {

myBoolean: true

};

myObj.myBoolean; // = true

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

بدین ترتیب اگر تابعی به پیش نمونه اضافه شود تمامی اشیاء میتوانند به آن دسترسی پیدا کنند.

<span class="nx">myPrototype</span><span class="p">.</span><span class="nx">meaningOfLife</span> <span class="o">=</span> <span class="mi">43</span><span class="p">;</span>
<span class="nx">myObj</span><span class="p">.</span><span class="nx">meaningOfLife</span><span class="p">;</span> <span class="c1">// = 43
</span>

myPrototype.meaningOfLife = ۴۳;

myObj.meaningOfLife; // = ۴۳

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

ولی دو راه برای ارائه پیش نمونه برای اشیاء جدید وجود دارد.

اولی وقتیست که از تابع Object.create استفاده میشود – که اخیرا به زبان اضافه شده است و بنابراین بر روی همه ی پیاده سازی های آن وجود ندارد.

<span class="kd">var</span> <span class="nx">myObj</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">create</span><span class="p">(</span><span class="nx">myPrototype</span><span class="p">);</span>
<span class="nx">myObj</span><span class="p">.</span><span class="nx">meaningOfLife</span><span class="p">;</span> <span class="c1">// = 43
</span>

var myObj = Object.create(myPrototype);

myObj.meaningOfLife; // = ۴۳

راه دوم – که همه جا قابل استفاده است – مربوط به سازنده ها می شود.

سازنده ها دارای عضوی با نام prototype هستند. این پیش نمونه ی خود سازنده نیست

بلکه پیش نمونه ایست که به تمامی اشیاء ساخته شده توسط این سازنده الحاق میشود.

<span class="nx">MyConstructor</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="p">{</span>
    <span class="na">myNumber</span><span class="p">:</span> <span class="mi">5</span><span class="p">,</span>
    <span class="na">getMyNumber</span><span class="p">:</span> <span class="kd">function</span><span class="p">(){</span>
        <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">myNumber</span><span class="p">;</span>
    <span class="p">}</span>
<span class="p">};</span>
<span class="kd">var</span> <span class="nx">myNewObj2</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">MyConstructor</span><span class="p">();</span>
<span class="nx">myNewObj2</span><span class="p">.</span><span class="nx">getMyNumber</span><span class="p">();</span> <span class="c1">// = 5
</span><span class="nx">myNewObj2</span><span class="p">.</span><span class="nx">myNumber</span> <span class="o">=</span> <span class="mi">6</span>
<span class="nx">myNewObj2</span><span class="p">.</span><span class="nx">getMyNumber</span><span class="p">();</span> <span class="c1">// = 6
</span>

۱۰

۱۱

MyConstructor.prototype = {

myNumber: ۵,

getMyNumber: function(){

return this.myNumber;

}

};

var myNewObj2 = new MyConstructor();

myNewObj2.getMyNumber(); // = ۵

myNewObj2.myNumber = ۶

myNewObj2.getMyNumber(); // = ۶

رشته ها و سایر سازنده های پیش ساخته ی زبان نیز دارای این ویژگی هستند.

<span class="kd">var</span> <span class="nx">myNumber</span> <span class="o">=</span> <span class="mi">12</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">myNumberObj</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Number</span><span class="p">(</span><span class="mi">12</span><span class="p">);</span>
<span class="nx">myNumber</span> <span class="o">==</span> <span class="nx">myNumberObj</span><span class="p">;</span> <span class="c1">// = true
</span>

var myNumber = ۱۲;

var myNumberObj = new Number(۱۲);

myNumber == myNumberObj; // = true

به جز این که این سازنده ها دقیقا مانند سازنده های دیگر نیستند.

<span class="k">typeof</span> <span class="nx">myNumber</span><span class="p">;</span> <span class="c1">// = 'number'
</span><span class="k">typeof</span> <span class="nx">myNumberObj</span><span class="p">;</span> <span class="c1">// = 'object'
</span><span class="nx">myNumber</span> <span class="o">===</span> <span class="nx">myNumberObj</span><span class="p">;</span> <span class="c1">// = false
</span><span class="k">if</span> <span class="p">(</span><span class="mi">0</span><span class="p">){</span>
    <span class="c1">// This code won't execute, because 0 is falsy.
</span><span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nb">Number</span><span class="p">(</span><span class="mi">0</span><span class="p">)){</span>
    <span class="c1">// This code *will* execute, because Number(0) is truthy.
</span><span class="p">}</span>

typeof myNumber; // = 'number'

typeof myNumberObj; // = 'object'

myNumber === myNumberObj; // = false

if (۰){

// This code won't execute, because 0 is falsy.

}

if (Number(۰)){

// This code *will* execute, because Number(0) is truthy.

}

ولی به هر حال هم اشیاء عادی و هم اشیاء پیش ساخته هر دو در داشتن پیش نمونه مشترک هستند

بنابر این شما میتوانید ویژگی و تابع جدیدی به رشته ها – به عنوان مثال – اضافه کنید.

گاها به از این خاصیت با عنوان پلی فیل و برای اضافه کردن ویژگی های جدید به مجموعه ای از اشیاء فعلی زبان استفاده میشود

که کاربرد فراوانی در پشتیبانی از نسخه های قدیمیتر مرورگر ها دارد.

<span class="nb">String</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">firstCharacter</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
    <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
<span class="p">}</span>
<span class="s2">"abc"</span><span class="p">.</span><span class="nx">firstCharacter</span><span class="p">();</span> <span class="c1">// = "a"
</span>

String.prototype.firstCharacter = function(){

return this.charAt(۰);

}

"abc".firstCharacter(); // = "a"

برای مثال، پیشتر اشاره کردیم که Object.create در نسخه های جدید پشتیبانی نشده است

ولی میتوان آن را به صورت پلی فیل استفاده کرد.

<span class="k">if</span> <span class="p">(</span><span class="nb">Object</span><span class="p">.</span><span class="nx">create</span> <span class="o">===</span> <span class="kc">undefined</span><span class="p">){</span> <span class="c1">// don't overwrite it if it exists
</span>    <span class="nb">Object</span><span class="p">.</span><span class="nx">create</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">proto</span><span class="p">){</span>
        <span class="c1">// make a temporary constructor with the right prototype
</span>        <span class="kd">var</span> <span class="nx">Constructor</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){};</span>
        <span class="nx">Constructor</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="nx">proto</span><span class="p">;</span>
        <span class="c1">// then use it to create a new, appropriately-prototyped object
</span>        <span class="k">return</span> <span class="k">new</span> <span class="nx">Constructor</span><span class="p">();</span>
    <span class="p">}</span>
<span class="p">}</span>

if (Object.create === undefined){ // don't overwrite it if it exists

Object.create = function(proto){

// make a temporary constructor with the right prototype

var Constructor = function(){};

Constructor.prototype = proto;

// then use it to create a new, appropriately-prototyped object

return new Constructor();

}

لینک کوتاه مطلب

آشنایی با جاوا اسکریپت

۱. اعداد، رشته ها و عملگرها

۲. متغیر ها، آرایه ها و شئ ها

۳. منطق و ساختار کنترل

۴. توابع و مفاهیم گستره و بستار

۵. دیگر اشیاء، سازنده ها و پیش‌نمونه ها

دیدگاه ها

یک دیدگاه

ارسال نظرات

لغو پاسخ

آشنایی با جاوا اسکریپت

۱. اعداد، رشته ها و عملگرها

۲. متغیر ها، آرایه ها و شئ ها

۳. منطق و ساختار کنترل

۴. توابع و مفاهیم گستره و بستار

۵. دیگر اشیاء، سازنده ها و پیش‌نمونه ها

پست های مرتبط

آپلود فایل با Ajax و درصد پیشرفت قسمت۲

آپلود فایل با Ajax و درصد پیشرفت قسمت۱

تشخیص مرورگر کاربر با جاوا اسکریپت

دیدگاه ها

یک دیدگاه

ارسال نظرات

لغو پاسخ