JavaScript Objects

<< مبحث قبلی مبحث بعدی >>

اشیاء، خصوصیت‌ها و توابع شیء در زندگی واقعی

در زندگی واقعی خودرو یک شی است. یک خودرو دارای خصوصیت‌هایی نظیر رنگ و جرم، و توابعی نظیر شروع (Start) و توقف است.

همه خودروها دارای خصوصیات یکسان هستند، ولی مقادیر این خصوصیات از خودرویی به خودرو دیگر متفاوت است. همچنین همه ماشین‌ها دارای توابع یکسان هستند، ولی این توابع در زمان‌های متفاوتی عمل می‌کنند.

اشیاء در JavaScript

تا الان یادگرفته‌اید که متغیرهای جاوا اسکریپت نکهدارنده‌ای برای مقادیر داده‌ها هستند. مثلاً کد زیر مقدار Fiat را به متغیر Car تخصیص می‌دهد.

var car = "Fiat";

اشیاء هم متغیر هستند ولی می‌توانند مقادیر زیادی را در خود نگه دارند. برای مثال کد زیر 3 مقدار (Fiat, 500, white) را به متغیر car تخصیص می‌دهد:

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

مقادیر به شکل اسم:مقدار نوشته شده‌اند.

تعریف شیء

برای تعریف یک شیء می‌توانید به صورت زیر عمل کنید:

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

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

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

خصوصیت شیء

به جفت‌های اسم:مقدار در اشیاء جاوا اسکریپت خصوصیت (properties) گفته می‌شود.

خصوصیت (Property) مقدار خصوصیت (Property Value)
firstName John
lastName Doe
age 50
eyeColor blue

دسترسی به خصوصیت شیء

از دو طریق می‌توانید به خصوصیت‌های یک شیء دسترسی داشته باشید:

objectName.propertyName

یا

objectName["propertyName"]

مثال اول:


<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript Objects </h2>
    <p> There are two different ways to access an object property. </p>
    <p> You can use person.property or person["property"]. </p>
    <p id = "demo"> </p>
    <script>
      // Create an object:
      var person = {
      firstName: "John",
      lastName : "Doe",
      id : 5566
      };
      // Display some data from the object:
      document.getElementById("demo").innerHTML =
        person.firstName + " " + person.lastName;
    </script>
  </body>
</html>

خروجی:

مثال دوم:


<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript Objects </h2>
    <p> There are two different ways to access an object property. </p>
    <p> You can use person.property or person["property"]. </p>
    <p id = "demo"> </p>
    <script>
      // Create an object:
      var person = {
      firstName: "John",
      lastName : "Doe",
      id : 5566
      };
      // Display some data from the object:
      document.getElementById("demo").innerHTML =
        person["firstName"] + " " + person["lastName"];
    </script>
  </body>
</html>

خروجی:

توابع شیء

دو اصطلاح Function و Method در برنامه نویسی وجود دارد که تقریباً دارای تعریف یکسانی هستند. با Function در بخش آموزش تابع آشنا شدید. اصطلاح Method هم دقیقاً همان است با این تفاوت که آن را برای شیء استفاده می‌کنیم یا به زبان ساده‌تر Method تابعی است که به عنوان خصوصیت یک شیء ذخیره شده است.

خصوصیت (Property) مقدار خصوصیت (Property Value)
firstName John
lastName Doe
age 50
eyeColor blue
fullName function() {return this.firstName + " " + this.lastName;}
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};

کلید واژه this

در تعریف تابع، کلیدواژه this اشاره به مالک (owner) تابع دارد. به عنوان نمونه، در مثال بالا this شیء person است که مالک تابع fullName می‌باشد.

به عبارت دیگر this.firstName به معنی آن است که firstName خصوصیت این شیء است.

دسترسی به توابع شیء

دسترسی به توابع شیء به صورت objectName.methodName() صورت می‌پذیرد. برای مثال:


<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript Objects </h2>
    <p> An object method is a function definition, stored as a property value. </p>
    <p id = "demo"> </p>
    <script>
      // Create an object:
      const 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>

خروجی:

اگر بدون پرانتز بخواهید به تابع شیء دسترسی پیدا کنید، آنگاه تعریف تابع بازگردانده می‌شود.


<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript Objects </h2>
    <p> An object method is a function definition, stored as a property value. </p>
    <p id = "demo"> </p>
    <script>
      // Create an object:
      const 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>

خروجی:

متغیرهای رشته‌ای، اعداد و بولین را به صورت شیء ایجاد نکنید!

زمانی که یک متغیر در جاوا اسکریپت توسط کلید واژه new ایجاد شود، متغیر به صورت شیء ایجاد خواهد شد.

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
از اشیاء رشته‌ای، اعداد و بولین پرهیز کنید. زیرا اولاً کد شما را پیچیده و ثانیاً سرعت اجرای کد را کاهش می‌دهند.
<< مبحث قبلی مبحث بعدی >>