ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش جاوا اسکریپت | Javascript
توصیه می‌کند:
انواع داده ها (data types) در جاوا اسکریپت: اشیاء
29 دی 1397
درس 14 از سری آموزش جاوا اسکریپت | Javascript
با سلام، در ادامه ی یادگیری انواع داده ها در جاوا اسکریپت به سراغ اشیاء می رویم.
اشیاء در دنیای واقعی
در دنیای واقعی ما، ماشین یک شیء است. این شیء دارای ویژگی های مثل رنگ و وزن، و متد هایی مانند حرکت کردن و توقف است. اگر دقت کنید میفهمید که تمام ماشین ها دارای ویژگی های هستند اما مقدار و جزئیات این ویژگی ها برای هر ماشین متفاوت است. این ماشین ها دارای متد های متفاوتی هم هستند که در زمان های مختلف اجرا می شوند.
اشیاء در دنیای جاوا اسکریپت
تا الان یاد گرفته اید که کار متغیر ها (variables) ذخیره ی داده هاست؛ این متغیر ها یک داده را گرفته و در خود ذخیره می کنند:
var car = "Fiat";
اشیاء (objects) نیز نوعی متغیر هستند اما آن ها تعداد مقدار زیادی از داده ها را در خود ذخیره می کنند:
var car = {type:"Fiat", model:"500", color:"white"};
همین طور که می بینید این مقادیر به صورت جفت های name:value (یعنی مقدار:نام) کنار هم قرار گرفته و با ویرگول از هم جدا می شوند.
نکته: در اشیاء نیز فضای خالی (whitespace) اهمیتی ندارد و هر دو حالت زیر یک کد هستند:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
ویژگی ها (property) اشیاء
به جفت های name:value در جاوا اسکریپت ویژگی (property) می گویند. مثال:
| Property Value (مقدار ویژگی) | Property (ویژگی) |
| John | firstName |
| Doe | lastName |
دسترسی به ویژگی های اشیاء
برای دسترسی به ویژگی های اشیاء دو روش وجود دارد:
objectName.propertyName
objectName["propertyName"]
متد های (methods) اشیاء
متد ها اعمالی هستند که روی اشیاء انجام می شوند و مانند تعریف یک تابع عادی در اشیاء ذخیره می شوند:
| مقدار ویژگی | ویژگی |
| John | firstName |
| Doe | lastName |
| 50 | age |
| blue | eyeColor |
| function() {return this.firstName + " " + this.lastName;} | fullName |
بنابراین به زبان ساده، متد ها در واقع توابعی هستند که در یک شیء ذخیره شده اند.
یک مثال از چنین شیء ای را در کد زیر می بینید:
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
خروجی این کد عبارت "John Doe خواهد بود.
کلید واژه ی this
در تعریف یک تابع (در اشیاء)، کلمه ی this (به معنای "این") به مالک آن تابع برمیگردد. یعنی در مثال بالا کلمه ی this به شیء person بر میگردد چرا که صاحب و مالک تابعِ fullname است. به زبان ساده تر this.firstName یعنی خصوصیتِ firstname ای که متعلق به این شیء است.
البته این کلمه بسته به اینکه کجا استفاده شده باشد معنی متفاوتی دارد. کلمه ی this:
- در یک متد، به مالک شیء اشاره دارد.
- اگر به تنهایی استفاده شود، به شیء global (شیء ای که همیشه در جاوا اسکریپت موجود می باشد) اشاره دارد.
- در یک تابع، باز هم به شیء global اشاره دارد.
- در یک رویداد (event)، اشاره به عنصری دارد که رویداد را دریافت کرده است.
- در متد هایی مانند ()call و ()apply می تواند به هر چیزی که تعیین شود اشاره کند.
مثال استفاده در رویداد ها:
<!DOCTYPE html> <html> <body> <h2>The JavaScript <b>this</b> Keyword</h2> <button onclick="this.style.display='none'">Click to Remove Me!</button> </body> </html>
مشاهده ی خروجی این کد در ادیتور آنلاین جاوا اسکریپت.
مثال استفاده به تنهایی:
<!DOCTYPE html>
<html>
<body>
<h2>The JavaScript <b>this</b> Keyword</h2>
<p>In this example, <b>this</b> refers to the window Object:</p>
<p id="demo"></p>
<script>
var x = this;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
مشاهده ی خروجی این کد در ادیتور آنلاین جاوا اسکریپت.
مثال استفاده در تابع:
<!DOCTYPE html>
<html>
<body>
<h2>The JavaScript <b>this</b> Keyword</h2>
<p>In this example, <b>this</b> represents the <b>person</b> object.</p>
<p>Because the person object "owns" the fullName method.</p>
<p id="demo"></p>
<script>
// Create an object:
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
مشاهده ی خروجی این کد در ادیتور آنلاین جاوا اسکریپت.
مثال استفاده در متد های ()call و ()apply:
این متد ها از پیش در جاوا اسکریپت تعریف شده اند و می توانند یک متد شی ای را به وسیله ی یک شیء دیگر (به عنوان آرگومان) صدا بزنند. در مثال زیر هنگامی که person1.fullName را با person2 (به عنوان آرگومان) صدا بزنیم، کلمه ی this به person2 اشاره خواهد داشت، حتی اگر یک متد برای person1 باشد:
<!DOCTYPE html>
<html>
<body>
<h2>The JavaScript this Keyword</h2>
<p>In this example <strong>this</strong> refers to person2, even if it is a method of person1:</p>
<p id="demo"></p>
<script>
var person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person2 = {
firstName:"John",
lastName: "Doe",
}
var x = person1.fullName.call(person2);
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
مشاهده ی خروجی این کد در ادیتور آنلاین جاوا اسکریپت.
در جلسات بعدی در مورد این متد ها بیشتر صحبت خواهیم کرد.
دسترسی به متد های اشیاء
دسترسی به متد های اشیاء مانند دسترسی به ویژگی های اشیاء است، با ساختار:
objectName.methodName()
اگر بعد از نام متد از پرانتز استفاده نکنید، تعریف متد به شما برگردانده می شود نه نتیجه ی آن:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>If you access an object method without (), it will return the function definition:</p>
<p id="demo"></p>
<script>
// Create an object:
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName;
</script>
</body>
</html>
خروجی این کد را در ادیتور آنلاین جاوا اسکریپت مشاهده کنید.
امیدوارم از این قسمت استفاده ی کافی را برده باشید.
در پناه حق.
ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش جاوا اسکریپت | Javascript
توصیه می‌کند:
دوره‌های آموزشی مرتبط
مقالات مرتبط
22 اردیبهشت 1401
16 اردیبهشت 1401
21 اسفند 1400
17 اسفند 1400
16 اسفند 1400
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.