توضیح کلمه کلیدی “این” در جاوا اسکریپت

Summarize this content to 400 words in Persian Lang

1. زمینه جهانی

هنگامی که در زمینه جهانی استفاده می شود (خارج از هر تابع)، به شی جهانی اشاره دارد که در مرورگرها پنجره و در Node.js جهانی است.console.log(this); // In a browser, this logs the Window object

2. زمینه تابع

در یک تابع معمولی، مقدار این بستگی به نحوه فراخوانی تابع دارد.

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

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

foo(); // In non-strict mode, logs the global object (Window in browsers)
// In strict mode, logs undefined

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

const obj = {
method: function() {
console.log(this);
}
};

obj.method(); // Logs the obj object

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

function Person(name) {
this.name = name;
}

const person = new Person(‘Alice’);
console.log(person.name); // Logs ‘Alice’

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

3. توابع فلش

توابع پیکان (=>) این اتصال مختص به خود را ندارند. در عوض، این از نظر لغوی از تابع بیرونی که تابع فلش تعریف شده است به ارث می رسد.

const obj = {
regularFunction: function() {
console.log(this); // Logs obj

const arrowFunction = () => {
console.log(this); // Logs obj because it inherits `this` from regularFunction
};

arrowFunction();
}
};

obj.regularFunction();

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

4. مدیریت رویداد

در کنترل‌کننده‌های رویداد DOM، این به عنصری اشاره دارد که رویداد را دریافت کرده است.

document.getElementById(‘myButton’).addEventListener(‘click’, function() {
console.log(this); // Logs the button element
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

5. صریح صحافی

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

آ. تماس بگیرید و درخواست دهیدفراخوانی و اعمال متدها تابعی را با مقدار مشخص و آرگومان فراخوانی می‌کنند. تفاوت آنها در نحوه برخورد آنها با استدلال است.

function greet(greeting) {
console.log(greeting + ‘, ‘ + this.name);
}

const person = { name: ‘Alice’ };

greet.call(person, ‘Hello’); // Logs ‘Hello, Alice’
greet.apply(person, [‘Hi’]); // Logs ‘Hi, Alice’

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ب بستنbind یک تابع جدید ایجاد می کند که هنگام فراخوانی، این کلمه کلیدی آن بر روی مقدار ارائه شده تنظیم می شود.

function greet() {
console.log(this.name);
}

const person = { name: ‘Alice’ };
const boundGreet = greet.bind(person);

boundGreet(); // Logs ‘Alice’

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

خلاصه

زمینه جهانی: این به شی جهانی اشاره دارد.زمینه عملکرد:تابع منظم: این شیء جهانی یا تعریف نشده در حالت سخت است.روش: این شیئی است که متد به آن تعلق دارد.سازنده: این شی جدید در حال ایجاد است.

توابع پیکان: این از نظر لغوی از تابع بیرونی به ارث می رسد.مسئولین رویداد: این عنصر هدف رویداد است.الزام آور صریح: برای تنظیم صریح این مورد از call، application و bind استفاده کنید.

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

foo(); // In non-strict mode, logs the global object (Window in browsers)
       // In strict mode, logs undefined

const obj = {
  method: function() {
    console.log(this);
  }
};

obj.method(); // Logs the obj object

function Person(name) {
  this.name = name;
}

const person = new Person('Alice');
console.log(person.name); // Logs 'Alice'

const obj = {
  regularFunction: function() {
    console.log(this); // Logs obj

    const arrowFunction = () => {
      console.log(this); // Logs obj because it inherits `this` from regularFunction
    };

    arrowFunction();
  }
};

obj.regularFunction();

document.getElementById('myButton').addEventListener('click', function() {
  console.log(this); // Logs the button element
});

function greet(greeting) {
  console.log(greeting + ', ' + this.name);
}

const person = { name: 'Alice' };

greet.call(person, 'Hello'); // Logs 'Hello, Alice'
greet.apply(person, ['Hi']); // Logs 'Hi, Alice'

function greet() {
  console.log(this.name);
}

const person = { name: 'Alice' };
const boundGreet = greet.bind(person);

boundGreet(); // Logs 'Alice'