کلیدواژه ی this در جاوا اسکریپت

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

کلیدواژه ی this چیست؟

ابتدا به شیء person که قبلا تعریف شده نگاهی بیندازیم:

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript <b>this</b> Keyword</h2>

<p>In this example, <b>this</b> represents the <b>person</b> object.</p>
<p>Because the person object "owns" the fullName method.</p>

<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

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

در اینجا خروجی برای ما اهمیت چندانی ندارد بلکه خود کد و کلیدواژه ی this در مرکز توجه ما است.

به زبان ساده و در حالت کلی، کلیدواژه ی this به شیء ای اشاره می کند که به آن تعلق دارد (در آن قرار دارد).

البته مقادیر this بر اساس جایی که استفاده شده است متفاوت است:

اگر this در یک متد استفاده شود، به شیء ای اشاره می کند که صاحب آن متد است (owner object).
اگر this به تنهایی استفاده شود، به شیء سراسری جاوا اسکریپت (global object) اشاره می کند.
اگر this در یک تابع استفاده شود، باز هم به شیء سراسری جاوا اسکریپت (global object) اشاره می کند.
اگر در حالت strict mode باشیم و از this در یک تابع استفاده کنیم، با مقدار undefined مواجه خواهیم شد.
اگر this در یک event استفاده شود، به عنصری اشاره می کند که آن event را دریافت کرده است.
متدهایی مانند ()call و ()apply می توانند this را به هر شیء ای برگردانند.

کلیدواژه ی this در متدها

همانطور که در بالاتر گفتیم، کلیدواژه ی this در یک متد، به صاحب آن متد بر میگردد. در ابتدای مقاله مثالی از شیء ای به نام person به شما دادیم. کلمه ی this در آن مثال به شیء person برمیگردد. چرا؟ به دلیل اینکه شیء person صاحبِ متدِ fullName است. دوباره به این قسمت از کد نگاهی بیندازید:

<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

متد ()fullName داخل شیء person (شیء ای که صاحب متد fullName است) تعریف شده است بنابراین کلیدواژه ی this به این شیء بر میگردد.

کلیدواژه ی this به صورت تنها

ما گفتیم که this به شیء صاحب بر میگردد اما زمانی که به تنهایی استفاده شود چطور؟ تمام متدها در شیء سراسری جاوا اسکریپت قرار دارند بنابراین در چنین حالتی this نیز به شیء سراسری (Global object) اشاره می کند.

ممکن است برایتان سوال پیش آمده باشد که شیء سراسری یا Global object چیست یا دقیقا به چه چیزی بر میگردد. اگر بخواهم به زبان ساده بگویم، می گویم در اکثر اوقات جاوا اسکریپت در پنجره ی مرورگر کاربران اجرا می شود و به همین خاطر در یک مرورگر، Global object همان [object Window] است. به مثال زیر دقت کنید:

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript <b>this</b> Keyword</h2>

<p>In this example, <b>this</b> refers to the window Object:</p>

<p id="demo"></p>

<script>
var x = this;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

خروجی این کد عبارت [object Window] خواهد بود.

نکته: اگر در strict mode باشید، this به صورت تنها، باز هم به [object Window] اشاره می کند بنابراین می توان کد بالا را اینطور نیز نوشت:

"use strict";
var x = this;

کلیدواژه ی this در توابع

همانطور که قبلا گفتیم اگر در حالت عادی در جاوا اسکریت از کلیدواژه ی this در توابع استفاده کنیم، به صاحب آن تابع اشاره می کنیم که در واقع همان شیء سراسری، یعنی [object Window]، است. مثال:

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript <b>this</b> Keyword</h2>

<p>In this example, <b>this</b> represents the object that "owns" myFunction:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
  return this;
}
</script>

</body>
</html>

خروجی این کد عبارت "[object Window]" خواهد بود.

نکته: اگر در حالت strict mode باشید، مقدار this در توابع undefined خواهد بود. اگر مثال بالا را اینطور بنویسیم:

"use strict";
function myFunction() {
  return this;
}

خروجی عبارت undefined خواهد بود.

کلیدواژه ی this در Event Handler ها

کلیدواژه ی this در event handler های HTML به همان عنصری اشاره دارد که event (رویداد) را دریافت کرده است. در رابطه با رویداد ها بعدا صحبت خواهیم کرد اما فعلا مثالی از آن را ببینید:

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript <b>this</b> Keyword</h2>

<button onclick="this.style.display='none'">Click to Remove Me!</button>

</body>
</html>

مشاهده ی خروجی این کد تنها در ادیتور آنلاین جاوا اسکریپت امکان پذیر است.

زمانی که به ادیتور آنلاین جاوا اسکریپت در لینک بالا رفتید، روی دکمه ی مورد نظر کلیک کنید و می بینید که دکمه حذف می شود. در این مثال توجه خاصی روی this داشته باشید؛ عنصر <button> دریافت کننده ی رویداد (event) بود و میبینید که دستور جاوا اسکریپت باعث حذف همان شد.

کلیدواژه ی this در اشیاء

در مثال های زیر کلیدواژه ی this به شیء person اشاره می کند چرا که این شیء صاحب توابع مربوطه است:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName  : "John",
  lastName   : "Doe",
  id     : 5566,
  myFunction : function() {
    return this;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.myFunction();
</script>

</body>
</html>

خروجی این کد [object Object] است.

مثال دوم:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

خروجی این کد عبارت "John Doe" خواهد بود.

به عبارت دیگر this.firstName یعنی خصوصیتی به نام firstName که در this (شیء person) قرار دارد.

کلیدواژه ی this با توابع ()call و ()apply

در مورد توابع ()apply و ()call در قسمت های بعدی به طور کامل آشنا خواهیم شد اما به صورت خلاصه می گویم: کار این توابع این است که یک شیء را می گیرند و به عنوان یک آرگومان به شیء دیگری می دهند. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"John",
  lastName: "Doe",
}
var x = person1.fullName.call(person2); 
document.getElementById("demo").innerHTML = x; 
</script>

</body>
</html>

خروجی این کد عبارت "John Doe" خواهد بود.

با اینکه در این مثال کلیدواژه ی this در person1 قرار دارد اما باز هم به person2 اشاره می کند چرا که person2 به عنوان آرگومان به آن داده شده است.

امیدوارم از این قسمت لذت برده باشید.

دیدگاه‌های شما (2 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

sahand

31 مرداد 1400

عاااااااالی بود عالی هیچ جای چه در منابع خارجی چه داخلی همچین تفکیک شده ایمارو ندیده بودم

شهنام

21 آبان 1399

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