วิธีการเรียกใช้ฟังก์ชัน JavaScript()

สารบัญ

แสดงสารบัญ

วิธีการใช้ซ้ำ

ด้วยเมธอด call() คุณสามารถเขียนเมธอดที่สามารถใช้กับเมธอดอื่นได้ วัตถุ

ฟังก์ชั่นทั้งหมดเป็นวิธีการ

ใน JavaScript ฟังก์ชั่นทั้งหมดเป็นวิธีการแบบวัตถุ

หากฟังก์ชันไม่ใช่วิธีการของอ็อบเจ็กต์ JavaScript ฟังก์ชันนั้นจะเป็นฟังก์ชันของ วัตถุระดับโลก (ดูบทก่อนหน้า)

ตัวอย่างด้านล่างสร้างวัตถุที่มี 3 คุณสมบัติ ชื่อ นามสกุล ชื่อเต็ม

ตัวอย่าง

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

// This will return "John Doe":
person.fullName();

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>This example creates an object with 3 properties (firstName, lastName, fullName).</p>
<p>The fullName property is a method:</p> 

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

<script>
const myObject = {
  firstName:"John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
document.getElementById("demo").innerHTML = myObject.fullName();
</script>

</body>
</html>

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

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

เหมือนกับ:

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

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

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

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

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

ในวิธีการวัตถุ นี่ หมายถึง วัตถุ
เพียงอย่างเดียว สิ่งนี้ หมายถึง วัตถุส่วนกลาง
ในฟังก์ชัน this หมายถึง global object
ในฟังก์ชัน ในโหมดเข้มงวด นี่ คือ unknown
ในเหตุการณ์ สิ่งนี้ หมายถึง องค์ประกอบ ที่ได้รับเหตุการณ์
วิธีการเช่น call(), apply() และ bind() สามารถอ้างอิง สิ่งนี้ ไปยัง วัตถุใดๆ

บันทึก

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

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

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

การเรียก JavaScript() วิธีการ

call() วิธีการที่กำหนดไว้ล่วงหน้า วิธีการจาวาสคริปต์

สามารถใช้เพื่อเรียกใช้ (โทร) วิธีการ โดยมีวัตถุเจ้าของเป็นอาร์กิวเมนต์ (พารามิเตอร์)

ด้วย call() วัตถุจะสามารถใช้เมธอดที่เป็นของวัตถุอื่นได้

ตัวอย่างนี้เรียกเมธอด fullName ของ person ที่ใช้งานอยู่ บุคคล1:

ตัวอย่าง

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

// This will return "John Doe":
  
  person.fullName.call(person1);

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>This example calls the fullName method of person, using it on person1:
</p>

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

<script>
const person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
const person1 = {
  firstName:"John",
  lastName: "Doe"
}
const person2 = {
  firstName:"Mary",
  lastName: "Doe"
}
document.getElementById("demo").innerHTML = person.fullName.call(person1); 
</script>

</body>
</html>

ตัวอย่างนี้เรียกเมธอด fullName ของ person ที่ใช้งานอยู่ บุคคล2:

ตัวอย่าง

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

// This will return "Mary Doe"
  person.fullName.call(person2);

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>This example calls the fullName method of person, using it on person2:</p>

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

<script>
const person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
const person1 = {
  firstName:"John",
  lastName: "Doe"
}
const person2 = {
  firstName:"Mary",
  lastName: "Doe"
}
document.getElementById("demo").innerHTML = person.fullName.call(person2); 
</script>

</body>
</html>

วิธีการโทร() พร้อมอาร์กิวเมนต์

call() วิธีการสามารถรับอาร์กิวเมนต์:

ตัวอย่าง

const person = {
    fullName: function(city, country) {
    return this.firstName + " " + this.lastName 
  + "," + city + "," + country;
    }
}

const person1 = {
  firstName:"John",
  lastName: "Doe"
}

person.fullName.call(person1, "Oslo", "Norway");

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>This example calls the fullName method of person, using it on person1:
</p>

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

<script>
const person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}

const person1 = {
  firstName:"John",
  lastName: "Doe"
}

const person2 = {
  firstName:"Mary",
  lastName: "Doe"
}

document.getElementById("demo").innerHTML = person.fullName.call(person1, "Oslo", "Norway"); 
</script>

</body>
</html>