วัตถุจาวาสคริปต์

สารบัญ

แสดงสารบัญ

ใน JavaScript วัตถุถือเป็นราชา ถ้าคุณเข้าใจวัตถุ แสดงว่าคุณเข้าใจ JavaScript

ใน JavaScript เกือบ "ทุกอย่าง" เป็นวัตถุ

บูลีนสามารถเป็นวัตถุได้ (หากกำหนดด้วยคีย์เวิร์ด ใหม่)
ตัวเลขสามารถเป็นวัตถุได้ (หากกำหนดด้วยคีย์เวิร์ด ใหม่)
สตริงสามารถเป็นวัตถุได้ (หากกำหนดด้วยคำหลัก ใหม่)
วันที่เป็นวัตถุเสมอ
คณิตศาสตร์เป็นวัตถุเสมอ
นิพจน์ทั่วไปจะเป็นวัตถุเสมอ
อาร์เรย์จะเป็นวัตถุเสมอ
ฟังก์ชันจะเป็นวัตถุเสมอ
วัตถุก็คือวัตถุเสมอ

ค่า JavaScript ทั้งหมด ยกเว้นค่าพื้นฐาน เป็นอ็อบเจ็กต์

จาวาสคริปต์ดั้งเดิม

ค่าดั้งเดิมคือค่าที่ไม่มีคุณสมบัติหรือวิธีการ

3.14 เป็นค่าดั้งเดิม

ประเภทข้อมูลดั้งเดิมคือข้อมูลที่มีค่าดั้งเดิม

JavaScript กำหนดประเภทข้อมูลดั้งเดิมไว้ 7 ประเภท:

ตัวอย่าง


string
number
boolean
null
undefined
symbol
bigint

ไม่เปลี่ยนรูป

ค่าดั้งเดิมไม่เปลี่ยนรูป (เป็นฮาร์ดโค้ดและไม่สามารถเปลี่ยนแปลงได้)

ถ้า x=3.14 คุณสามารถเปลี่ยนค่าของ x ได้ แต่คุณไม่สามารถเปลี่ยนค่าของ 3.14 ได้

Value	Type	Comment
"Hello"	string	"Hello" is always "Hello"
3.14	number	3.14 is always 3.14
true	boolean	true is always true
false	boolean	false is always false
null	null (object)	null is always null
undefined	undefined	undefined is always undefined

วัตถุเป็นตัวแปร

ตัวแปร JavaScript สามารถมีค่าเดียว:

ตัวอย่าง

let person = "John Doe";

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

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

<script>
// Create and display a variable:
let person = "John Doe";
document.getElementById("demo").innerHTML = person;
</script>

</body>
</html>

ตัวแปร JavaScript สามารถมีค่าได้หลายค่าเช่นกัน

วัตถุก็เป็นตัวแปรเช่นกัน แต่วัตถุสามารถมีได้หลายอย่าง ค่านิยม

ค่าอ็อบเจ็กต์เขียนเป็นคู่ name : value (ชื่อและค่าคั่นด้วย a ลำไส้ใหญ่)

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating an object:</p>

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

<script>
let person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;
</script>

</body>
</html>

ออบเจ็กต์ JavaScript คือชุดของ ค่าที่มีชื่อ

เป็นเรื่องปกติในการประกาศวัตถุด้วยคีย์เวิร์ด const

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating an object:</p>

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

<script>
const person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;
</script>

</body>
</html>

คุณสมบัติของวัตถุ

ค่าที่มีชื่อในออบเจ็กต์ JavaScript เรียกว่า คุณสมบัติ

firstName: จอห์น
lastName: โด้
age: 50
eyeColor: สีฟ้า

วัตถุที่เขียนเป็นคู่ค่าชื่อจะคล้ายกับ:

อาร์เรย์เชื่อมโยงใน PHP
พจนานุกรมใน Python
ตารางแฮชใน C
แผนที่แฮชใน Java
แฮชใน Ruby และ Perl

วิธีการวัตถุ

วิธีการคือการกระทำที่สามารถทำได้บนวัตถุ

คุณสมบัติของวัตถุสามารถเป็นได้ทั้งค่าดั้งเดิม วัตถุอื่นๆ และฟังก์ชัน

วิธีการวัตถุเป็นคุณสมบัติของวัตถุที่ประกอบด้วย ฟังก์ชัน คำจำกัดความ

firstName: จอห์น
lastName: โด้
age: 50
eyeColor: สีฟ้า
fullName: ฟังก์ชั่น() {ส่งคืน this.firstName + " " + this.lastName;}

อ็อบเจ็กต์ JavaScript เป็นคอนเทนเนอร์สำหรับค่าที่ระบุชื่อ เรียกว่าคุณสมบัติและวิธีการ

คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับวิธีการในบทถัดไป

การสร้างวัตถุ JavaScript

ด้วย JavaScript คุณสามารถกำหนดและสร้างวัตถุของคุณเองได้

มีหลายวิธีในการสร้างวัตถุใหม่:

สร้างวัตถุชิ้นเดียวโดยใช้วัตถุตามตัวอักษร
สร้างวัตถุเดียวด้วยคำหลัก ใหม่
กำหนดตัวสร้างวัตถุ และจากนั้น สร้างวัตถุของชนิดที่สร้างขึ้น
สร้างวัตถุโดยใช้ Object.create()

การใช้วัตถุตัวอักษร

นี่เป็นวิธีที่ง่ายที่สุดในการสร้างวัตถุ JavaScript

การใช้อ็อบเจ็กต์ลิเทอรัล คุณทั้งกำหนดและสร้างอ็อบเจ็กต์ในอันเดียว คำแถลง.

สัญพจน์อ็อบเจ็กต์คือรายการคู่ของชื่อ:ค่า (เช่น อายุ:50) ภายในเครื่องหมายปีกกา {}

ตัวอย่างต่อไปนี้สร้างวัตถุ JavaScript ใหม่ที่มีคุณสมบัติสี่ประการ:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

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

<script>
const person = {firstName:"John", lastName:"Doe", age:50,eyeColor:"blue"};

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

การเว้นวรรคและการขึ้นบรรทัดไม่สำคัญ คำจำกัดความของวัตถุสามารถขยายได้หลายบรรทัด:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

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

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

ตัวอย่างนี้สร้างวัตถุ JavaScript ที่ว่างเปล่า แล้วเพิ่มคุณสมบัติ 4 รายการ:

ตัวอย่าง

const person = {};
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

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

<script>
const person = {};
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue"; 

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

การใช้คำหลัก JavaScript ใหม่

ตัวอย่างต่อไปนี้สร้างวัตถุ JavaScript ใหม่ ใช้ new Object(), แล้วเพิ่มคุณสมบัติ 4 รายการ:

ตัวอย่าง

const person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

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

<script>
const person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue"; 

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

ตัวอย่างข้างต้นทำเช่นเดียวกันทุกประการ

แต่ไม่จำเป็นต้องใช้ new Object()

เพื่อให้อ่านง่าย ความเรียบง่าย และความเร็วในการดำเนินการ ให้ใช้วิธี object literal

วัตถุ JavaScript นั้นไม่แน่นอน

ออบเจ็กต์ไม่แน่นอน: ได้รับการแก้ไขโดยการอ้างอิง ไม่ใช่ตามค่า

หากบุคคลเป็นวัตถุ ข้อความต่อไปนี้จะไม่สร้างสำเนาของบุคคล:

const x = person;  // Will not create a copy of person.

วัตถุ x ไม่ใช่สำเนา ของบุคคล มัน คือ บุคคล. ทั้ง x และบุคคลเป็นวัตถุเดียวกัน

การเปลี่ยนแปลงใดๆ กับ x จะเปลี่ยนบุคคลด้วย เนื่องจาก x และบุคคลเป็นวัตถุเดียวกัน

ตัวอย่าง

const person = {
  firstName:"John",
  lastName:"Doe",
  age:50, eyeColor:"blue"
}
 
const x = person;
x.age = 10;      // Will change both x.age and person.age

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>JavaScript objects are mutable.</p>
<p>Any changes to a copy of an object will also change the original object:</p>

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

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  age:50,
  eyeColor: "blue"
};

const x = person;
x.age = 10;

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>