จาวาสคริปต์นี้

สารบัญ

    แสดงสารบัญ

ตัวอย่าง

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

สิ่งนี้ในวิธีการ

เมื่อใช้ในวิธีการวัตถุ นี่ หมายถึง วัตถุ

ในตัวอย่างที่ด้านบนของหน้านี้ this หมายถึงอ็อบเจ็กต์ person

เนื่องจากวิธีการ fullName เป็นวิธีการของวัตถุ บุคคล

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>

สิ่งนี้ คนเดียว

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

เนื่องจาก this กำลังทำงานในขอบเขตส่วนกลาง

ในหน้าต่างเบราว์เซอร์ วัตถุส่วนกลางคือ [หน้าต่างวัตถุ]:

ตัวอย่าง

let x = this;

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

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In this example, <b>this</b> refers to the window object:</p>

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

<script>
let x = this;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

ใน โหมดเข้มงวด เมื่อใช้เพียงอย่างเดียว สิ่งนี้ ยังอ้างถึง วัตถุส่วนกลาง:

ตัวอย่าง

 "use strict";
let x = this;

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

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In this example, <b>this</b> refers to the window object:</p>
<p id="demo"></p>

<script>
"use strict";
let x = this;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

สิ่งนี้ในฟังก์ชั่น (ค่าเริ่มต้น)

ในฟังก์ชัน วัตถุสากลเป็นการเชื่อมโยงเริ่มต้นสำหรับ นี้

ในหน้าต่างเบราว์เซอร์ วัตถุส่วนกลางคือ [หน้าต่างวัตถุ]:

ตัวอย่าง

function myFunction() {
    return this;
}

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

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In this example, <b>this</b> refers to the the window object:</p>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction();

function myFunction() {
  return this;
}
</script>

</body>
</html>

สิ่งนี้ในฟังก์ชัน (เข้มงวด)

JavaScript โหมดเข้มงวด ไม่อนุญาตให้มีการเชื่อมโยงเริ่มต้น

ดังนั้นเมื่อใช้ในฟังก์ชันในโหมดเข้มงวด สิ่งนี้ จะเป็น unknown

ตัวอย่าง

"use strict";
function myFunction() {
    return this;
}

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

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In a function, by default, <b>this</b> refers to the global object.</p>

<p>Strict mode does not allow default binding, so <b>this</b> is:</p>
<p id="demo"></p>

<script>
"use strict";
document.getElementById("demo").innerHTML = myFunction();

function myFunction() {
  return this;
}
</script>

</body>
</html>

สิ่งนี้ในตัวจัดการเหตุการณ์

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

ตัวอย่าง

 <button onclick="this.style.display='none'">
  Click to 
  Remove Me!
</button>

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

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<button onclick="this.style.display='none'">Click to Remove Me!</button>

</body>
</html>

การเชื่อมโยงวิธีการวัตถุ

ในตัวอย่างเหล่านี้ นี่ คือ วัตถุบุคคล:

ตัวอย่าง

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

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

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In this example, <b>this</b> refers to the <b>person object</b>.</p>

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

<script>
// Create an object:
const person = {
  firstName  : "John",
  lastName   : "Doe",
  id     : 5566,
  myFunction : function() {
    return this;
  }
};

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

</body>
</html>

ตัวอย่าง

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>

กล่าวคือ this.firstName เป็นคุณสมบัติ firstName ของ this (อ็อบเจ็กต์บุคคล)

การเชื่อมโยงฟังก์ชันที่ชัดเจน

วิธีการ call() และ apply() เป็นวิธีการ JavaScript ที่กำหนดไว้ล่วงหน้า

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

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

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

ฟังก์ชั่น Apply() วิธีการ

ฟังก์ชั่นผูก() วิธีการ

ตัวอย่างด้านล่างเรียก person1.fullName โดยมี person2 เป็นอาร์กิวเมนต์ สิ่งนี้ หมายถึง person2 แม้ว่า fullName จะเป็นวิธีการของ person1:

ตัวอย่าง

const person1 = {
    fullName: function() {
      return this.firstName + " " + this.lastName;
    }
}

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

// Return "John Doe":
person1.fullName.call(person2);

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

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example <strong>this</strong> refers to person2, even if it is a method of person1:</p>

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

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

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

let x = person1.fullName.call(person2); 
document.getElementById("demo").innerHTML = x; 
</script>

</body>
</html>

การยืมฟังก์ชั่น

ด้วยเมธอด 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>

สิ่งนี้ ลำดับความสำคัญ

เพื่อกำหนดว่าวัตถุใดที่ สิ่งนี้ อ้างถึง ใช้ลำดับความสำคัญต่อไปนี้

Precedence

วัตถุ

1

ผูก()

2

ใช้() และโทร()

3

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

4

ขอบเขตทั่วโลก

นี่อยู่ในฟังก์ชันที่ถูกเรียกโดยใช้bind()หรือไม่?

นี่อยู่ในฟังก์ชันที่ถูกเรียกใช้โดยใช้ Apply() หรือไม่

นี่อยู่ในฟังก์ชันที่ถูกเรียกใช้โดยใช้ call() หรือไม่

นี่อยู่ในฟังก์ชันวัตถุ (เมธอด) หรือไม่ <p>เป็น สิ่งนี้ ในฟังก์ชันในขอบเขตส่วนกลาง