در درس امروز از آمورش های جاوا اسکریپت میخواهیم درباره کلمه کلیدی this در جاوا اسکریپت صحبت کنیم. به مثال زیر توجه کنید:
مثال
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; |
کلمه this چیست؟
this یک کلمه کلیدی و رزرو شده در جاوا اسکریپت است که به شیء ای که متعلق به آن است اشاره دارد.
کلمه this بسته به مکانی که استفاده می شود، مقادیر مختلفی دارد:
- در یک متد،
thisبه شیء مالک متد اشاره می کند . - کلمه
thisبه تنهایی ، به شیء سراسری اشاره دارد . - در یک تابع،
thisبه شیء سراسری اشاره دارد . - در یک تابع ، در حالت سختگیرانه یا strict mode،
thisتعریف نشده یاundefinedاست. - در یک رویداد یا event ،
thisبه عنصری که رویداد را دریافت کرده است ، اشاره دارد . - متد هایی مانند
call()، وapply()می توانندthisرا به هر شیئی منسوب کنند .
کلمه کلیدی this در یک متد
در هر متد از شیء ، کلمه this به ” صاحب ” آن متد اشاره دارد.
در مثال ابتدای این درس ، کلمه this به شیء person اشاره دارد .
در مثال اول ، شیء person ، صاحب متد fullName است.
1 2 3 | fullName : function() { return this.firstName + " " + this.lastName; } |
کلمه this به تنهایی
هنگامی که کلمه this به تنهایی استفاده شود ، مالک آن ، یک شیء سراسری است ، بنابراین this به یک شیء سراسری اشاره می کند.
در یک پنجره مرورگر ، کلمه this به [object Window] اشاره دارد :
در حالت سختگیرانه یا strict mode ، هنگامی که this به تنهایی استفاده می شود ، باز هم به شیء سراسری [object Window] اشاره می کند:
this در یک تابع (حالت پیش فرض)
در یک تابع جاوا اسکریپت ، صاحب تابع بطور پیش فرض صاحب this نیز هست، یعنی this به صاحب تابع اشاره می کند.
بنابراین ، در یک عملکرد ، this به شیء سراسری اشاره دارد [object Window].
this در یک تابع (strict mode)
حالت سختگیرانه جاوا اسکریپت اجازه اشاره پیش فرض را نمی دهد.
بنابراین در حالت سختگیرانه، هنگامی که this در یک تابع استفاده می شود ،undefined است.
this در Event Handler ها
در Event Handler ها یا به فارسی دستیاران رویداد، this به عنصر HTML که این رویداد را دریافت کرده است ، اشاره دارد:
this در متد شیء
در این مثال، this به شیء person اشاره دارد (شیء person «مالک» تابع است):
مثال
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var person = { firstName : "John", lastName : "Doe", id : 5566, myFunction : function() { return this; } }; |
مثال
1 2 3 4 5 6 7 8 9 10 11 12 13 | var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; |
به عبارت دیگر: this.firstName به معنای ویژگی firstName در شیء (person) است.
اتصال تابع صریح
call() و apply() توابع از پیش تعریف شده ی جاوا اسکریپت هستند.
از هردوی آنها می توان برای فراخوانی یک شیء با یک شیء دیگر به عنوان آرگومان استفاده کرد.
در این آموزش می توانید درباره call() و apply() بعداً بیشتر بخوانید .
در مثال زیر ، هنگام فراخوانی person1.fullName با person2 به عنوان آرگومان ، this به person2 اشاره می کند ، حتی اگر این متد مربوط به person1 باشد:
مثال
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | var person1 = { fullName: function() { return this.firstName + " " + this.lastName; } } var person2 = { firstName:"John", lastName: "Doe", } person1.fullName.call(person2); // Will return "John Doe" |
منبع : W3Schools.com
درس بعدی : توابع Arrow در جاوا اسکریپتدرس قبلی : حالت سختگیرانه جاوا اسکریپت
