همه مرورگرهای وب پیشرو از جاوا اسکریپت، یک زبان برنامه نویسی محبوب و همه کاره پشتیبانی می کنند. this کلمه کلیدی یک مفهوم بسیار مهم برای دانستن در جاوا اسکریپت است.

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

در این مقاله، شما یاد خواهید گرفت که چگونه به طور ضمنی (بر اساس زمینه) و به طور صریح (با استفاده از متدهای call() ، apply() و bind() ) مقدار this کلمه کلیدی را تعیین کنید.

در اینجا موضوعاتی است که به آنها خواهیم پرداخت:

قوانینی که رفتار this کلمه کلیدی را هدایت می کند چیست ؟

متد call() در جاوا اسکریپت چیست ؟

متد apply() در جاوا اسکریپت چیست ؟

متد bind() در جاوا اسکریپت چیست ؟

چرا متدهای call() ، apply() و bind() به جاوا اسکریپت معرفی شدند؟

تفاوت بین متدهای call() ، apply() و bind() چیست؟

چرا از متدهای call() ، apply() و bind() در جاوا اسکریپت استفاده کنیم؟

قوانینی که رفتار this کلمه کلیدی را هدایت می کند چیست؟

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

دامنه جهانی

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

در حالی که شی جهانی در محیط Node.js global است، یک window در زمینه یک مرورگر وب است:

 console.log(this); 

نتیجه کد بالا نشان می‌دهد که this window را باز می‌گرداند که شی جهانی برای مرورگر وب است.

زمینه تابع

روش فراخوانی مقدار this کلمه کلیدی را در یک تابع معمولی استاندارد تعیین می کند:

 function saySomething() { console.log(this) } saySomething() // {window: Window, self: Window, document: document, name: '', location: Location, …} 

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

روش شی

متدها ویژگی های دارنده تابع یک شی هستند. در جاوا اسکریپت، آنها به یک شی اجازه می دهند تا ویژگی های خود را با استفاده از this کلمه کلیدی دستکاری کند:

 const club = { name: "Arsenal", yearFounded: "1989", details() { return `Hey, ${this.name} ${this.yearFounded}`; }, }; console.log(club.details()); // Arsenal , 1989

در زمینه کد بالا، this به club اشاره دارد. همانطور که از خروجی می بینید، می گوید Arsenal 1989 .

اما اگر یک متغیر جدید برای متد جزئیات ایجاد کنیم، مانند شکل زیر، نتیجه متفاوتی خواهیم داشت:

 const club = { name: "Arsenal", yearFounded: "1989", details() { return `Hey, ${this.name} ${this.yearFounded}`; }, }; const full = club.details; console.log(full()); // Hey, undefined

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

در جاوا اسکریپت، یک متد وقتی به تابعی که قبل از نقطه قرار می‌گیرد، مقدار this دریافت می‌کند.

عملکرد سازنده

این خبر نیست که سازنده تابع پیش‌فرض اولیه برای اشیاء تعریف‌شده توسط کاربر قبل از معرفی به‌روزرسانی ECMAScript 2015 بود.

کلمه کلیدی new یک نمونه از یک تابع سازنده ایجاد می کند:

 function Country(name) { this.name = name; this.age = 1960; this.info = function () { console.log(`${this.name} was founded ${this.age} years ago`); }; } const country = new Country("Nigeria"); console.log(country.name); console.log(country.info()); 

this به شیء جدید ایجاد شده، در این مورد، نمونه کشور اشاره دارد.

گردانندگان رویداد

در کنترل کننده رویداد addEventListener ، this به عنصر قبل از نقطه اشاره دارد. این عنصری است که شنونده رویداد برای راه اندازی رویداد اضافه شده است:

 const button = document.querySelector("button"); button.addEventListener("click", function () { console.log(this); }); // OUTPUT <button>click</button>

پس از اجرای کد بالا، دکمه ای با مقدار innerText click به کنسول وارد می شود.

در تمام قوانین فوق که رفتار کلمه کلیدی محبوب this را هدایت می کند، یک چیز واضح است: زمینه ارزش this کلمه کلیدی را تعیین می کند.

جدای از تعیین ضمنی مقدار this ، از متدهای تابعی مانند call() ، apply() و bind() می توان برای تعیین صریح آنچه باید به this اشاره کرد استفاده کرد.

متد call() در جاوا اسکریپت چیست؟

متد call() یکی از محبوب‌ترین روش‌ها برای تعریف صریح آنچه به this اشاره دارد است. در جاوا اسکریپت، متد call() بیشتر برای قرض گرفتن یک متد از یک شی ایزوله و استفاده از آن روی دیگری با یک زمینه خاص استفاده می شود.

متد call() نیاز دارد که آرگومان هایش یکی یکی ارسال شوند:

 const game = { title: "PrisonBreak", year: 1979, }; function detail() { console.log(`${this.title}, was released in ${this.year}`); } detail(); // RESULT undefined was released in undefined

مورد بالا نتیجه را چاپ می کند زیرا هیچ ارتباطی بین game و روش detail وجود ندارد. از این رو، فراخوانی متد detail به خودی خود فقط undefined چاپ می شود.

 const game = { fullDetail: function () { return this.title + " " + this.year; }, }; const newGame = { title: "Merlin", year: 1994, }; const fullDetail = game.fullDetail.call(newGame); console.log(fullDetail); // Output: Merlin 1994

در کد بالا، اشیاء game و newGame وجود دارد. game دارای روش fullDetail است، در حالی که newGame دارای عنوان و سال دارای ویژگی است.

همانطور که از تعریف بالا می دانیم، متد call() از زمینه newGame برای فراخوانی متد fullDetail شی game استفاده می کند.

این بدان معنی است که ما به ویژگی های newGame دسترسی داریم زیرا this داخل fullDetail به شی newGame اشاره دارد.

اکنون به کمک متد call() بین game و newGame ارتباط برقرار کرده ایم.

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

 const game = { fullDetail: function (category) { return `${this.title} was released ${this.year}, and the film is a ${category} film`; return this.title + " " + this.year + " " + "category"; }, }; const newGame = { title: "Merlin", year: 1994, }; const fullDetail = game.fullDetail.call(newGame, "seasonal"); console.log(fullDetail); // Merlin was released 1994, and the film is a seasonal film

کد بالا امکان کنار گذاشتن آرگومان دیگری this کلمه کلیدی را نشان می دهد.

نحوه استفاده از متد call() در یک برنامه دنیای واقعی

کد زیر از کد بالا استخراج شده است:

 const newMovie = { info: { title, [extraName]: extraValue, }, id: Math.random(), formatted() { return this.info.title.toUpperCase(); } };

کد بالا یک شی به نام newMovie است. در شی newMovie ، یک شی info با title و extraName ایجاد شد.

title نام فیلم است، در حالی که خط [extraName] از نماد براکت برای دسترسی پویا به ورودی کاربر استفاده می کند و از مقدار متغیر به عنوان نام کلید استفاده می کند. در حالی که extraValue مقدار مرتبط با کلید است.

id یک شناسه منحصر به فرد است که با استفاده از تابع Math.random() یک عدد تصادفی تولید می کند.

متد formatted() فرمت بزرگ عنوان را برمی گرداند. با استفاده از this.info.title ، که در آن شی newMovie مانند this است، و info یک شی در داخل newMovie است که حاوی اطلاعاتی مانند عنوان و بقیه است.

 filteredMovies.forEach((movie) => { const newMovieEl = document.createElement('li'); const {info} = movie; const {formatted} = movie let text = formatted.call(movie) + '-'; for (const key in info) { if (key !== 'title') { text = text + `${key}: ${info[key]}` } } newMovieEl.textContent = text; movieList.append(newMovieEl) }) }

کد بالا کاربرد متد call() را در یک برنامه دنیای واقعی نشان می دهد.

بیایید توضیح دهیم که در کد چه اتفاقی می افتد.

خط const newMovieEl = document.createElement('li'); یک عنصر <li> جدید با استفاده از document.createElement('li') ایجاد می کند، با عنصر جدید ذخیره شده در newMovieEl ثابت.

The line const {info} = movie; از تخصیص تخریب ساختار برای استخراج ویژگی info از شی فیلم استفاده می کند.

خط const {formatted} = movie از تخصیص تخریب ساختاری برای استخراج متد formatted از شی فیلم استفاده می‌کند.

خط let text = formatted.call(movie) + '-'; نحوه استفاده از متد call() در یک برنامه نشان می دهد.

فراخوانی مستقیم تابع formatted ، نتیجه مورد نیاز را به دست نمی‌دهد، زیرا عملکرد this در آن زمینه، شی پنجره است.

با استفاده از متد call روی تابع formatted ، متد call() اجازه می‌دهد که متن this از شی پنجره به شی movie تغییر کند.

همانطور که در بالا گفته شد، در جاوا اسکریپت، متد call() برای قرض گرفتن یک متد از یک شی ایزوله و استفاده از آن روی دیگری با یک زمینه خاص استفاده می شود.

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

خط for (const key in info) {if (key !== 'title') {text = text + ${key}: ${info[key]} } روی هر کلید در شی اطلاعات تکرار می شود و تحلیل می کند که آیا کلید فعلی برابر با title نیست. سپس جفت کلید-مقدار را به رشته متن اضافه می کند.

خط newMovieEl.textContent = text movieList.append(newMovieEl) محتوای متن عنصر مورد فهرست جدید ایجاد شده را به متن تولید شده تنظیم می کند و عنصر مورد فهرست جدید ایجاد شده را با شناسه movieList به عنصر والد اضافه می کند.

متد apply() در جاوا اسکریپت چیست؟

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

برای شروع کار با متد apply() سینتکس آن را تحلیل می کنیم:

 nameOfFunction.apply(thisArg, [argsArray])

nameOfFunction تابعی است که باید فراخوانی شود، thisArg this است که برای تابع ارائه می شود، و آرایه یا شی آرایه مانند argsArray است که باید به تابع ارسال شود.

 const game = { fullDetail: function () { return this.title + " " + this.year; }, }; const newGame = { title: "Merlin", year: 1994, }; const fullDetail = game.fullDetail.apply(newGame); console.log(fullDetail); // Output: Merlin 1994

درست مانند متد call() ، اشیاء game و newGame وجود دارد. این game دارای روش fullDetail است، در حالی که newGame دارای عنوان و سال دارای خواص است.

همانطور که از تعریف بالا می دانیم، متد apply() از متن newGame برای فراخوانی متد fullDetail شی game استفاده می کند.

این بدان معنی است که ما به ویژگی های newGame دسترسی داریم زیرا this داخل fullDetail به شی newGame اشاره دارد.

اکنون به کمک متد apply() بین game و newGame ارتباط برقرار کرده ایم.

متد apply() همچنین می تواند برای ارسال یک آرایه یا مجموعه آرایه مانند به عنوان آرگومان استفاده شود.

 const game = { fullDetail: function (greet) { return `${greet} ${this.title} ${this.year}`; }, }; const newGame = { title: "Merlin", year: 1994, }; const fullDetail = game.fullDetail.apply(newGame, ["Welcome"]); console.log(fullDetail); // Output: Welcome Merlin 1994

کد بالا نشان می دهد که تابع fullDetail در داخل شی game انتظار یک پارامتر greet را دارد. متد apply() برای فراخوانی fullDetail با شی newGame و آرایه ['Welcome'] به عنوان آرگومان ارسال شده به تابع استفاده می شود.

نحوه استفاده از متد application() در یک برنامه دنیای واقعی

کد زیر از کد بالا استخراج شده است:

 const newMovie = { info: { title, [extraName]: extraValue, }, id: Math.random(), formatted() { return this.info.title.toUpperCase(); } };

کد بالا یک شی به نام newMovie است. در شی newMovie ، یک شی info با title ، extraName ایجاد شد.

title نام فیلم است، در حالی که خط [extraName] از نماد براکت برای دسترسی پویا به ورودی کاربر استفاده می کند و از مقدار متغیر به عنوان نام کلید استفاده می کند. در حالی که extraValue مقدار مرتبط با کلید است.

id یک شناسه منحصر به فرد است که با استفاده از تابع Math.random() یک عدد تصادفی تولید می کند.

متد formatted() فرمت بزرگ عنوان را برمی گرداند. با استفاده از this.info.title ، که در آن شی newMovie مانند this است، و info یک شی در داخل newMovie است که حاوی اطلاعاتی مانند عنوان و بقیه است.

 filteredMovies.forEach((movie) => { const newMovieEl = document.createElement('li'); const {info} = movie; const {formatted} = movie let text = formatted.apply(movie) + '-'; for (const key in info) { if (key !== 'title') { text = text + `${key}: ${info[key]}` } } newMovieEl.textContent = text; movieList.append(newMovieEl) }) }

کد بالا کاربردهای apply() apple را در یک برنامه دنیای واقعی نشان می دهد.

حالا بیایید کد را توضیح دهیم.

خط const newMovieEl = document.createElement('li'); یک عنصر <li> جدید با استفاده از document.createElement('li') ایجاد می کند، با عنصر جدید ذخیره شده در newMovieEl ثابت.

The line const {info} = movie; از تخصیص تخریب ساختار برای استخراج ویژگی info از شی فیلم استفاده می کند.

خط const {formatted} = movie از تخصیص تخریب ساختاری برای استخراج متد formatted از شی فیلم استفاده می‌کند.

خط let text = formatted.apply(movie) + '-'; نحوه استفاده از متد apply() در یک برنامه نشان می دهد.

فراخوانی مستقیم تابع formatted ، نتیجه مورد نیاز را به دست نمی‌دهد، زیرا عملکرد this در آن زمینه، شی پنجره است.

با استفاده از متد apply در تابع formatted ، متد apply() اجازه می‌دهد که زمینه this از شی پنجره به شی movie تغییر کند.

همانطور که در بالا گفته شد، در جاوا اسکریپت، متد apply() آرگومان ها را به عنوان یک آرایه (یا شی آرایه مانند) می گیرد و تابع را فورا اجرا می کند.

خط for (const key in info) {if (key !== 'title') {text = text + ${key}: ${info[key]} } روی هر کلید در شی اطلاعات تکرار می شود و تحلیل می کند که آیا کلید فعلی برابر با title نیست.

سپس جفت کلید-مقدار را به رشته متن اضافه می کند.

خط newMovieEl.textContent = text movieList.append(newMovieEl) محتوای متن عنصر مورد فهرست جدید ایجاد شده را به متن تولید شده تنظیم می کند و عنصر مورد فهرست جدید ایجاد شده را با شناسه movieList به عنصر والد اضافه می کند.

متد bind() در جاوا اسکریپت چیست؟

bind() یک تابع جدید ایجاد می کند که this کلمه کلیدی را روی مقدار ارائه شده تنظیم می کند و بلافاصله تابع را فراخوانی نمی کند.

در تمام توابع جاوا اسکریپت موجود است و برای تنظیم دائمی this متن برای یک تابع استفاده می شود.

تفاوت بین متدهای call() ، apply() و bind() در این است که متد bind() یک تابع جدید با کران this ایجاد می کند، در حالی که هر دو call() و apply() یک بار استفاده هستند. روش هایی که عملکرد جدیدی ایجاد نمی کنند.

متد bind() فوراً تابع را فراخوانی نمی کند، اما هم call() و هم apply() فوراً تابع را فراخوانی می کنند.

بیایید سینتکس bind() تحلیل کنیم:

 functionName.bind(thisArg[, arg1[, arg2[, ...]]])

thisArg مقداری را نشان می‌دهد که باید به عنوان this مقدار هر زمان که تابع اجرا می‌شود، ارسال می‌شود و arg1, arg2, ... آرگومان‌هایی هستند که هنگام فراخوانی تابع به آن متصل می‌شوند.

 const player = { name: "Rooney", jerseyNumber: 10, introduction: function () { console.log(this.name + "wears Jersey number " + this.jerseyNumber + "."); }, }; const player2 = { name: "Jimmy ", jerseyNumber: 18, }; let result = player.introduction.bind(player2); result(); // Jimmy wears Jersey number 18.

در کد بالا، وقتی result() را فراخوانی می‌کنید، Jimmy wears Jersey number 18 را چاپ می‌کند. این امکان پذیر است زیرا کلمه کلیدی this در داخل متد مقدمه به شی player2 محدود شده است.

همچنین می توان از متد bind() با بیش از یک آرگومان استفاده کرد.

 const player = { name: "Rooney", jerseyNumber: 10, introduction: function (goals, country) { console.log( `${this.name} wears Jersey number ${this.jerseyNumber}, he plays for ${country}, and he has scored ${goals} goals`, ); }, }; const player2 = { name: "Jimmy ", jerseyNumber: 18, }; let result = player.introduction.bind(player2, 87, "Nigeria"); result(); // Jimmy wears Jersey number 18, he plays for Nigeria, and he has scored 87 goals

در مثال بالا، دو پارامتر ارسال شد: thisArg و arg1 . سپس شی player2 به روش introduction متصل می شود که دارای دو پارامتر است: goals و country .

نحوه استفاده از متد bind() در یک برنامه دنیای واقعی

برای درک صحیح نحوه استفاده از bind() در یک برنامه واقعی، نیاز به نمایش برنامه بدون bind() bind وجود دارد.

ماشین حساب غیر متعارف نام برنامه ای است که ما برای این تمرین خواهیم ساخت.

بیایید کد را تجزیه کنیم.

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

ورودی کاربر را می گیرد، نتیجه نمایش داده شده را به روز می کند و محاسبات را ثبت می کند.

تابع outputResult(answer, text) نتیجه و متن محاسبه را به روز می کند.

تابع getUserInput() ورودی کاربر را از فیلد ورودی بازیابی می کند.

وظیفه writeToLog(operationidentifier, older, olderTwo, newResult) قالب بندی رشته محاسبه برای خروجی است.

تابع createLog(operationidentifier, older, olderTwo, newResult) یک شی log برای محاسبه ایجاد می کند و آن را در یک آرایه ذخیره می کند.

createOutput(conditional) منطق محاسبات هسته را بر اساس عملیات ارائه شده انجام می دهد. عملیاتی مانند add() ، subtract() ، divide() و multiply() محاسبات را برای عملیات مربوطه خود آغاز می کنند.

این کد با تابع bind() است :

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

کد یک ورودی از کاربر می گیرد، محاسبات را بر اساس کلیک دکمه انجام می دهد، UI را با نتایج به روز می کند و گزارشی از محاسبات گذشته را نگه می دارد.

بیایید کدهای جاوا اسکریپت را در بخش های زیر تجزیه کنیم.

تمام عناصر HTML را انتخاب کنید

کد تمام عناصر HTML را با استفاده از شناسه آنها انتخاب می کند.

addButton ، subtractButton ، divideButton و multiplyButton عناصری برای نمایش تاریخچه محاسبات هستند.

result عنصری است برای نمایش نتیجه فعلی و inputNumber یک فیلد ورودی برای ورودی کاربر است.

ایجاد توابع برای خروجی و ورودی کاربر

تابع outputResult (answer, text) پاسخ ارائه شده را در عنصر result و متن را در عنصر calculation نمایش می دهد.

تابع getUserInput() مقدار وارد شده در قسمت inputNumber را دریافت می کند و آن را به یک عدد صحیح تبدیل می کند.

ایجاد متغیرهایی برای محاسبه و ورود به سیستم

defaultResult یک مجموعه ثابت روی 0 است که به عنوان نتیجه اولیه استفاده می شود.

currentResult متغیری برای ذخیره نتیجه جاری محاسبات است.

logEntries آرایه ای است که ورودی های گزارش را برای تاریخچه محاسبات ذخیره می کند.

برای توابع گزارش، تابع writeToLog(prevResult, operand, original) رابط کاربری را با توضیحات محاسبه به روز می کند و تابع outputResult را فراخوانی می کند.

تابع createLog (operationidentifier, older, olderTwo, newResult) یک شی ورودی گزارش ایجاد می‌کند و آن را به آرایه logEntries فشار می‌دهد.

ایجاد تابع محاسبه

calculate (operation) یک رشته عملیات را به عنوان ورودی می گیرد ( ADD ، SUBTRACT ، DIVIDE ، یا MULTIPLY ). محاسبات را بر اساس عملیات زیر انجام می دهد:

برای ADD اضافه می کند، برای SUBTRACT کم می کند، برای DIVIDE تقسیم می کند، برای MULTIPLY ضرب می کند.

توابع writeToLog و createLog برای ثبت محاسبه فراخوانی می شوند.

شنوندگان رویداد را برای دکمه ها ایجاد کنید

addButton.addEventListener('click',calculate.bind(this, 'ADD') شنونده رویداد را به addButton اختصاص می دهد.

شنوندگان رویدادهای مشابه برای عملیات مربوطه به subtractButton ، divideButton و multiplyButton اختصاص داده می شوند.

قطعه کد نشان می دهد که هر زمان که روی دکمه ای کلیک شود، تابع calculate اجرا می شود. تابع با متد bind() مقید می شود و آرگومان هایی مانند ADD ، SUBTRACT ، MULTIPLY و DIVIDE به تابع calculate ارسال می شوند.

چرا متدهای call() ، apply() و bind() به جاوا اسکریپت معرفی شدند؟

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

به طور کلی درک کامل this کلمه کلیدی در جاوا اسکریپت دشوار است. از این رو، معرفی متدهای call() ، apply() و bind() به برنامه نویسان کنترل بیشتری روی این موضوع عجیب و غریب می دهد.

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

با متد call() مربی شما می تواند به طور موقت شما را در موقعیت دیگری در زمین قرار دهد ( this مقدار را برای یک مسابقه خاص تنظیم کنید). این به شما امکان می دهد از مهارت های فوتبالی خود حتی در جناحی که معمولاً بازی نمی کنید استفاده کنید.

با استفاده از متد apply() مثل این است که یک تاکتیک کامل فوتبال (آگومان ها) پر از خطاهای فنی مختلف، تاکتیک های تاخیری و بسیاری موارد دیگر داشته باشید. مربی می تواند کل تاکتیک ها را به سمت شما بیاندازد و شما می توانید از همه آنها (اجرای عملکرد با یک زمینه خاص) برای مسابقه استفاده کنید.

با متد bind() ، مربی خود را تصور کنید که یک نقش understudy خاص ( bound() ) را فقط برای شما ایجاد می کند. این نقش دانش‌آموز همیشه دارای یک بال خاص در زمین ( this پیش تعریف‌شده) آماده است، پس می‌توانید به‌طور یکپارچه وارد عمل شوید و هر زمان که نیاز بود دستورالعمل‌ها (اجرای عملکرد) را ارائه دهید.

تفاوت بین متدهای call() ، apply() و bind() چیست؟

وقتی صحبت از رسیدگی به استدلال ها می شود:

متد call() آرگومان ها را به صورت جداگانه به عنوان فهرست جدا شده با کاما می پذیرد.

با متد apply() آرگومان ها به عنوان یک آرایه مانند یا یک شی آرایه پذیرفته می شوند.

متد bind() می‌تواند در آرگومان‌های اضافی در هنگام فراخوانی تابع جدید ارسال کند.

وقتی نوبت به فراخوانی و اجرا می رسد:

متد call() فوراً تابع را با آرگومان های فردی خاص و مقدار مشخص this فراخوانی می کند و آرگومان را یکی یکی می پذیرد.

متد apply() درست مانند متد call() فوراً تابع را فراخوانی می کند، اما با این تفاوت که آرگومان ها را به عنوان یک آرایه یا آرایه مانند شی می پذیرد.

متد bind() یک تابع جدید با یک آرگومان اختیاری و یک this مشخص ایجاد می کند. فوراً تابع را فراخوانی نمی کند، زیرا تابع را برای اجرای بعدی محدود می کند.

چرا از متدهای call() ، apply() و bind() در جاوا اسکریپت استفاده کنیم؟

متدهای call() ، apply() و bind() به طور گسترده با نحوه کنترل متن یک تابع ( this کلمه کلیدی) و آرگومان ها هنگام فراخوانی آن سروکار دارند.

استفاده از این روش ها در جاوا اسکریپت چندین مزیت دارد:

تغییر مقدار this کلمه کلیدی : کلمه کلیدی this به شیئی اشاره دارد که تابع خاصی را فراخوانی می کند. با کمک این روش ها می توانید به صراحت مقدار this کلمه کلیدی را روی چیز دیگری تنظیم کنید.

مدیریت رویداد : هر دو متد call() و apply() می توانند اطمینان حاصل کنند که handler با زمینه و آرگومان های صحیح اجرا می شود، حتی اگر فضای تعریف آن با فضای فراخوانی متفاوت باشد.

آرگومان های انعطاف پذیر : این روش ها آرگومان ها را به روشی متفاوت می گیرند. متد call() یک آرگومان جداگانه می گیرد، متد apply() یک آرگومان را به عنوان یک آرایه می گیرد و متد bind() اجازه می دهد تا برخی از آرگومان ها را برای استفاده بعدی از قبل تنظیم کنید.

تابع جزئی : متد bind() یک تابع جدید ایجاد می کند که از یک زمینه از پیش تعیین شده و آرگومان های اولیه اختیاری تشکیل شده است. این برای برنامه های جزئی بسیار مفید است، جایی که برخی از آرگومان ها قبل از موعد ثابت می شوند و برخی دیگر در مرحله بعد ارائه می شوند.

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

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

نتیجه

در این آموزش، شما یاد گرفتید که چگونه به طور ضمنی (بر اساس زمینه) و به طور صریح (با استفاده از متدهای call() ، apply() و bind() ) مقدار this کلمه کلیدی را تعیین کنید.

خبرکاو