این چیست؟ – جامعه dev

JavaScript محبوب ترین زبان برنامه نویسی در جهان است. تقریباً هر توسعه دهنده از JavaScript برای اهداف مختلف از برنامه وب ، برنامه تلفن همراه ، اسکریپت به برنامه دسک تاپ و غیره استفاده کرده است. JavaScript بسیار ساده است اما می تواند تقریباً همه چیز را انجام دهد.

یکی از گیج کننده ترین موضوع تا کنون در JavaScript است اینبشر این صدای کلمه کلیدی بسیار ساده به نظر می رسد اما بسیاری از توسعه دهندگان را هنگام استفاده از آن اشتباه گرفته ام.

مقدمه

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

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

موارد

هنگامی که این مورد از IE مستقل استفاده می شود ، به طور مستقیم روی کد نه در هر محدوده ای ، معمولاً به آن می دهد جهانی شی (در حالت غیر سخت) در حالی که آن است تعریف نشده در حالت سخت

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

class ThisCalss{
   name = "ThisClass"
    constructor() {
      console.log(this.name) // "ThisClass" upon instace creation
   }

   printName() {
       console.log(this.name) // "ThisClass upon method invocation
   }
}

توابع فلش ' این مقدار به محصور بستگی دارد زمینه واژگانی این است.

const printName = () => {
     console.log(this.name);
};

نتیجه: از آنجا که نام چاپ مستقیم تحت محدوده واژگانی جهانی است که کنسول چاپ می کند تعریف نشدهبشر

class ArrowExample {
  name = "ArrowExample";

  printName() {
    setTimeout(() => {
      console.log(this.name);  
    }, 100);
  }
 }

 const arrow = new ArrowExample();
 arrow.printName();

نتیجه: در اینجا عملکرد فلش دامنه واژگانی است نمونه فلش کلاس بنابراین خروجی خواهد بود Arrowexample (مقدار نام)بشر

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

 function showThis() {
   console.log(this);
 }

 // Called directly
 showThis(); // window (in non-strict mode) or undefined (in strict mode)

 // As an object method
 const obj = {
    name: 'Object',
    show: showThis
 };
 obj.show(); // {name: 'Object', show: ƒ}

 // Using new keyword
 new showThis(); // showThis {}

• اعتراض
  داخل روش شی این ارزش خود شی است.

 const laptop = {
     brand: 'Apple',
     getBrand: function() {
         return this.brand;
     }   
 }
console.log(laptop.getBrand()) // 'Apple'

عبور این زمینه

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

در اتصال ، تماس بگیرید به طور مستقیم روش ها/توابع را با این مقدار متن فراخوانی می کند. تنها تفاوت بین آنها پارامترهای دوم است. درخواست کردن در حالی که ارزش جدا شده کاما را می پذیرد فراخوانی آرایه را در پارامتر دوم می پذیرد.

 function getThis() {
   return this;
 }   

 console.log(getThis.apply('this apply')) // 'this apply'

 console.log(getThis.call('this apply 2'))  // 'this apply 2'

در حالی که اتصال فقط مرجع جدیدی از عملکرد/روش ایجاد نمی شود. این اتصال اگر ما باید عملکرد را به عنوان پارامتر به هر عملکرد/روش دیگر منتقل کنیم ، بسیار مفید است.

 function getThis() {
     return this;
 }   

 const newRef = getThis.bind('this bind');
 console.log(getThis()); // undefined
 console.log(newRef()); // this bind

پایان

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

1. مقدار این امر با نحوه استفاده یک عملکرد (اتصال زمان اجرا) تعیین می شود
2. روشهای کلاس و روشهای شیء به طور طبیعی این را به نمونه/شیء خود متصل می کنند
3. توابع فلش این را از دامنه محصور خود به ارث می برند
4. توابع متعارف می توانند این مقادیر مختلف را بر اساس زمینه فراخوانی خود داشته باشند
5. اتصال ، تماس و استفاده از روشهای کنترل صریح این الزام آور

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