JavaScript:کلمه کلیدی This در جاوااسکریپت

از ویکی کد
پرش به ناوبری پرش به جستجو
دورهٔ آموزشی جاوااسکریپت
Javascript.jpg
Tutorial
۱آموزش جاوااسکریپت
۲مقدمه‌ای بر جاوااسکریپت
۳JavaScript:قوانین و اصول اولیه زبان جاوااسکریپت
۴JavaScript:خروجی جاوااسکریپت
۵JavaScript:عبارت‌ها در جاوااسکریپت
۶JavaScript:شیوهٔ نوشتن (Syntax) عبارات یا دستورات در جاوااسکریپت
۷JavaScript:نظرات یا کامنت‌ها (Comments) در جاوااسکریپت
۸JavaScript:متغیرها در جاوااسکریپت
۹JavaScript:عملگرهای جاوااسکریپت
۱۰JavaScript:عملگرهای ریاضی در جاوااسکریپت
۱۱JavaScript:عملگرهای مقداردهی در جاوااسکریپت
۱۲JavaScript:انواع داده‌ها در جاوااسکریپت
۱۳JavaScript:توابع در جاوااسکریپت
۱۴JavaScript:اشیاء (object) در جاوااسکریپت
۱۵JavaScript:رویدادها در جاوااسکریپت
۱۶JavaScript:رشته‌های متنی (string) در جاوااسکریپت
۱۷JavaScript:متدهای نوع داده متنی یا رشته‌ای در جاوااسکریپت
۱۸JavaScript:اعداد در جاوااسکریپت
۱۹JavaScript:متدهای داده‌های عددی در جاوااسکریپت
۲۰JavaScript:آرایه‌ها در جاوااسکریپت
۲۱JavaScript:متدهای آرایه در جاوااسکریپت
۲۲JavaScript:مرتب‌سازی آرایه‌ها در جاوااسکریپت
۲۳JavaScript:متدهای پیمایش آرایه در جاوااسکریپت
۲۴JavaScript:اشیاء تاریخ و زمان در جاوااسکریپت
۲۵JavaScript:فرمت‌های تاریخ و زمان در جاوااسکریپت
۲۶JavaScript:متدهای دریافت تاریخ و زمان در جاوااسکریپت
۲۷JavaScript:متدهای تنظیم زمان و تاریخ در جاوااسکریپت
۲۸JavaScript:شی ریاضی (Math) در جاوااسکریپت
۲۹JavaScript:ایجاد عدد تصادفی در جاوااسکریپت
۳۰JavaScript:مقادیر بولین (Booleans) در جاوااسکریپت
۳۱JavaScript:عملگرهای منطقی و مقایسه‌ای در جاوااسکریپت
۳۲JavaScript:ساختار if else و else if در جاوااسکریپت
۳۳JavaScript:تکه کد Switch در جاوا اسکریپت
۳۴JavaScript:حلقه For در جاوااسکریپت
۳۵JavaScript:حلقه While در جاوااسکریپت
۳۶JavaScript:کلمات کلیدی Break و Continue در جاوااسکریپت
۳۷JavaScript:تبدیل نوع داده‌ها در جاوااسکریپت
۳۸JavaScript:عملیات‌های بیتی در جاوااسکریپت
۳۹JavaScript:عبارات با قاعده در جاوااسکریپت
۴۰JavaScript:خطاها در جاوااسکریپت - رخ دادن خطا و رفع آن
۴۱JavaScript:Scope در جاوااسکریپت
۴۲JavaScript:Hoisting یا جا به جایی کدها در جاوااسکریپت
۴۳JavaScript:استفاده از مد یا حالت سخت‌گیرانه (use strict) در جاوااسکریپت
۴۴JavaScript:کلمه کلیدی This در جاوااسکریپت
۴۵JavaScript:کلمه کلیدی Let در جاوااسکریپت
۴۶JavaScript:ثابت‌ها در جاوااسکریپت
۴۷JavaScript:تعریف توابع به صورت پیکان
۴۸JavaScript:کلاس‌ها در جاوااسکریپت
۴۹JavaScript:اشکال‌زدایی در جاوااسکریپت
۵۰JavaScript:راهنمای استایل و استانداردهای کدنویسی در جاوااسکریپت
۵۱JavaScript:بهترین تمرینات جاوااسکریپت
۵۲JavaScript:اشتباهات رایج در برنامه‌نویسی جاوااسکریپت
۵۳JavaScript:کارایی در جاوااسکریپت
۵۴JavaScript:کلمات رزرو شده در جاوااسکریپت
۵۵JavaScript:ورژن‌های جاوااسکریپت
۵۶JavaScript:ECMAScript 5 - JavaScript 5
۵۷JavaScript:ECMAScript 6 - ECMAScript 2015
۵۸JavaScript:جیسون (JSON) در جاوااسکریپت
---

مثال

var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

کلمه this چیست؟

کلمه کلیدیthisدر جاوااسکریپت به شیء ای که در آن قرار داد، اشاره می‌کند. [۱]


کلمه کلیدی this در متد

در یک متد در شیء، کلمه کلیدیthisبه شیء “صاحب” متد اشاره دارد.

درمثالی که در ابتدای این صفحه وجود دارد، کلمه کلیدیthisبه شیء person اشاره دارد.

شیء person صاحب متد fullName است.

fullName : function() {
  return this.firstName + " " + this.lastName;
}

کلمه this به تنهایی

زمانی که از کلمهthisبه تنهایی استفاده می‌کنید، owner (به فارسی: صاحب) شیء کلی است، بنابراین کلمهthisبه شیء کلی (به انگلیسی: global) اشاره دارد.

در پنجره مرورگر شیء کلی یا global برابر با[object Window]:

مثال

var x = this;

در حالت سخت‌گیرانه نیز، زمانی که از کلمهthisبه تنهایی استفاده می‌کنید،thisبه شیء کلی یا Global یعنی[object Window]اشاره دارد.

مثال

"use strict";
var x = this;

کلمه this در یک تابع (به صورت پیش‌فرض)

در یک تابع جاوااسکریپت، کلمهthisبه صاحب تابع اشاره دارد.

بنابراین، در یک تابع، کلمه کلیدیthisبه شیء کلی یا global یعنی[object Window]اشاره دارد.

مثال

function myFunction() {
  return this;
}

کلمه this در یک تابع (حالت سخت‌گیرانه یا Strict)

در حالت سخت‌گیرانه کلمهthisجاوااسکریپت، همانند وضعیت پیشفرض آن عمل نمی‌کند.

بنابراین زمانی که از این کلمه در حالت سخت‌گیرانه استفاده کنید، کلمه کلیدیthisبهundefinedاشاره دارد.

مثال

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

کلمه کلیدی this در مدیریت کننده رویدادها یا Event Handlers

در ویژگی کنترل‌کننده رویداد در HTML ، کلمه کلیدیthisبه عنصری از HTML اشاره دارد که رویداد را دریافت می‌کند (روی آن کنترل رویدادی اتفاق می‌افتد):

مثال

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

اشاره به شیء متد

در این مثال‌ها، کلمه کلیدیthisبه شیء person اشاره دارد. (شیء person، شیء “صاحب” تابع است):

مثال

var person = {
  firstName  : "John",
  lastName   : "Doe",
  id         : 5566,
  myFunction : function() {
    return this;
  }
};

مثال

var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

به تعبیری دیگر: this.firstname به معنای ویژگی این (شیء person) است.

اشاره به تابع به صورت Explicit

متدهایcall()وApply()متدهای از پیش تعریف شده جاوااسکریپت هستند.

از هر دوی این متدها می‌توان برای فراخوانی یک متد از یک شیء، با شیء دیگر به عنوان آرگومان استفاده کرد.


در مثال زیر، هنگام فراخوانی person1.fullName با شیء person2 به عنوان آرگومان، کلمه کلیدیthisبه شیء person2 اشاره دارد درحالی که متد فراخوانی شده متعلق به شیء person1 است:

مثال

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"John",
  lastName: "Doe",
}
person1.fullName.call(person2);  // Will return "John Doe"

منابع آموزشی