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