ด้วยเมธอด bind() วัตถุสามารถยืมวิธีการจากวัตถุอื่นได้
ตัวอย่างด้านล่างสร้างวัตถุ 2 ชิ้น (บุคคลและสมาชิก)
วัตถุสมาชิกยืมวิธีการชื่อเต็มจากวัตถุบุคคล:
const person = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
const member = {
firstName:"Hege",
lastName: "Nilsen",
}
let fullName = person.fullName.bind(member);ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Function bind()</h1>
<p>This example creates 2 objects (person and member).</p>
<p>The member object borrows the fullname method from person:</p>
<p id="demo"></p>
<script>
const person = {
firstName:"John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const member = {
firstName:"Hege",
lastName: "Nilsen",
}
let fullName = person.fullName.bind(member);
document.getElementById("demo").innerHTML = fullName();
</script>
</body>
</html>
บางครั้งจำเป็นต้องใช้เมธอด bind() เพื่อป้องกันการสูญเสีย สิ่งนี้
ในตัวอย่างต่อไปนี้ วัตถุบุคคลมีวิธีการแสดงผล ในวิธีการแสดง this หมายถึงวัตถุบุคคล:
const person = {
firstName:"John",
lastName: "Doe",
display: function () {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
person.display();ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Function bind()</h1>
<p>In this example, the person object has a display method:</p>
<p id="demo"></p>
<script>
const person = {
firstName:"John",
lastName: "Doe",
display: function() {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
person.display();
</script>
</body>
</html>
เมื่อใช้ฟังก์ชันเป็นการโทรกลับ สิ่งนี้ จะหายไป
ตัวอย่างนี้จะพยายามแสดงชื่อบุคคลหลังจากผ่านไป 3 วินาที แต่จะแสดงเป็น unknown แทน:
const person = {
firstName:"John",
lastName: "Doe",
display: function () {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
setTimeout(person.display, 3000);ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Function bind()</h1>
<p>This example will try to display a person name after 3 seconds.</p>
<p id="demo"></p>
<script>
const person = {
firstName:"John",
lastName: "Doe",
display: function() {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
setTimeout(person.display, 3000);
</script>
</body>
</html>
bind() วิธีการแก้ปัญหานี้
ในตัวอย่างต่อไปนี้ bind() วิธีการที่ใช้ในการผูก person.display กับบุคคล
ตัวอย่างนี้จะแสดงชื่อบุคคลหลังจากผ่านไป 3 วินาที:
const person = {
firstName:"John",
lastName: "Doe",
display: function () {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
let display = person.display.bind(person);
setTimeout(display, 3000);ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Function bind()</h1>
<p>This example will display a person name after 3 seconds:</p>
<p id="demo"></p>
<script>
const person = {
firstName:"John",
lastName: "Doe",
display: function() {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
let display = person.display.bind(person);
setTimeout(display, 3000);
</script>
</body>
</html>
ใน JavaScript คำหลัก นี้ อ้างถึง วัตถุ
ซึ่งวัตถุขึ้นอยู่กับวิธีการเรียกใช้ นี้ (ใช้หรือเรียก)
คำหลัก this อ้างอิงถึงออบเจ็กต์ที่แตกต่างกัน ขึ้นอยู่กับวิธีการใช้:
ในวิธีการวัตถุ นี่ หมายถึง วัตถุ
เพียงอย่างเดียว สิ่งนี้ หมายถึง วัตถุส่วนกลาง
ในฟังก์ชัน this หมายถึง global object
ในฟังก์ชัน ในโหมดเข้มงวด นี่ คือ unknown
ในเหตุการณ์ สิ่งนี้ หมายถึง องค์ประกอบ ที่ได้รับเหตุการณ์
วิธีการเช่น call(), apply() และ bind() สามารถอ้างอิง สิ่งนี้ ไปยัง วัตถุใดๆ
this ไม่ใช่ตัวแปร มันเป็นคำสำคัญ คุณไม่สามารถเปลี่ยนค่าของ this
บทช่วยสอน JavaScript นี้