سفر من از طریق “این” در جاوا اسکریپت: از سردرگمی تا وضوح

هنگامی که من برای اولین بار یادگیری JavaScript را شروع کردم ، یک کلمه در هر آموزش ، هر پیام خطا و هر رفتار عجیب و غریب که نتوانستم توضیح دهم ، نشان می دهد: thisبشر

در ابتدا ، من فکر کردم که آن را درک کردم – “این به معنای شی است ، درست است؟” اما پس از آن من تابعی نوشتم که متفاوت از آنچه انتظار داشتم رفتار می کرد. سپس من از آن در داخل پاسخ به تماس استفاده کردم … و آن را شکست. هرچه بیشتر استفاده کردم this، هرچه کمتر آن را درک کردم.

بنابراین من تصمیم گرفتم که جلوی حدس زدن را بگیرم – و در نهایت درک کردم که چگونه this واقعاً کار می کند.

این وبلاگ سفری است که آرزو می کنم هنگام شروع کار داشته باشم. اگر تازه وارد JavaScript هستید یا تا به حال هجوم آورده اید ، “چرا چنین است this تعریف نشده؟ “، پس این یکی برای شما است.

قسمت 1: چیست this، واقعاً؟

بیایید از بالا شروع کنیم.

در جاوا اسکریپت ، this اشاره به زمینه اعدام از یک تابع – به عبارت دیگر ، چه کسی عملکرد را فراخوانی می کندبشر برخلاف سایر زبانها this JavaScript’s به کلاس یا شیء ثابت شده است this است ، پویا – بسته به نوع می تواند تغییر کند چگونه یک تابع نامیده می شود.

به این فکر کنید مانند این: هر بار که یک تابع اجرا می شود ، JavaScript یک محیط را تنظیم می کند – “زمینه اعدام” – و بخشی از آن تنظیم تصمیم می گیرد که چه چیزی this باید به

این ایده اصلی است:

this توسط سایت تماس (جایی که عملکرد نامیده می شود) تعیین می شود ، نه جایی که تعریف شده است.

قسمت 2: بلوک های ساختمان – زمینه اعدام

هر بار که JavaScript کد را اجرا می کند ، ایجاد می کند زمینه اعدام – محیطی که کد در آن اجرا می شود. سه نوع اصلی وجود دارد:

• زمینه جهانی – پیش فرض یکی. در مرورگرها ، this اشاره به window شیء.
• زمینه تابع – وقتی یک عملکرد را صدا می کنید. this بستگی به نحوه تماس شما با عملکرد دارد.
• متن ارزیابی – به ندرت مورد استفاده قرار می گیرد ، بنابراین ما از آن پرش خواهیم کرد.

بیایید زمینه جهانی را آزمایش کنیم:

console.log(this); // In browsers, logs: Window

تا اینجای کار خیلی خوبه. اما سرگرمی واقعی وقتی شروع می شود وقتی به توابع نگاه می کنیم …

قسمت 3: چهار راه this تنظیم شده است (قوانین الزام آور)

بیایید از طریق 4 راه اصلی JavaScript تصمیم می گیرد چه چیزی this به معنای در یک تابع است.

1. اتصال پیش فرض

اگر فقط یک عملکرد را بدون هیچ زمینه ای صدا می کنید:

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

sayHello(); // In browsers: logs Window (or undefined in strict mode)

• در حالت غیر سختگیرانهبا this شیء جهانی است (window در مرورگرها).
• در حالت سختبا this است ، undefinedبشر

نوک مبتدی: حالت دقیق ایمن تر است. استفاده کردن "use strict"; در بالای پرونده یا عملکرد خود برای جلوگیری از اشکالات.

2. الزام آور ضمنی

وقتی عملکردی را صدا می کنید به عنوان یک روش یک شیبا this به آن شیء اشاره می کند.

const user = {
  name: "Alice",
  greet() {
    console.log(`Hi, I’m ${this.name}`);
  }
};

user.greet(); // Hi, I’m Alice

ساده به نظر می رسد ، درست است؟

اما این منحنی را تماشا کنید:

const greet = user.greet;
greet(); // Oops! this is now window or undefined

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

3. الزام آور صریح

JavaScript به شما ابزاری می دهد کنترل کردن this دستی با callبا applyوت bindبشر

function introduce(role) {
  console.log(`${this.name} is a ${role}`);
}

const person = { name: "Bob" };

introduce.call(person, "Developer"); // Bob is a Developer
introduce.apply(person, ["Designer"]); // Bob is a Designer

const boundFn = introduce.bind(person, "Engineer");
boundFn(); // Bob is an Engineer

🛠 در صورت نیاز به کنترل از اینها استفاده کنید this دقیقاً – مانند دستگیره های رویداد یا توابع استفاده مجدد.

4 new الزام آور

فراخوانی یک تابع با new ایجاد می کند شیء کاملاً جدید و اتصال می دهد this به آن

function Car(model) {
  this.model = model;
}

const myCar = new Car("Toyota");
console.log(myCar.model); // Toyota

در اینجا this اشاره به شی جدید ایجاد شده است. یعنی سحر و جادو سازندهبشر

⚡ اوج: توابع فلش را وارد کنید – و واژگانی this

توابع فلش متفاوت رفتار کنید – آنها خودشان را نگیرید thisبشر در عوض ، آنها آن را از مکانی که در آن هستند “وام می گیرند” تعریف شده (دامنه واژگانی).

const team = {
  name: "Dev Team",
  arrowFunc: () => {
    console.log(this.name);
  },
  regularFunc: function () {
    console.log(this.name);
  }
};

team.regularFunc(); // Dev Team
team.arrowFunc();   // undefined or window.name

توابع فلش به هم متصل نمی شوند this – عالی برای تماس های برگشتی ، وحشتناک برای روش های شی.

Gotchas and Fixes: خطاهایی که من از آن عبور کردم

از دست دادن this در پاسخ به تماس:

const app = {
  name: "MyApp",
  start: function () {
    setTimeout(function () {
      console.log(this.name); // undefined
    }, 1000);
  }
};

با عملکرد فلش رفع کنید:

setTimeout(() => {
  console.log(this.name); // MyApp
}, 1000);

یا ذخیره زمینه:

const self = this;
setTimeout(function () {
  console.log(self.name);
}, 1000);

جنون عملکرد تو در تو:

const group = {
  name: "Study Group",
  show: function () {
    function inner() {
      console.log(this.name); // undefined
    }
    inner();
  }
};

group.show();

با عملکرد فلش رفع کنید:

show: function () {
  const inner = () => {
    console.log(this.name); // Study Group
  };
  inner();
}

“آه!” لحظه: تمرین عالی می شود

در اینجا یک مثال نهایی است که همه آن را ترکیب می کند:

const event = {
  title: "Tech Talk",
  organizers: ["Alice", "Bob"],
  announce: function () {
    console.log(`Event: ${this.title}`);
    this.organizers.forEach(function (organizer) {
      console.log(`${organizer} is organizing ${this.title}`);
    });
  }
};

event.announce();

در forEach عمل از دست دادن this، بنابراین در مورد آن نمی داند titleبشر

با عملکرد فلش رفع کنید:

this.organizers.forEach((organizer) => {
  console.log(`${organizer} is organizing ${this.title}`);
});

رونق در حال حاضر this مانند آنچه انتظار داریم کار می کند – زیرا توابع پیکان حفظ می شود this از announce روش

بسته بندی: چگونه یاد گرفتم که از نگرانی و عشق دست بردارم this

درک this در مورد حفظ قوانین نیست – در مورد آن است تشخیص الگوهای:

• عملکرد کجا خوانده شد؟ این چیزی است که تعریف می کند thisبشر
• توابع فلش برای نگهداری عالی هستند this سازگار
• استفاده کردن bindبا call، یا apply هنگامی که شما نیاز به کنترل دارید.
• با مثالهای واقعی تمرین کنید – کد و ورود به سیستم را امتحان کنید thisبشر

this ممکن است در ابتدا گیج کننده به نظر برسد ، اما وقتی دیدید که چگونه از طریق کد شما جریان می یابد ، تبدیل به یک ابزار قدرتمند – یک رمز و راز نیست.

نوبت شما

این را امتحان کنید: عملکردی را که اخیراً نوشتید انجام دهید و از خود بپرسید – “چیست this الان؟ ” با آن بازی کنید.

هنوز سؤالی دارید؟ آنها را در زیر رها کنید. بیایید جاوا اسکریپت را با هم رمزگشایی کنیم.

می خواهید عمیق تر بروید؟