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