گروه مقاله : جاوا اسكريپت Java Script
تاريخ انتشار : 1396/08/14 - 10:24
كد :7928

اشیاء در جاوا اسکریپت

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

برای تعریف اشیاء در جاوا اسکریپت میتوان اشیاء در دنیای واقعی را برای درک بهتر بعنوان مثال ذکر کرد.

اشیاء ، ویژگی ها و متد های در دنیای واقعی

در دنیای واقعی یک ماشین یک شیئ است.

یک ماشین دارای ویژگی هایی مانند وزن و رنگ است، یک ماشید دارای متدهایی مانند شروع به کار و توقف است.

شیئ

ویژگی

متد

اشیاء در جاوا اسکریپت

car.name = Fiat

car.model = 500

car.weight = 850kg

car.color = white

car.start()

car.drive()

car.brake()

car.stop()

 

تمام ماشین ها داری ویژگی های یکسانی مانند وزن و رنگ هستند ولی مقدار این ویژگی ها در ماشین های مختلف متفاوت است . مثالا ماشینی سفید و ماشین دیگری سیاه است. در مورد متدها هم همین طور است.

اشیاء در جاوا اسکریپت

ما میدانیم که از متغییر ها برای نگهداری مقادیر می توان استفاده کرد.

کد زیر مقدار Fiat را به متغییر Car نسبت می دهد:

 

var car = "Fiat";

=================

<p id="demo"></p>

 

<script>

var car = "Fiat";

document.getElementById("demo").innerHTML = car;

</script>

=======================================

Fiat

اشیاء نوعی متغییر هستند که میتوانند مقادیر زیادی را در خود بپذیرند.

کد زیر مقادیر زیادی رابه متغییری به نام Car نسبت می دهد:

var car = {type:"Fiat", model:"500", color:"white"};

===================================

<p>Creating a JavaScript Object.</p>

 

<p id="demo"></p>

 

<script>

var car = {type:"Fiat", model:"500", color:"white"};

document.getElementById("demo").innerHTML = car.type;

</script>

============================================

Fiat

مقادیر بصورت یک جفت name:value ارائه میشوند. بین مقادیر یک کاما قرار دارد.

ویژگی های اشیاء

در اشیاء جاوا اسکریپت یک جفت name:values را properties یا ویژگی می نامیم.

ویژگی

مقدار

firstName

John

lastName

Doe

age

50

eyeColor

blue

متد ها در اشیاء

متدها فعالیت هایی هستند که اشیاء انجام میدهند. متدها بصورت تابع در ویژگی ها تعریف میشوند:

ویژگی

مقدار ویژگی

firstName

John

lastName

Doe

age

50

eyeColor

blue

fullName

function() {return this.firstName + " " + this.lastName;}

 

تعریف اشیاء

به مثال زیر نگاه کنید:

 

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

=======================================================

<p id="demo"></p>

 

<script>

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

 

document.getElementById("demo").innerHTML =

person.firstName + " is " + person.age + " years old.";

</script>

========================================================

John is 50 years old.

ایجاد فاصله  و شکستن خط در تعریف اشیاء اهمیتی ندارد.

var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};

===================

<p id="demo"></p>

 

<script>

var person = {

    firstName : "John",

    lastName  : "Doe",

    age       : 50,

    eyeColor  : "blue"

};

 

document.getElementById("demo").innerHTML =

person.firstName + " is " + person.age + " years old.";

</script>

==========================================

John is 50 years old.

 

دسترسی به مقادیر یک شیئ:

شما میتوانید با دو روش زیر به ویژگی های اشیاء دسترسی داشته باشید:

 

objectName.propertyName

یا

objectName["propertyName"]

مثال 1:

person.lastName;

=======================

<p id="demo"></p>

 

<script>

var person = {

    firstName: "John",

    lastName : "Doe",

    id       :  5566

};

document.getElementById("demo").innerHTML =

person.firstName + " " + person.lastName;

</script>

=========================================

John Doe

 

مثال 2:

person["lastName"];

===================

<p id="demo"></p>

 

<script>

var person = {

    firstName: "John",

    lastName : "Doe",

    id       :  5566

};

document.getElementById("demo").innerHTML =

person["firstName"] + " " + person["lastName"];

</script>

=======================================

John Doe

دسترسی به متد های یک شیئ

برای دسترسی به متد اشیاء از کد زیر استفاده کنید.

 

objectName.methodName()

مثال:

name = person.fullName();

====================

<p id="demo"></p>

 

<script>

var person = {

    firstName: "John",

    lastName : "Doe",

    id       : 5566,

    fullName : function() {

       return this.firstName + " " + this.lastName;

    }

};

 

document.getElementById("demo").innerHTML = person.fullName();

</script>

====================================================

John Doe

 

اگر شما به متد fullName بدون پرانتز ارجاع بدهید پاسخ ارسالی برای شما تعریف تابع خواهد بود.

مثال

name = person.fullName;

======================

<p id="demo"></p>

 

<script>

var person = {

    firstName: "John",

    lastName : "Doe",

    id       : 5566,

    fullName : function() {

       return this.firstName + " " + this.lastName;

    }

};

 

document.getElementById("demo").innerHTML = person.fullName;

</script>

=====================================================

function() { return this.firstName + " " + this.lastName; }

یک متد در واقع یک تابع است که بصورت مقداری یک ویژگی ذخیره شده است.

رشته ها، اعداد و توابع بولن را بصورت شیئ تعریف نکنید:

 

var x = new String(); // Declares x as a String object
var y = new Number(); // Declares y as a Number object
var z = new Boolean(); // Declares z as a Boolean object

این کار موجب پیچیده شدن کد و دیرتر اجرا شدن آن میشود.

 

 

براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت در کرج با شرکت سارگون تماس بگيريد

نظرات كاربران :