วิธีการจาวาสคริปต์

สารบัญ

    แสดงสารบัญ

ตัวอย่าง

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

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

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the <b>person</b> object.</p>
<p>Because <b>fullName</b> is a method of the person object.</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 คำหลัก นี้ อ้างถึง วัตถุ

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

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

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

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

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

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

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

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

บันทึก

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

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

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

วิธีการจาวาสคริปต์

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

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

firstName

จอห์น

lastName

โด้

age

50

eyeColor

สีฟ้า

fullName

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

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

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

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

objectName.methodName()

โดยทั่วไปคุณจะอธิบาย fullName() เป็นวิธีการของวัตถุบุคคลและ fullName เป็นคุณสมบัติ

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

ตัวอย่างนี้เข้าถึง fullName() วิธีการ ของวัตถุบุคคล:

ตัวอย่าง

name = person.fullName();

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating and using an object method.</p>
<p>A method is actually a function definition stored as a property value.</p>

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

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

document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>

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

ตัวอย่าง

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

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

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

document.getElementById("demo").innerHTML = person.fullName;
</script>
</body>
</html>

การเพิ่มวิธีการให้กับวัตถุ

การเพิ่มวิธีการใหม่ให้กับวัตถุนั้นเป็นเรื่องง่าย:

ตัวอย่าง

 person.name = function () {
  return this.firstName + " " + this.lastName;
};

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p id="demo"></p>

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

document.getElementById("demo").innerHTML =
"My father is " + person.name(); 
</script>

</body>
</html>

โดยใช้วิธีการในตัว

ตัวอย่างนี้ใช้วิธี toUpperCase() ของวัตถุ String เพื่อแปลงข้อความ เป็นตัวพิมพ์ใหญ่:

let message = "Hello world!";
let x = message.toUpperCase();

ค่าของ x หลังจากการรันโค้ดด้านบนจะเป็น:

HELLO WORLD!

ตัวอย่าง

person.name = function () {
  return (this.firstName + " " + this.lastName).toUpperCase();
};

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p id="demo"></p>

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
};
person.name = function() {
  return (this.firstName + " " + this.lastName).toUpperCase();
};

document.getElementById("demo").innerHTML =
"My father is " + person.name(); 
</script>

</body>
</html>