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

สารบัญ

    แสดงสารบัญ

วัตถุ คุณสมบัติ และวิธีการในชีวิตจริง

ในชีวิตจริง รถยนต์คือวัตถุ

รถยนต์มีคุณสมบัติ เช่น น้ำหนักและสี และมี วิธีการ เช่น การสตาร์ทและการหยุด:

Object Properties Methods

car.name = Fiat

car.model = 500

car.weight = 850kg

car.color = white
car.start()

car.drive()

car.brake()

car.stop()

รถยนต์ทุกคันมี คุณสมบัติ เหมือนกัน แต่คุณสมบัติ ค่า แตกต่างกันไปในรถยนต์แต่ละคัน

รถยนต์ทุกคันมี วิธีการ เหมือนกัน แต่ใช้วิธีการต่างๆ ในเวลาที่ต่างกัน

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

คุณได้เรียนรู้แล้วว่าตัวแปร JavaScript นั้น คอนเทนเนอร์สำหรับค่าข้อมูล

รหัสนี้จะกำหนด ค่าธรรมดา (Fiat) ให้กับ รถยนต์ที่มีชื่อตัวแปร:

let car = "Fiat";

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

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

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

</body>
</html>

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

รหัสนี้กำหนด หลายค่า (Fiat, 500, สีขาว) ให้กับ a ตัวแปร ชื่อรถ:

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

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

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

<script>
// Create an object:
const car = {type:"Fiat", model:"500", color:"white"};

// Display some data from the object:
document.getElementById("demo").innerHTML = "The car type is " + car.type;
</script>

</body>
</html>

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

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

เรียนรู้เพิ่มเติมเกี่ยวกับการใช้ const กับอ็อบเจ็กต์ในบท: JS Const

คำจำกัดความของวัตถุ

คุณกำหนด (และสร้าง) วัตถุ JavaScript ด้วยวัตถุตามตัวอักษร:

ตัวอย่าง

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

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

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

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

// Display some data from the object:
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 id="demo"></p>

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

// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

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

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

firstName

จอห์น

lastName

โด้

age

50

eyeColor

สีฟ้า

การเข้าถึงคุณสมบัติของวัตถุ

คุณสามารถเข้าถึงคุณสมบัติของวัตถุได้สองวิธี:

objectName.propertyName

หรือ

objectName["propertyName"]

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

person.lastName;

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

<!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:
const person = {
  firstName: "John",
  lastName : "Doe",
  id     :  5566
};

// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>

</body>
</html>

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

person["lastName"];

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

<!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:
const person = {
  firstName: "John",
  lastName : "Doe",
  id     :  5566
};

// Display some data from the object:
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
</script>

</body>
</html>

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

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

ออบเจ็กต์ยังสามารถมีวิธีการได้

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

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

firstName

จอห์น

lastName

โด้

age

50

eyeColor

สีฟ้า

fullName

ฟังก์ชั่น() {ส่งคืน this.firstName + " " + this.lastName;}

วิธีการคือฟังก์ชันที่เก็บไว้เป็นคุณสมบัติ

ตัวอย่าง

const person = {
    firstName: "John",
    lastName : "Doe",
    id       : 5566,
    fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

ในตัวอย่างข้างต้น this หมายถึง person object

เช่น. this.firstName หมายถึงคุณสมบัติ firstName ของ this

เช่น. this.firstName หมายถึงคุณสมบัติ firstName ของ บุคคล

สิ่งนี้คืออะไร?

ใน JavaScript คำหลัก นี้ อ้างถึง วัตถุ

ซึ่งวัตถุขึ้นอยู่กับวิธีการเรียกใช้ นี้ (ใช้หรือเรียก)

คำหลัก this อ้างอิงถึงออบเจ็กต์ที่แตกต่างกัน ขึ้นอยู่กับวิธีการใช้:

  • ในวิธีการวัตถุ นี่ หมายถึง วัตถุ

  • เพียงอย่างเดียว สิ่งนี้ หมายถึง วัตถุส่วนกลาง

  • ในฟังก์ชัน this หมายถึง global object

  • ในฟังก์ชัน ในโหมดเข้มงวด นี่ คือ unknown

  • ในเหตุการณ์ สิ่งนี้ หมายถึง องค์ประกอบ ที่ได้รับเหตุการณ์

  • วิธีการเช่น call(), apply() และ bind() สามารถอ้างอิง สิ่งนี้ ไปยัง วัตถุใดๆ

บันทึก

this ไม่ใช่ตัวแปร มันเป็นคำสำคัญ คุณไม่สามารถเปลี่ยนค่าของ this

ดูสิ่งนี้ด้วย:

บทช่วยสอน JavaScript นี้

คำหลัก นี้

ในคำจำกัดความของฟังก์ชัน this หมายถึง "เจ้าของ" ของฟังก์ชัน

ในตัวอย่างข้างต้น นี่ คือ วัตถุบุคคล ที่ "เป็นเจ้าของ" ฟังก์ชัน ชื่อเต็ม

กล่าวอีกนัยหนึ่ง this.firstName หมายถึงคุณสมบัติ firstName ของ อ็อบเจ็กต์นี้

เรียนรู้เพิ่มเติมเกี่ยวกับ สิ่งนี้ ใน JavaScript บทช่วยสอนนี้

การเข้าถึงวิธีการของวัตถุ

คุณเข้าถึงวิธีการวัตถุด้วยไวยากรณ์ต่อไปนี้:

objectName.methodName()

ตัวอย่าง

name = person.fullName();

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

<!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>

หากคุณเข้าถึงวิธีการ โดยไม่มี วงเล็บ() ก็จะเป็นเช่นนั้น จะส่งกลับ คำจำกัดความของฟังก์ชัน:

ตัวอย่าง

name = person.fullName;

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>If you access an object method without (), it will return the function definition:</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>

อย่าประกาศสตริง ตัวเลข และบูลีนเป็นวัตถุ!

เมื่อมีการประกาศตัวแปร JavaScript ด้วยคีย์เวิร์ด "new" ตัวแปรจะเป็น สร้างเป็น วัตถุ:

x = new String();        // Declares x as a String object
y = new Number();        // Declares y as a Number object
z = new Boolean();       // Declares z as a Boolean object

หลีกเลี่ยงวัตถุ String, Number และ Boolean . มันทำให้โค้ดของคุณซับซ้อนและทำให้ช้าลง ความเร็วในการดำเนินการ

คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับออบเจ็กต์ในภายหลังในบทช่วยสอนนี้