JavaScript Object

Object จะประกอบไปด้วยคุณสมบัติ (Properties) และเมธอด (Methods) ยกตัวอย่างวัตถุเช่น กระเป๋า ซึ่งกระเป๋ามีคุณสมบัติ และเมธอดดังนี้

  • คุณสมบัติ (Properties) ประกอบไปด้วย ชื่อรถ (name) , สี (colors),  และ ราคา (price) เป็นต้น 
  • เมธอด (Method)  ประกอบไปด้วย สตาร์ทได้ (start), ขับขี่ได้ (drive) , หยุดรถได้ (brake) และ ดับรถได้ (stop) เป็นต้น
 

 

Object Properties

Properties Value
car_name Honda City
color Black
price 400,000

จากตารางด้านบนสามารถสร้างตัวแปร Object ได้ดังนี้

var car = {car_name:"Honda City", color:"Black", price:"400,000"};

 

การเข้าถึงคุณสมบัติของ Object สามารถเข้าถึงได้ 2 รูปแบบดังนี้

รูปแบบที่ 1 

objectName.propertiesName

ตัวอย่างเช่น

car.color

 

รูปแบบที่ 2 

objectName["propertiesName"]

ตัวอย่างเช่น 

car["color"]

 

ตัวอย่างที่ 1  

<html>
  <body>

  <p id="car-detail">รถยนต์ (Cars)</p>
  <button onclick="carFunc()">Detail</button>

  <script>
  function carFunc(){
  // Create an object
  var car = {car_name:"Honda City", color:"white", price:"400,000"};

  document.getElementById('car-detail').innerHTML = 'ชื่อรุ่นยี่ห้อ : ' + car.car_name + '<br>สี : ' + car.color + '<br>ราคา : ' + car.price; 
  }
  </script>

  </body>
</html>

ไฟล์ที่ 1 ตัวอย่างการใช้งานตัวแปร Object Properties 

 

Object Method

Properties Value
car_name Honda City
color Black
price 400,000
fullDetail function() {return “ชื่อรุ่นยี่ห้อ ” + this.car_name + “<br>สี ” + this.color + “<br>ราคา ” + this.price;}

จากตารางด้านบนสามารถสร้างตัวแปร Object ได้ดังนี้

var car = {

car_name:"Honda City",

color:"Black",

price:"400,000",

fullDetail : function() {

return "ชื่อรุ่นยี่ห้อ " + this.car_name + "<br>สี " + this.color + "<br>ราคา " + this.price;

}

};

การเข้าถึง Object Method สามารถเข้าถึงได้ดังนี้

objectName.methodName()

ตัวอย่างเช่น 

car.fullDetail();

 

ตัวอย่างที่ 2 

<html>
  <body>

  <p id="car-detail">รถยนต์ (Cars)</p>
  <button onclick="carFunc()">Detail</button>

  <script>
  function carFunc(){
  // Create an object
  var car = {
  car_name:"Honda City",
  color:"white",
  price:"400,000",
  fullDetail:function(){
  	return 'ชื่อรุ่นยี่ห้อ ' + this.car_name + '<br>สี ' + this.color + '<br>ราคา ' + this.price; 
  }
  };

  document.getElementById('car-detail').innerHTML = car.fullDetail(); 
  }
  </script>

  </body>
</html>

ไฟล์ที่ 2 การเข้าถึง Object Method

 

 

 

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: