ما چیزهای مهم زیادی در مورد شی جاوا اسکریپت دیده ایم. اما اکنون می خواهیم مهمترین موضوع دیگری را ببینیم که این در جاوا اسکریپت
این
همانطور که ممکن است با زبان های برنامه نویسی زیادی برخورد کرده باشید و آشنایی خوبی با آن داشته باشید این کلمه کلیدی.اما در جاوا اسکریپت این کلمه کلیدی کاملاً متفاوت است. بیایید در مورد کلمه کلیدی Strange this در جاواسیریپت بدانیم.
`In Javascript **this** is the Object of which Function is property.In more simple words,**this** reference to the Object of that is currently calling the Function.`
بیایید این را با یک مثال ببینیم،
`let counter = {
count: 0,
next: function () {
return ++this.count;
},
};
counter.next();`
همانطور که می بینید، در اینجا شمارنده یک شی است و next() متدی است در داخل آبجکت شمارنده، همانطور که در داخل شی می بینید. این کلمه کلیدی در داخل متد به شی فعلی ارجاع می دهد پیشخوان.
اما این کافی نیست، ما باید آن را بررسی کنیم این کلمه کلیدی در زمینه متفاوت مانند،
- زمینه جهانی.
- زمینه تابع.
زمینه جهانی.
`console.log(this === window); // true`
در زمینه جهانی،این به Global Object ارجاع می دهد، در مرورگر به عنوان Window Object و در NodeJs Environment آن Global Object است. و این رفتار در هر دو یکسان است. سخت گیرانه و غیر سختگیرانه حالت
و اگر ملکی را با این در زمینه جهانی، جاوا اسکریپت Property را به پنجره Object اضافه می کند، مانند این،
`this.color="Red";
console.log(window.color); // 'Red'`
زمینه تابع.
در جاوا اسکریپت می توانید تابع را به روش های زیر فراخوانی کنید.
1. فراخوانی تابع.
2. فراخوانی روش.
3. فراخوان سازنده.
4. فراخوانی غیرمستقیم.
فراخوانی تابع
در داخل تابع این کلمه کلیدی در حالت Strict و Non Strict متفاوت است. بیایید ببینیم
`function show() {
console.log(this === window); // true
}
show();`
هنگامی که تابع show() را فراخوانی می کنید، این به شیء جهانی اشاره می کند که پنجره ای در مرورگر وب و جهانی در Node.js است.
`Calling the show() function is the same as:
window.show();
`
اما در حالت Strict، جاوا اسکریپت را تنظیم می کند این در داخل زمینه Function as تعریف نشدهبیایید با یک مثال ببینیم،
`"use strict";
function show() {
console.log(this === undefined);
}
show();`
اگر می خواهید حالت Strict را فعال کنید از دستورالعمل استفاده کنید “سخت استفاده کن” در ابتدای فایل جاوا اسکریپت، در غیر این صورت می توانید از حالت Strict در داخل تابع خاص استفاده کنید.
`function show() {
"use strict";
console.log(this === undefined); // true
function display() {
console.log(this === undefined); // true
}
display();
}
show();`
Output:
true
true
همانطور که می بینید حالت سخت برای تابع و عملکرد تودرتو نیز اعمال می شود.
فراخوانی روش
هنگامی که یک متد از یک شی را فراخوانی می کنید، جاوا اسکریپت را تنظیم می کند این به شیئی که حاوی آن متد است. بیایید این را با یک مثال سریع ببینیم،
`let car = {
brand: 'Honda',
getBrand: function () {
return this.brand;
}
}
console.log(car.getBrand()); // Honda`
در این مثال، این شیء در متد getBrand() به آبجکت ماشین ارجاع می دهد.
بیایید در اینجا کمی مشکل پیش برویم، زیرا getBrand یک ویژگی یک شی است و می توان آن را در متغیر سمت راست ذخیره کرد. بله، اجازه دهید این کار را انجام دهیم.
`let brand = car.getBrand;
console.log(brand()); // undefined
`
ufff، Strange درست است. برای من هم این چیزها خیلی عجیب به نظر می رسد تا زمانی که دلیل دقیق آن را بدانم. وقتی متغیر نام تجاری را با ویژگی Object getBrand اختصاص می دهید، این ویژگی Property را اختصاص می دهد، اما اتفاقی که می افتد این است که متغیر برند اکنون در زمینه جهانی است. و به Global Object ارجاع می دهد، بنابراین برای رفع این مشکل باید متغیر نام تجاری را به Object دقیق متصل کنیم.
`let brand = car.getBrand.bind(car);
console.log(brand()); // Honda
`
برای رفع این مشکل، از متد ()bind شی Function.prototype استفاده می کنید. متد bind() یک تابع جدید ایجاد می کند که این کلمه کلیدی روی یک مقدار مشخص تنظیم شده است.
بیایید مثال دیگری را ببینیم،
`let car = {
brand: 'Honda',
getBrand: function () {
return this.brand;
}
}
let bike = {
brand: 'Harley Davidson'
}
let brand = car.getBrand.bind(bike);
console.log(brand());
Output:
Harley Davidson`
در این مثال، متد bind() this را به شی دوچرخه تنظیم می کند، بنابراین، مقدار ویژگی برند شی دوچرخه را در کنسول می بینید.
فراخوان سازنده
وقتی از کلمه کلیدی جدید برای ایجاد نمونه ای از یک شی تابع استفاده می کنید، از تابع به عنوان سازنده استفاده می کنید.
`function Car(brand) {
this.brand = brand;
}
Car.prototype.getBrand = function () {
return this.brand;
}
let car = new Car('Honda');
console.log(car.getBrand());`
عبارت new Car(‘Honda’) فراخوانی سازنده تابع Car است. جاوا اسکریپت یک شی جدید ایجاد می کند و آن را روی شی جدید ایجاد می کند. این الگو تنها با یک مشکل بالقوه عالی عمل می کند.
اکنون می توانید Car() را به عنوان یک تابع یا به عنوان سازنده فراخوانی کنید. اگر کلمه کلیدی جدید را به صورت زیر حذف کنید:
`var bmw = Car('BMW');
console.log(bmw.brand);
// => TypeError: Cannot read property 'brand' of undefined`
از آنجایی که این مقدار در Car() روی شی جهانی تنظیم می شود، bmw.brand تعریف نشده برمی گرداند.
ES6 یک متا خاصیت به نام new.target معرفی کرد که به شما امکان می دهد تشخیص دهید که آیا یک تابع به عنوان یک فراخوانی ساده فراخوانی می شود یا به عنوان سازنده.
می‌توانید تابع ()Car را که از متاخصیصه new.target استفاده می‌کند به صورت زیر تغییر دهید:
`function Car(brand) {
if (!new.target) {
throw Error('Must use the new operator to call the function');
}
this.brand = brand;
}`
فراخوانی غیر مستقیم
در جاوا اسکریپت، توابع شهروندان درجه یک هستند. به عبارت دیگر توابع اشیایی هستند که نمونه هایی از نوع Function هستند.
نوع تابع دو روش دارد: call() و application(). این روش ها به شما اجازه می دهند که این مقدار را هنگام فراخوانی یک تابع تنظیم کنید. مثلا:
`function getBrand(prefix) {
console.log(prefix + this.brand);
}
let honda = {
brand: 'Honda'
};
let audi = {
brand: 'Audi'
};
getBrand.call(honda, "It's a ");
getBrand.call(audi, "It's an ");`
زبان کد: PHP (php)
در این مثال، تابع getBrand() را به صورت غیر مستقیم با استفاده از متد call() تابع getBrand فراخوانی کردیم. ما شیء هوندا و آئودی را به عنوان اولین آرگومان متد call() پاس دادیم، بنابراین در هر فراخوانی نام تجاری مربوطه را دریافت کردیم.
متد application() شبیه متد call() است با این تفاوت که آرگومان دوم آن آرایه ای از آرگومان ها است.
`getBrand.apply(honda, ["It's a "]); // "It's a Honda"
getBrand.apply(audi, ["It's an "]); // "It's a Audi"`
با تشکر از زمان شما،
سام
