آموزش JavaScript
بستن دسته بندی
۲۴۱
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
نمایش دسته بندی ها (۲۴۱ آموزش)
مباحث اولیه برای آشنایی با JavaScript
مباحث اولیه برای آشنایی با JavaScript
10
کنسول (Console)، در JavaScript
کنسول (Console)، در JavaScript
24
نمایش متن در خروجی صفحه، در JavaScript
نمایش متن در خروجی صفحه، در JavaScript
2
عملگرها (Operator)، در JavaScript
عملگرها (Operator)، در JavaScript
0
متغیرها (Variable)، در JavaScript
متغیرها (Variable)، در JavaScript
8
رشته ها (متن ها - String)، در JavaScript
رشته ها (متن ها - String)، در JavaScript
26
نمایش پیام، در JavaScript
نمایش پیام، در JavaScript
4
توابع (Function)، در JavaScript
توابع (Function)، در JavaScript
1
حلقه ها (Loop)، در JavaScript
حلقه ها (Loop)، در JavaScript
4
آرایه ها (Array)، در JavaScript
آرایه ها (Array)، در JavaScript
23
شیء ها (Object)، در JavaScript
شیء ها (Object)، در JavaScript
1
انتخاب عنصرهای صفحه (اشاره به عنصرهای صفحه)، در JavaScript
انتخاب عنصرهای صفحه (اشاره به عنصرهای صفحه)، در JavaScript
7
کلاس های (Class) عنصرها، در JavaScript
کلاس های (Class) عنصرها، در JavaScript
5
id عنصرها، در JavaScript
id عنصرها، در JavaScript
0
مشخصه های (Attribute) عنصرها، در JavaScript
مشخصه های (Attribute) عنصرها، در JavaScript
1
رویدادها (Event)، در JavaScript
رویدادها (Event)، در JavaScript
0
عملیات های ریاضی، در JavaScript
عملیات های ریاضی، در JavaScript
16
تاریخ و زمان، در JavaScript
تاریخ و زمان، در JavaScript
10
زمان بندی اجرای کدها، در JavaScript
زمان بندی اجرای کدها، در JavaScript
2
افزودن و یا حذف محتوا و کد، به صفحه، در JavaScript
افزودن و یا حذف محتوا و کد، به صفحه، در JavaScript
6
فرم ها (Form)، در JavaScript
فرم ها (Form)، در JavaScript
11
عکس ها (Image)، در JavaScript
عکس ها (Image)، در JavaScript
2
دکمه ها (Button)، در JavaScript
دکمه ها (Button)، در JavaScript
2
لینک ها (Link)، در JavaScript
لینک ها (Link)، در JavaScript
5
پنجره ها (Window)، در JavaScript
پنجره ها (Window)، در JavaScript
2
جدول ها (Table)، در JavaScript
جدول ها (Table)، در JavaScript
1
رنگ ها (Color) و تعیین رنگ، در JavaScript
رنگ ها (Color) و تعیین رنگ، در JavaScript
1
کلیک کردن (Click)، در JavaScript
کلیک کردن (Click)، در JavaScript
1
اسکرول (Scroll)، در JavaScript
اسکرول (Scroll)، در JavaScript
2
کار با کل صفحه، در JavaScript
کار با کل صفحه، در JavaScript
1
صفحه فعلی (Current Page)، در JavaScript
صفحه فعلی (Current Page)، در JavaScript
19
دریافت ورودی از کاربر، در JavaScript
دریافت ورودی از کاربر، در JavaScript
1
تمرکز (Focus)، در JavaScript
تمرکز (Focus)، در JavaScript
3
مرورگر اینترنت (Browser)، در JavaScript
مرورگر اینترنت (Browser)، در JavaScript
3
ذخیره اطلاعات در مرورگر اینترنت (Browser) کاربر، در JavaScript
ذخیره اطلاعات در مرورگر اینترنت (Browser) کاربر، در JavaScript
10
کار با کیبورد (Keyboard)، در JavaScript
کار با کیبورد (Keyboard)، در JavaScript
2
موس، در JavaScript
موس، در JavaScript
1
Iframe ها، در JavaScript
Iframe ها، در JavaScript
1
بارگذاری (دانلود) فایل، در JavaScript
بارگذاری (دانلود) فایل، در JavaScript
1
علامت ها (Sign)، در JavaScript
علامت ها (Sign)، در JavaScript
0
تکنیک Ajax ، در JavaScript
تکنیک Ajax ، در JavaScript
4
ساختار JSON ، در JavaScript
ساختار JSON ، در JavaScript
0
منسوخ شده ها (Deprecated و Obsolete)، در JavaScript
منسوخ شده ها (Deprecated و Obsolete)، در JavaScript
1
مباحث عمومی، در JavaScript
مباحث عمومی، در JavaScript
3

نویسنده علیرضا گلمکانی
شماره کلید 28250
گزینه ها

تفاوت تعریف متغیرها (Variables)، با var و let و const ، در JavaScript

در JavaScript ، با استفاده از var و let و const ، می توانیم متغیرها (Variable) را تعریف کنیم. که آنها را به صورت جداگانه در کلیدهای آموزشی زیر شرح داده ایم :

اگرچه هر سه مورد var و let و const برای تعریف متغیرها (Variable) به کار می روند، اما بین متغیرهایی (Variable) که توسط آنها تعریف می شود، تفاوت هایی وجود دارد (متغیرها ویژگی های متفاوتی خواهند داشت).

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

تعریف مجدد یک متغیر (Variable) :

هنگام استفاده از var ، امکان تعریف مجدد یک متغیر (Variable) وجود دارد، اما هنگام استفاده از let و const ، چنین امکانی وجود ندارد.

بنابراین کد زیر صحیح می باشد :

طرح رنگ

اما کدهای زیر غلط هستند و خطا می دهند :

طرح رنگ
طرح رنگ

به مثال زیر توجه کنید :

مثال
طرح رنگ

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید
مثال
طرح رنگ

نتیجه :

کد خطا می دهد و به درستی اجرا نمی شود (زیرا خواسته ایم با استفاده از let دوباره متغیر را تعریف کنیم) :

خطا - صفحه را دوباره بارگذاری کنید
مثال
طرح رنگ

نتیجه :

کد خطا می دهد و به درستی اجرا نمی شود (زیرا خواسته ایم با استفاده از const دوباره متغیر را تعریف کنیم) :

خطا - صفحه را دوباره بارگذاری کنید
نکته

دقت شود که مفهوم ((تعریف مجدد متغیر)) را با ((به روزرسانی مقدار متغیر)) اشتباه نگیرید (تعریف = Define ، به روزرسانی = Update). به عنوان مثال، هنگام استفاده از var ، در ((به روزرسانی مقدار متغیر))، عبارت var دوباره نوشته نمی شود، اما در ((تعریف مجدد متغیر)) عبارت var دوباره نوشته می شود.

به روزرسانی (Update) مقدار یک متغیر (Variable) :

هنگام استفاده از var و let ، امکان به روزرسانی (Update) مقدار یک متغیر (Variable) وجود دارد، اما هنگام استفاده از const ، چنین امکانی وجود ندارد.

بنابراین کدهای زیر صحیح می باشند :

طرح رنگ
طرح رنگ

اما کد زیر غلط است و خطا می دهد :

طرح رنگ

به مثال زیر توجه کنید :

مثال
طرح رنگ

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید
مثال
طرح رنگ

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید
مثال
طرح رنگ

نتیجه :

کد خطا می دهد و به درستی اجرا نمی شود (زیرا خواسته ایم با استفاده از const یک مقدار جدید برای متغیر تعیین کنیم) :

خطا - صفحه را دوباره بارگذاری کنید

مقداردهی به متغیر (Variable)، بعد از تعریف نام آن :

با استفاده از var و let ، برای تعریف یک متغیر (Variable)، می توانیم ابتدا تنها با ذکر نام متغیر (Variable)، آن را تعریف کنیم (بدون اینکه مقدار (Value) آن را مشخص کنیم) و سپس در ادامه کدها، هر کجا که نیاز بود، مقدار (Value) مورد نظرمان را برای آن متغیر (Variable) تعیین نماییم (مقداردهی متغیر). اما این کار را نمی توانیم با استفاده از const انجام دهیم و در همان زمان تعریف نام متغیر (Variable)، باید مقدار (Value) آن را نیز مشخص کنیم.

بنابراین کدهای زیر صحیح می باشند :

طرح رنگ
طرح رنگ

اما کد زیر غلط است و خطا می دهد :

طرح رنگ

به مثال زیر توجه کنید :

مثال
طرح رنگ

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید
مثال
طرح رنگ

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید
مثال
طرح رنگ

نتیجه :

کد خطا می دهد و به درستی اجرا نمی شود :

خطا - صفحه را دوباره بارگذاری کنید

محدوده تعریف (Scope) متغیرها (Variable) :

درJavaScript ، می توانیم محدوده تعریف (Scope) متغیرها (Variable) را به دو دسته کلی زیر تقسیم کنیم :

  1. محدوده تعریف سراسری (Global Scope)
  2. محدوده تعریف محلی (Local Scope)

که محدوده تعریف محلی (Local Scope) خود به دو دسته تقسیم می شود :

  1. محدوده تعریف تابعی (Function Scope)
  2. محدوده تعریف بلوکی (Block Scope)

بنابراین در کل در JavaScript می توانیم بگوییم که 3 نوع محدوده تعریف (Scope) داریم :

  1. محدوده تعریف سراسری (Global Scope)
  2. محدوده تعریف تابعی (Function Scope) (یک نوع محدوده تعریف محلی (Local Scope))
  3. محدوده تعریف بلوکی (Block Scope) (یک نوع محدوده تعریف محلی (Local Scope))

در ادامه بر اساس شرح دادن مفهوم هر یک از این محدوده های تعریف (Scope)، در مورد محدوده تعریف (Scope) متغیرهای (Variable) تعریف شده با var و let و const توضیحاتی خواهیم داد.

محدوده تعریف سراسری (Global Scope) :

چنانچه متغیری (Variable) را با استفاده از var یا let یا const در خارج از کدهای یک تابع (Function) تعریف کرده باشیم، آنگاه مقدار (Value) متغیر (Variable) مورد نظر درون کدهای آن تابع (Function) در دسترس می باشد.

در اصطلاح می گوییم که آن متغیر (Variable)، سراسری (Global) است و آن را متغیر سراسری (Global Variable) می نامیم و می گوییم که دارای محدوده تعریف سراسری (Global Scope) می باشد.

ما عبارت های قبل را برای حالتی که تنها یک تابع (Function) داریم، بیان کردیم. اگر بیش از یک تابع (Function) داشته باشیم، باید متغیر (Variable) در خارج از همه توابع (Function) تعریف شده باشد. آنگاه می گوییم که متغیر (Variable) به صورت سراسری (Globally) تعریف شده و بنابراین در همه توابع (Function) و اسکریپت ها (Script) در دسترس می باشد (در هر بخشی از کدها در دسترس می باشد) (دارای محدوده تعریف سراسری (Global Scope) خواهد بود).

به مثال زیر توجه کنید :

مثال
طرح رنگ

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید

همچنین تفاوتی نمی کند که متغیر (Variable) در قبل از کدهای تابع (Function) تعریف شده باشد، یا بعد از کدهای تابع (نتیجه هر دو یکسان است) :

طرح رنگ

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید
مثال
طرح رنگ

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید

همچنین تفاوتی نمی کند که متغیر (Variable) در قبل از کدهای تابع (Function) تعریف شده باشد، یا بعد از کدهای تابع (نتیجه هر دو یکسان است) :

طرح رنگ

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید
مثال
طرح رنگ

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید

همچنین تفاوتی نمی کند که متغیر (Variable) در قبل از کدهای تابع (Function) تعریف شده باشد، یا بعد از کدهای تابع (نتیجه هر دو یکسان است) :

طرح رنگ

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید

محدوده تعریف تابعی (Function Scope) (یک نوع محدوده تعریف محلی (Local Scope)) :

چنانچه متغیری (Variable) را با استفاده از var یا let یا const درون کدهای یک تابع (Function) تعریف کنیم، آنگاه مقدار (Value) متغیر (Variable) در بیرون از کدهای آن تابع (Function) در دسترس نمی باشد.

در اصطلاح می گوییم که آن متغیر (Variable) نسبت به آن تابع (Function)، محلی (Local) می باشد و آن را متغیر محلی (Local Variable) می نامیم و می گوییم که دارای محدوده تعریف تابعی (Function Scope) می باشد (یعنی فقط در درون تابع (Function) تعریف شده و در دسنرس می باشد).

دقت کنید که محدوده تعریف تابعی (Function Scope)، یک نوع محدوده تعریف محلی (Local Scope) است و بنابراین می توانیم بگوییم که متغیر (Variable) دارای محدوده تعریف محلی (Local Scope) می باشد.

به مثال زیر توجه کنید :

مثال
طرح رنگ

نتیجه :

هیچ خروجی نخواهیم داشت (چون متغیر در خارج از تابع، تعریف نشده) :

خطا - صفحه را دوباره بارگذاری کنید

اینکه تابع (Function) اجرا شده باشد یا نباشد، هیچ تاثیری ندارد و در هر دو حالت، مقدار (Value) متغیر (Variable) در بیرون از کدهای تابع (Function) در دسترس نمی باشد :

طرح رنگ

نتیجه :

هیچ خروجی نخواهیم داشت (چون متغیر در خارج از تابع، تعریف نشده) :

خطا - صفحه را دوباره بارگذاری کنید
مثال
طرح رنگ

نتیجه :

هیچ خروجی نخواهیم داشت (چون متغیر در خارج از تابع، تعریف نشده) :

خطا - صفحه را دوباره بارگذاری کنید

اینکه تابع (Function) اجرا شده باشد یا نباشد، هیچ تاثیری ندارد و در هر دو حالت، مقدار (Value) متغیر (Variable) در بیرون از کدهای تابع (Function) در دسترس نمی باشد :

طرح رنگ

نتیجه :

هیچ خروجی نخواهیم داشت (چون متغیر در خارج از تابع، تعریف نشده) :

خطا - صفحه را دوباره بارگذاری کنید
مثال
طرح رنگ

نتیجه :

هیچ خروجی نخواهیم داشت (چون متغیر در خارج از تابع، تعریف نشده) :

خطا - صفحه را دوباره بارگذاری کنید

اینکه تابع (Function) اجرا شده باشد یا نباشد، هیچ تاثیری ندارد و در هر دو حالت، مقدار (Value) متغیر (Variable) در بیرون از کدهای تابع (Function) در دسترس نمی باشد :

طرح رنگ

نتیجه :

هیچ خروجی نخواهیم داشت (چون متغیر در خارج از تابع، تعریف نشده) :

خطا - صفحه را دوباره بارگذاری کنید
نکته

چنانچه متغیری (Variable) را با استفاده از var یا let در خارج از کدهای یک تابع (Function) تعریف کرده باشیم و سپس مقدار (Value) متغیر (Variable) مورد نظر را درون کدهای آن تابع (Function) تغییر دهیم (تعیین مقدار جدید)، پس از اجرای آن تابع (Function)، آنگاه متغیر (Variable) مورد نظر هم در خارج از آن تابع (Function) و هم در داخل کدهای آن تابع (Function)، دارای آن مقدار جدید می باشد.

دقت شود که اجرای این کار با const امکان پذیر نیست، زیرا مقدار (Value) متغیرهای (Variable) تعریف شده با const را نمی توان تغییر داد.

به مثال زیر توجه کنید :

مثال
طرح رنگ

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید
مثال
طرح رنگ

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید

محدوده تعریف بلوکی (Block Scope) (یک نوع محدوده تعریف محلی (Local Scope)) :

در JavaScript ، متغیرهایی که با استفاده از let یا const تعریف می شوند، دارای محدوده تعریف بلوکی (Block Scope) می باشند، اما متغیرهایی که با استفاده از var تعریف می شوند، اینگونه نیستند و دارای محدوده تعریف بلوکی (Block Scope) نمی باشند.

اما بهتر است که ابتدا شرح دهیم که اصلا بلوک (Block) و محدوده تعریف بلوکی (Block Scope) چیست.

در JavaScript ، هر قطعه کدی که در بین علامت های { } قرار بگیرد را یک بلوک (Block) می نامیم. به عنوان مثال، کد زیر، یک بلوک (Block) می باشد :

طرح رنگ

چنانچه متغیری (Variable) را با استفاده از let یا const تعریف کنیم، آنگاه آن متغیر (Variable) دارای محدوده تعریف بلوکی (Block Scope) خواهد بود. یعنی متغیرهایی که با استفاده از let یا const درون یک بلوک (Block) تعریف می شوند، فقط در داخل آن بلوک (Block) در دسترس هستند و در خارج از آن بلوک (Block)، در دسترس نیستند (تعریف نشده اند) و نمی توانیم به مقدار آنها در خارج از آن بلوک (Block) دسترسی داشته باشیم (در بیرون از علامت های { } تعریف نشده اند و در دسترس نمی باشند).

طرح رنگ
طرح رنگ

دقت کنید که محدوده تعریف بلوکی (Block Scope)، یک نوع محدوده تعریف محلی (Local Scope) است و بنابراین می توانیم بگوییم که متغیر (Variable) دارای محدوده تعریف محلی (Local Scope) می باشد.

اما برای var اینگونه نیست و هنگامی که متغیرهایی (Variable) با استفاده از var درون یک بلوک (Block) تعریف می شوند، هم در داخل آن بلوک (Block) و هم در خارج از آن بلوک (Block)، در دسترس هستند (تعریف شده اند) (در بیرون از علامت های { } تعریف شده اند و در دسترس می باشند).

به مثال زیر توجه کنید :

مثال
طرح رنگ

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید
مثال
طرح رنگ

نتیجه :

هیچ خروجی نخواهیم داشت، زیرا متغیر (Variable) در خارج از بلوک (Block) تعریف نشده است :

خطا - صفحه را دوباره بارگذاری کنید
مثال
طرح رنگ

نتیجه :

هیچ خروجی نخواهیم داشت، زیرا متغیر (Variable) در خارج از بلوک (Block) تعریف نشده است :

خطا - صفحه را دوباره بارگذاری کنید
نکته

باید دقت داشت که علامت های { } در ساختار کدنویسی عبارت های شرطی if و switch نیز وجود دارند (این عبارت های شرطی (Condition)، به صورت بلوک (Block) می باشند).

بنابراین وقتی با استفاده از let یا const ، یک متغیر (Variable) را درون کدهای یک بلوک عبارت شرطی (if یا switch) تعریف می کنیم، آنگاه متغیر (Variable) در خارج از بلوک عبارت شرطی، تعریف نشده است و به مقدار آن دسترسی نداریم (یعنی حتی اگر شرط برقرار باشد و کد تعریف متغیر (Variable) اجرا شود، باز هم متغیر (Variable) در خارج از بلوک (Block)، تعریف نشده) :

طرح رنگ
طرح رنگ

اما برای var اینگونه نیست (اگر شرط برقرار باشد، آنگاه متغیر (Variable) در خارج از بلوک (Block)، تعریف شده) :

طرح رنگ

به مثال زیر توجه کنید :

مثال
طرح رنگ

نتیجه :

چون در عبارت شرطی، شرط صادق است، بنابراین متغیر (Variable) برابر مقدار مورد نظرمان تعریف شده و در خارج از بلوک (Block) نیز تعریف شده و در دسترس می باشد :

خطا - صفحه را دوباره بارگذاری کنید
مثال
طرح رنگ

نتیجه :

هیچ خروجی نخواهیم داشت، زیرا متغیر (Variable) در خارج از بلوک (Block) تعریف نشده است (حتی با وجود اینکه در عبارت شرطی، شرط صادق است) (اما در داخل بلوک (Block) تعریف شده) :

خطا - صفحه را دوباره بارگذاری کنید
مثال
طرح رنگ

نتیجه :

هیچ خروجی نخواهیم داشت، زیرا متغیر (Variable) در خارج از بلوک (Block) تعریف نشده است (حتی با وجود اینکه در عبارت شرطی، شرط صادق است) (اما در داخل بلوک (Block) تعریف شده) :

خطا - صفحه را دوباره بارگذاری کنید
نکته

باید دقت داشت که علامت های { } در ساختار کدنویسی حلقه های for و while نیز وجود دارند (این حلقه ها (Loop)، به صورت بلوک (Block) می باشند).

بنابراین وقتی با استفاده از let یا const ، یک متغیر (Variable) را درون کدهای یک بلوک حلقه (for یا while) تعریف می کنیم، آنگاه متغیر (Variable) در خارج از بلوک حلقه (for یا while)، تعریف نشده است و به مقدار آن دسترسی نداریم :

طرح رنگ
طرح رنگ

اما برای var اینگونه نیست (متغیر (Variable) در خارج از بلوک (Block)، تعریف شده) :

طرح رنگ

به مثال زیر توجه کنید :

مثال
طرح رنگ

نتیجه :

متغیر (Variable) در خارج از بلوک (Block) نیز تعریف شده و در دسترس می باشد :

خطا - صفحه را دوباره بارگذاری کنید
مثال
طرح رنگ

نتیجه :

هیچ خروجی نخواهیم داشت، زیرا متغیر (Variable) در خارج از بلوک (Block) تعریف نشده است (فقط در داخل بلوک (Block) تعریف شده) :

خطا - صفحه را دوباره بارگذاری کنید
مثال
طرح رنگ

نتیجه :

هیچ خروجی نخواهیم داشت، زیرا متغیر (Variable) در خارج از بلوک (Block) تعریف نشده است (فقط در داخل بلوک (Block) تعریف شده) :

خطا - صفحه را دوباره بارگذاری کنید
نکته

اگرچه علامت های { } در ساختار کدنویسی توابع (Function) وجود دارند، ولی وقتی با توابع (Function) سر و کار داریم، باید مفهوم محدوده تعریف تابعی (Function Scope) را در نظر بگیریم (نه مفهوم محدوده تعریف بلوکی (Block Scope)) :

طرح رنگ

بنابراین مطابق مفهوم محدوده تعریف تابعی (Function Scope)، چنانچه متغیری (Variable) را با استفاده از var درون کدهای یک تابع (Function) تعریف کنیم، آنگاه مقدار (Value) متغیر (Variable) در بیرون از کدهای آن تابع (Function) در دسترس نمی باشد.

اما اگر با دیدن علامت های { } می خواستیم از مفهوم محدوده تعریف بلوکی (Block Scope) استفاده کنیم، دچار اشتباه می شدیم، زیرا بر اساس آن مفهوم استدلال می کردیم که چون متغیر (Variable) با استفاده از var تعریف شده، باید مقدار (Value) متغیر (Variable) در بیرون از بلوک (Block) (علامت های { } ) در دسترس باشد، که چنین چیزی نیست و غلط است.

بنابراین برای var و let و const ، هر زمان که یک تابع (Function) تعریف کردید، تنها مفهوم محدوده تعریف تابعی (Function Scope) را در نظر بگیرید.

تعریف خودکار (Automatically) یک متغیر (Variable) به صورت متغیر سراسری (Global Variable) (دارای محدوده تعریف سراسری (Global Scope)) :

فرض کنید قبلا نام یک متغیر (Variable) را اعلام نکرده باشیم (Undeclared Variable)، یعنی نه var و نه let و نه const برای اعلام نام مورد نظرمان به عنوان یک متغیر (Variable) به کار نرفته باشد و فقط یک مقدار (Value) را برای نام مورد نظر تعیین نماییم :

طرح رنگ

در این حالت، یک متغیر (Variable) تعریف شده است که به صورت خودکار (Automatically) یک متغیر سراسری (Global Variable) است و دارای محدوده تعریف سراسری (Global Scope) می باشد.

به مثال زیر توجه کنید :

مثال
طرح رنگ

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید
نکته

در JavaScript ، با استفاده از Strict Mode ، می توانیم از تعریف خودکار (Automatically) متغیرهای اعلام نشده (Undeclared Variable) به صورت متغیر سراسری (Global Variable) (دارای محدوده تعریف سراسری (Global Scope))، جلوگیری کنیم.

متغیرهای سراسری (Global Variable) (دارای محدوده تعریف سراسری (Global Scope))، در HTML :

در هنگامی که با JavaScript کار می کنیم، محدوده تعریف سراسری (Global Scope) همان JavaScript Environment (محیط JavaScript) می باشد.

در HTML ، محدوده تعریف سراسری (Global Scope) برابر شیء window است.

در HTML ، هر متغیری (Variable) که با استفاده از var به صورت متغیر سراسری (Global Variable) تعریف شود، از طریق شیء window به آن متغیر (Variable) دسترسی داریم. یعنی مثلا اگر در HTML ، با استفاده از var ، یک متغیر سراسری (Global Variable) با نام kelidestan تعریف کنیم :

طرح رنگ

آنگاه از طریق عبارت زیر (بر اساس شیء window ) به مقدار (Value) متغیر kelidestan دسترسی خواهیم داشت :

طرح رنگ

به مثال زیر توجه کنید :

مثال
طرح رنگ

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید
نکته

دقت کنید که این مورد، برای متغیرهای سراسری (Global Variable) تعریف شده با let یا const صدق نمی کند.

به مثال زیر توجه کنید :

مثال
طرح رنگ

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید
مثال
طرح رنگ

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید
نکته

بنابراین در HTML ، هنگام تعریف متغیرهای سراسری (Global Variable) (یا توابعی (Function) که در واقع متغیر سراسری (Global Variable) هستند) با استفاده از var ، باید مراقب باشیم که متغیرها (Variable) و توابع (Function) شیء window بازنویسی (Overwrite) نشوند.

نکته

در JavaScript ، شیء ها (Object) و توابع (Function) نیز در واقع متغیر (Variable) می باشند. بنابراین همه مواردی که در مورد محدوده تعریف (Scope) متغیرها (Variable) ذکر کردیم، برای آنها نیز صادق است.

پس در هنگام کدنویسی، باید قواعد مربوط به محدوده تعریف (Scope) را برای این 3 مورد در نظر داشته باشیم :

  1. متغیرها (Variable)
  2. شیء ها (Object)
  3. توابع (Function)

تعریف یک متغیر (Variable) به صورت شیء (Object) :

اگر با استفاده از var یا let ، متغیری (Variable) را به صورت یک شیء (Object) تعریف کنیم، هم امکان تغییر دادن (به روز کردن - Update) خود شیء (Object) وجود دارد و هم می توانیم مقدار (Value) مشخصه های (Property) آن شیء (Object) را تغییر دهیم. اما اگر با استفاده از const ، متغیری (Variable) را به صورت یک شیء (Object) تعریف کنیم، امکان تغییر دادن (به روز کردن - Update) خود شیء (Object) وجود ندارد، اما می توانیم مقدار (Value) مشخصه های (Property) آن شیء (Object) را تغییر دهیم.

به مثال زیر توجه کنید :

مثال

ابتدا متغیری (Variable) را با استفاده از const به صورت یک شیء (Object) تعریف می کنیم و سپس با روش JSON.stringify آن را تبدیل به یک رشته (String) کرده و در خروجی صفحه نمایش می دهیم :

طرح رنگ

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید

این بار مقدار (Value) مشخصه name را تغییر می دهیم :

طرح رنگ

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید

مشاهده کردید که این تغییر بدون هیچ مشکلی انجام شد.

اکنون می خواهیم نشان دهیم که در صورت تلاش برای تغییر (به روز کردن - Update) خود متغیر (Variable)، با خطا روبرو می شویم :

طرح رنگ

نتیجه :

ادامه اجرای کدها با خطا روبرو می شود :

خطا - صفحه را دوباره بارگذاری کنید
مثال
طرح رنگ

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید
منابع و لینک های مفید

کپی برداری توسط سایر وب سایت ها، ممنوع بوده و پیگرد قانونی دارد. (بیشتر بدانید)

گزینه ها
به اشتراک گذاری (Share) در شبکه های اجتماعی
نظرات 0 0 0

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)

جستجو در کلیدستان، توسط گوگل

جستجو در عنوان کلیدها

دسترسی سریع

×

شماره کلید


کلید
×

شماره دسته کلید


دسته کلید
×

جستجو


جستجو
آموزش jQuery
بستن دسته بندی
۴۶
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با jQuery
مباحث اولیه برای آشنایی با jQuery
10
انتخاب عنصرهای صفحه (اشاره به عنصرهای صفحه)، در jQuery
انتخاب عنصرهای صفحه (اشاره به عنصرهای صفحه)، در jQuery
2
کلاس های (Class) عنصرها، در jQuery
کلاس های (Class) عنصرها، در jQuery
1
id عنصرها، در jQuery
id عنصرها، در jQuery
0
رویدادها (Event)، در jQuery
رویدادها (Event)، در jQuery
6
چک کردن محتوای صفحه، در jQuery
چک کردن محتوای صفحه، در jQuery
0
تغییر محتوای صفحه، در jQuery
تغییر محتوای صفحه، در jQuery
8
بچه های (Child) عنصرها، در jQuery
بچه های (Child) عنصرها، در jQuery
1
رنگ ها (Color) و تعیین رنگ، در jQuery
رنگ ها (Color) و تعیین رنگ، در jQuery
1
فرم ها (Form)، در jQuery
فرم ها (Form)، در jQuery
3
دکمه ها (Button)، در jQuery
دکمه ها (Button)، در jQuery
1
اندازه عنصرها و بخش های صفحه، در jQuery
اندازه عنصرها و بخش های صفحه، در jQuery
6
کلیک کردن (Click)، در jQuery
کلیک کردن (Click)، در jQuery
0
اسکرول (Scroll)، در jQuery
اسکرول (Scroll)، در jQuery
2
کار با کل صفحه، در jQuery
کار با کل صفحه، در jQuery
1
تکنیک AJAX ، در jQuery
تکنیک AJAX ، در jQuery
2
مباحث عمومی، در jQuery
مباحث عمومی، در jQuery
2
آموزش JSON
بستن دسته بندی
۴
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

مباحث اولیه برای آشنایی با JSON
مباحث اولیه برای آشنایی با JSON
مباحث اولیه برای آشنایی با JSON
4
دسته کلیدهایی از موضوع های دیگر
ساختار JSON ، در PHP
ساختار JSON ، در PHP
2
آموزش HTML
بستن دسته بندی
۱۰۴
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با HTML
مباحث اولیه برای آشنایی با HTML
24
نمایش متن (Text)، در HTML
نمایش متن (Text)، در HTML
16
نمایش عکس (Image)، در HTML
نمایش عکس (Image)، در HTML
6
لینک ها (Link)، در HTML
لینک ها (Link)، در HTML
2
فهرست ها (لیست ها - List)، در HTML
فهرست ها (لیست ها - List)، در HTML
1
جدول ها (Table)، در HTML
جدول ها (Table)، در HTML
7
فرم ها (Form)، در HTML
فرم ها (Form)، در HTML
21
کلاس های (Class) عنصرها، در HTML
کلاس های (Class) عنصرها، در HTML
1
id عنصرها، در HTML
id عنصرها، در HTML
0
چیدمان عنصرها (Element) در کنار هم، در HTML
چیدمان عنصرها (Element) در کنار هم، در HTML
2
تعیین مشخصات کلی صفحه (Page)، در HTML
تعیین مشخصات کلی صفحه (Page)، در HTML
7
ساختار کلی و بخش بندی صفحه (Page)، در HTML
ساختار کلی و بخش بندی صفحه (Page)، در HTML
2
نمایش یا عدم نمایش عنصرها (Element)، در HTML
نمایش یا عدم نمایش عنصرها (Element)، در HTML
1
عناصر گرافیکی، در HTML
عناصر گرافیکی، در HTML
1
رنگ ها (Color) و تعیین رنگ، در HTML
رنگ ها (Color) و تعیین رنگ، در HTML
1
دکمه ها (Button)، در HTML
دکمه ها (Button)، در HTML
2
پخش صدا (Audio)، در HTML
پخش صدا (Audio)، در HTML
1
کار با کیبورد (Keyboard)، در HTML
کار با کیبورد (Keyboard)، در HTML
2
اطلاعات و پردازش اطلاعات، در HTML
اطلاعات و پردازش اطلاعات، در HTML
1
مباحث عمومی، در HTML
مباحث عمومی، در HTML
6
ویدئوهای آموزشی JavaScript (ویدئوهای رایگان از سایت های انگلیسی زبان)
بستن دسته بندی
۱۹۰
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مجموعه ویدئوهای آموزشی JavaScript - مجموعه JavaScript Tutorials - از thenewboston.com
مجموعه ویدئوهای آموزشی JavaScript - مجموعه JavaScript Tutorials - از thenewboston.com
40
مجموعه ویدئوهای آموزشی AJAX - مجموعه AJAX Tutorials - از thenewboston.com
مجموعه ویدئوهای آموزشی AJAX - مجموعه AJAX Tutorials - از thenewboston.com
23
مجموعه ویدئوهای آموزشی JavaScript - مجموعه JavaScript Tutorial
مجموعه ویدئوهای آموزشی JavaScript - مجموعه JavaScript Tutorial
75
مجموعه ویدئوهای آموزشی JavaScript - مجموعه Learn JavaScript
مجموعه ویدئوهای آموزشی JavaScript - مجموعه Learn JavaScript
19
مجموعه ویدئوهای آموزشی JavaScript برای مبتدیان - مجموعه JavaScript beginner tutorials
مجموعه ویدئوهای آموزشی JavaScript برای مبتدیان - مجموعه JavaScript beginner tutorials
33