โค้ดภายใน function ของ JavaScript จะดำเนินการเมื่อมี "บางสิ่ง" เรียกใช้งาน
รหัสภายในฟังก์ชันจะไม่ถูกดำเนินการเมื่อมีการ กำหนด ฟังก์ชัน
รหัสภายในฟังก์ชันจะถูกดำเนินการเมื่อมีการ เรียกใช้ฟังก์ชัน
เป็นเรื่องปกติที่จะใช้คำว่า "เรียกใช้ฟังก์ชัน" แทน "เรียกใช้ ฟังก์ชั่น"
เป็นเรื่องปกติที่จะพูดว่า "เรียกใช้ฟังก์ชัน", "เริ่มฟังก์ชัน" หรือ "ดำเนินการฟังก์ชัน"
ในบทช่วยสอนนี้ เราจะใช้ เรียกใช้ เนื่องจากก ฟังก์ชัน JavaScript สามารถเรียกใช้ได้โดยไม่ต้องถูกเรียก
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2); //
Will return 20ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>The global function (myFunction) returns the product of the arguments (a ,b):</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(10, 2);
</script>
</body>
</html>
ฟังก์ชั่นข้างต้นไม่ได้เป็นของวัตถุใดๆ แต่ในจาวาสคริปต์นั่น จะเป็นออบเจ็กต์โกลบอลเริ่มต้นเสมอ
ใน HTML วัตถุส่วนกลางเริ่มต้นคือหน้า HTML เอง ดังนั้นฟังก์ชันที่อยู่ด้านบน "เป็นของ" หน้า HTML
ในเบราว์เซอร์ วัตถุหน้าคือหน้าต่างเบราว์เซอร์ ฟังก์ชั่นข้างต้น กลายเป็นฟังก์ชันหน้าต่างโดยอัตโนมัติ
นี่เป็นวิธีทั่วไปในการเรียกใช้ฟังก์ชัน JavaScript แต่ไม่ใช่แนวทางปฏิบัติที่ดีนัก
ตัวแปรโกลบอล เมธอด หรือฟังก์ชันสามารถสร้างความขัดแย้งของชื่อและจุดบกพร่องในอ็อบเจ็กต์โกลบอลได้อย่างง่ายดาย
myFunction() และ window.myFunction() เป็นฟังก์ชันเดียวกัน:
function myFunction(a, b) {
return a * b;
}
window.myFunction(10, 2); // Will also return 20ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Global functions automatically become window methods. Invoking myFunction() is the same as invoking window.myFunction().</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = window.myFunction(10, 2);
</script>
</body>
</html>
ใน JavaScript คำหลัก นี้ อ้างถึง วัตถุ
ซึ่งวัตถุขึ้นอยู่กับวิธีการเรียกใช้ นี้ (ใช้หรือเรียก)
คำหลัก this อ้างอิงถึงออบเจ็กต์ที่แตกต่างกัน ขึ้นอยู่กับวิธีการใช้:
ในวิธีการวัตถุ นี่ หมายถึง วัตถุ
เพียงอย่างเดียว สิ่งนี้ หมายถึง วัตถุส่วนกลาง
ในฟังก์ชัน this หมายถึง global object
ในฟังก์ชัน ในโหมดเข้มงวด นี่ คือ unknown
ในเหตุการณ์ สิ่งนี้ หมายถึง องค์ประกอบ ที่ได้รับเหตุการณ์
วิธีการเช่น call(), apply() และ bind() สามารถอ้างอิง สิ่งนี้ ไปยัง วัตถุใดๆ
this ไม่ใช่ตัวแปร มันเป็นคำสำคัญ คุณไม่สามารถเปลี่ยนค่าของ this
บทช่วยสอน JavaScript นี้
เมื่อฟังก์ชันถูกเรียกใช้โดยไม่มีวัตถุเจ้าของ ค่าของ this กลายเป็นวัตถุระดับโลก
ในเว็บเบราว์เซอร์ วัตถุส่วนกลางคือหน้าต่างเบราว์เซอร์
ตัวอย่างนี้ส่งคืนวัตถุหน้าต่างเป็นค่าของ this:
let x = myFunction();
// x will be the window object
function myFunction() {
return this;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>In HTML the value of <b>this</b>, in a global function, is the window object.</p>
<p id="demo"></p>
<script>
let x = myFunction();
function myFunction() {
return this;
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
การเรียกใช้ฟังก์ชันเป็นฟังก์ชันส่วนกลางจะทำให้ค่าของ สิ่งนี้ เป็นวัตถุส่วนกลาง
การใช้วัตถุหน้าต่างเป็นตัวแปรอาจทำให้โปรแกรมของคุณเสียหายได้ง่าย
ใน JavaScript คุณสามารถกำหนดฟังก์ชันเป็นวิธีการของวัตถุได้
ตัวอย่างต่อไปนี้สร้างวัตถุ (myObject) โดยมีสอง คุณสมบัติ (ชื่อ และ นามสกุล) และ วิธีการ (ชื่อเต็ม):
const myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // Will return "John Doe"ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>myObject.fullName() will return John Doe:</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>
วิธีการ fullName เป็นฟังก์ชัน ฟังก์ชั่นเป็นของ วัตถุ. myObject เป็นเจ้าของฟังก์ชัน
สิ่งที่เรียกว่า this นั้นเป็น object ที่ "เป็นเจ้าของ" รหัส JavaScript ในกรณีนี้ ค่าของ this คือ myObject
ทดสอบเลย! เปลี่ยนวิธี fullName เพื่อส่งคืนค่าของ this:
const myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this;
}
}
// This will return [object Object] (the owner object)
myObject.fullName();
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>The value of <b>this</b>, in an object method, is the owner object.</p>
<p id="demo"></p>
<script>
const myObject = {
firstName:"John",
lastName: "Doe",
fullName: function() {
return this;
}
}
document.getElementById("demo").innerHTML = myObject.fullName();
</script>
</body>
</html>
การเรียกใช้ฟังก์ชันเป็นวิธีอ็อบเจ็กต์ ทำให้ค่าของ this เพื่อเป็นวัตถุนั้นเอง
หากการเรียกใช้ฟังก์ชันนำหน้าด้วยคีย์เวิร์ด new มันเป็นการเรียกใช้คอนสตรัคเตอร์
ดูเหมือนว่าคุณสร้างฟังก์ชันใหม่ แต่เนื่องจากฟังก์ชัน JavaScript เป็นเช่นนั้น วัตถุที่คุณสร้างวัตถุใหม่จริง ๆ :
// This is a function constructor:
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
// This creates a new object
const myObj = new myFunction("John", "Doe");
// This will return "John"
myObj.firstName;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>In this example, myFunction is a function constructor:</p>
<p id="demo"></p>
<script>
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
const myObj = new myFunction("John","Doe")
document.getElementById("demo").innerHTML = myObj.firstName;
</script>
</body>
</html>
การเรียกใช้คอนสตรัคเตอร์จะสร้างวัตถุใหม่ วัตถุใหม่สืบทอด คุณสมบัติและวิธีการจากตัวสร้าง
คำหลัก this ในตัวสร้างไม่มีค่า
ค่าของ this จะเป็นออบเจ็กต์ใหม่ที่สร้างขึ้นเมื่อมีการเรียกใช้ฟังก์ชัน