از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
Hoisting در JavaScriptHoisting یک رفتار جاوا اسکریپت است که معمولاً برای در دسترس قرار دادن متغیرها و توابع برای استفاده قبل از تخصیص مقدار به متغیر یا تعریف تابع شناخته می شود. در واقع، اعلان های متغیر، تابع و کلاس را قبل از اجرا در بالای محدوده خود (حوزه جهانی یا یک تابع) قرار می دهد.
سرفصلهای مطلب
معرفی
Hoisting یک رفتار جاوا اسکریپت است که معمولاً برای در دسترس قرار دادن متغیرها و توابع برای استفاده قبل از تخصیص مقدار به متغیر یا تعریف تابع شناخته می شود. در واقع، اعلان های متغیر، تابع و کلاس را قبل از اجرا در بالای محدوده خود (حوزه جهانی یا یک تابع) قرار می دهد.
در واقع، جاوا اسکریپت کدی را به اعلان های بالابر منتقل نمی کند یا اضافه نمی کند. این اعلان ها در طول مرحله کامپایل مفسر در حافظه قرار می گیرند – قبل از اجرای کد در دسترس قرار می گیرند.
در این مقاله، ما در مورد بالا بردن و روش تأثیر آن بر متغیرها، توابع و کلاس ها خواهیم آموخت.
متغیرهای بالابر
یکی از جنبه های کلیدی بالا بردن این است که اعلان در حافظه قرار می گیرد – نه مقدار.
بیایید یک مثال را ببینیم:
console.log(name); // Prints undefined, as only declaration was hoisted
var name = "John";
console.log(name); // Prints "John"
این اتفاق می افتد زیرا جاوا اسکریپت می بیند که ما یک متغیر داریم name
در محدوده و آن را در حافظه قرار می دهد. متغیرهای اعلام شده با var
مقدار داده می شود undefined
تا زمانی که چیز دیگری به آنها محول شود.
بالابر متغیر با let و const
توسعه دهندگان جاوا اسکریپت به ندرت استفاده می کنند var
به نفع let
و const
کلمات کلیدی معرفی شده در ECMAScript 2015 (که معمولاً به عنوان ES6 نامیده می شود). متغیرهای اعلام شده با let
و const
برافراشته می شوند. با این حال، آنها با مقداردهی اولیه نمی شوند undefined
، یا هر مقداری بنابراین، اگر آنها قبل از مقداردهی اولیه استفاده شوند، a را دریافت خواهیم کرد ReferenceError
.
بیایید دوباره از همان مثال استفاده کنیم، اما استفاده کنید let
بجای var
:
console.log(name); // Uncaught ReferenceError: Cannot access 'name' before initialization
let name = "John";
console.log(name);
کد بالا a را می اندازد ReferenceError
در خط اول قرار می گیرد و اجرا را به پایان می رساند.
این const
کلمه کلیدی برای معرفی مقادیر تغییرناپذیر در جاوا اسکریپت اضافه شد – مقادیری که پس از مقداردهی اولیه قابل تغییر نیستند. به این ترتیب، هنگام استفاده const
ما باید یک مقدار را به متغیر اعلام و اختصاص دهیم. اگر این کار را نکنیم، یک دریافت خواهیم کرد SyntaxError
:
console.log(name); // Uncaught SyntaxError: Missing initializer in const declaration
const name;
و مانند let
، یک را دریافت می کنیم ReferenceError
زمانی که سعی می کنیم از یک ثابت قبل از مقداردهی اولیه استفاده کنیم:
console.log(name); // Uncaught ReferenceError: Cannot access 'name' before initialization
const name = "John";
console.log(name);
توابع بالابر
اعلانهای تابع در جاوا اسکریپت بالا میروند. اعلان تابع با کلمه کلیدی شروع می شود function
، به دنبال نام و آرگومان های آن در پرانتز، و سپس بدنه آن. بیایید کد زیر را در نظر بگیریم:
let first_name = "Stack";
let last_name = "Abuse";
let result = concat(first_name, last_name);
console.log(result); // rasanegar
function concat(x, y) {
return x + y;
}
مانند متغیرها، جاوا اسکریپت تابع را قبل از اجرای کد در آن محدوده در حافظه قرار می دهد. بنابراین، بالا بردن به ما این امکان را می دهد که concat()
تابع قبل از اینکه بعداً در کد تعریف شود.
در حالی که اعلانهای تابع بالا میروند، عبارات تابع به یک شکل کار نمیکنند. عبارت تابع زمانی است که یک متغیر را به یک تابع اختصاص می دهیم. به عنوان مثال، کد زیر یک خطا را نشان می دهد:
func_express(); // TypeError: func_express is not a function
var func_express = function () {
console.log('This the function expression is not a function');
};
جاوا اسکریپت a را برمی گرداند TypeError
زیرا بر خلاف اعلان تابع، فقط متغیر بالا کشیده شد. زمانی که متغیرها با var
بالا زده می شوند، مقدار پیش فرض به آنها داده می شود undefined
. سپس جاوا اسکریپت خطا می دهد زیرا مقدار متغیر در آن نقطه از زمان یک تابع نیست.
عملکرد بالابر با عملکردهای پیکان
ECMA2015 راه جدیدی را برای ایجاد توابع ناشناس، توابع فلش، معرفی کرد. اینها با یک جفت براکت حاوی 0 یا بیشتر آرگومان، یک فلش تعریف می شوند =>
و بدنه عملکرد در بریس های فرفری. با توجه به بالا بردن، آنها به عنوان عملکرد دیگر عمل می کنند. مثلا:
arrow_func_express(); // TypeError: arrow_func_express is not a function
var arrow_func_express = () => {
console.log('This the arrow function is not a function');
};
هنگام استفاده از توابع فلش یا هر عبارت تابع دیگری، همیشه باید تابع را قبل از استفاده در کد خود تعریف کنیم. این روش صحیح برای استفاده از عبارت تابع است:
let arrow_func_express = () => {
console.log('This function expression will work');
};
arrow_func_express(); // This function expression will work
کلاس های بالابر
اعلانهای کلاس در جاوا اسکریپت بالا میروند. یک اعلان کلاس هنگام بالا آمدن مقدار اولیه نمی شود. این بدان معناست که در حالی که جاوا اسکریپت می تواند مرجع کلاسی را که ما ایجاد می کنیم پیدا کند، نمی تواند از کلاس قبل از اینکه در کد تعریف شود استفاده کند.
بیایید مثال زیر را در نظر بگیریم که برای تلاش برای دسترسی به یک کلاس قبل از تعریف آن خطا ایجاد می کند:
var person = new Person();
person.name = "Jane";
person.age = 25;
console.log(person); // Uncaught ReferenceError: Cannot access 'Person' before initialization"
class Person {
constructor(name, age) {
this.name = name; this.age = age;
}
}
این ReferenceError
شبیه چیزی است که وقتی میخواهیم به متغیری که با آن اعلام شده دسترسی پیدا کنیم، اتفاق میافتد let
یا const
قبل از اینکه در اسکریپت ما مقداردهی اولیه شود.
عبارات کلاس، جایی که ما یک تعریف کلاس را به یک متغیر اختصاص می دهیم، مشابه عبارات تابع عمل می کنند. اعلامیه های آنها افزایش یافته است، اما ارزش تعیین شده آنها نیست.
بیایید مثال قبلی خود را در نظر بگیریم و به جای آن از یک عبارت کلاس استفاده کنیم:
var person = new Person();
person.name = "Jane";
person.age = 25;
console.log(person); // Uncaught TypeError: Person is not a constructor"
var Person = class {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
زمانی که متغیر Person
بلند شده است، به آن مقدار داده می شود undefined
. از آنجایی که نمی توانیم از یک استفاده کنیم undefined
مقدار به عنوان یک کلاس، جاوا اسکریپت a را پرتاب می کند TypeError
.
هنگام کار با اعلانهای کلاس یا عبارات کلاس، همیشه باید کلاس را زودتر در کد خود تعریف کنیم تا از آن استفاده کنیم. روش صحیح استفاده از کلاس به صورت زیر است:
class Person {
constructor(name, age) {
this.name = name; this.age = age;
}
}
var person = new Person();
person.name = "Jane";
person.age = 25;
console.log(stack); // Person { name: 'Jane', age: 25 }
نتیجه
بالابرهای جاوا اسکریپت، متغیرها، تابع ها و اعلان های کلاس. آن مقاله تأثیرات بالا بردن را نشان داده است روی روش نوشتن کد جاوا اسکریپت
اعلان های عملکرد را می توان قبل از تعریف آنها به دلیل بالا بردن استفاده کرد. با این حال، برای به حداقل رساندن شانس خود را undefined
مقادیر و همچنین خطاهای مرجع یا نوع، استفاده از متغیرها، عبارات تابع و کلاسها پس از تعریف در کد ما ایمنتر است.
(برچسبها برای ترجمه)# جاوا اسکریپت
منتشر شده در 1403-01-19 07:17:04