ฟังก์ชั่นลูกศรถูกนำมาใช้ใน ES6
ฟังก์ชันลูกศรช่วยให้เราเขียนไวยากรณ์ของฟังก์ชันที่สั้นลงได้:
let myFunction = (a, b) => a * b;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>
<p>This example shows the syntax of an Arrow Function, and how to use it.</p>
<p id="demo"></p>
<script>
let myFunction = (a, b) => a * b;
document.getElementById("demo").innerHTML = myFunction(4, 5);
</script>
</body>
</html>
hello = function() {
return "Hello World!";
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>This example shows the syntax of a function, without the use of arrow function syntax.</p>
<p id="demo"></p>
<script>
let hello = "";
hello = function() {
return "Hello World!";
}
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
hello = () => {
return "Hello World!";
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>
<p>This example shows the syntax of an Arrow Function, and how to use it.</p>
<p id="demo"></p>
<script>
let hello = "";
hello = () => {
return "Hello World!";
}
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
มันสั้นลง! ถ้าฟังก์ชันมีเพียงหนึ่งคำสั่งและคำสั่ง ส่งกลับค่า คุณสามารถลบวงเล็บ และ the ได้ return คีย์เวิร์ด:
hello = () => "Hello World!";ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>
<p>This example shows an Arrow Function without the brackets or the return keyword.</p>
<p id="demo"></p>
<script>
let hello = "";
hello = () => "Hello World!";
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
หมายเหตุ: ใช้งานได้เฉพาะในกรณีที่ฟังก์ชันมีเพียงฟังก์ชันเดียวเท่านั้น คำแถลง.
หากคุณมีพารามิเตอร์ ให้ส่งค่าเหล่านั้นภายในวงเล็บ:
hello = (val) => "Hello " + val;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>
<p>This example shows an Arrow Function with a parameter.</p>
<p id="demo"></p>
<script>
let hello = "";
hello = (val) => "Hello " + val;
document.getElementById("demo").innerHTML = hello("Universe!");
</script>
</body>
</html>
ที่จริงแล้ว หากคุณมีพารามิเตอร์เพียงตัวเดียว คุณสามารถข้ามวงเล็บได้เช่นกัน:
hello = val => "Hello " + val;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>
<p>This example shows that if you have only one parameter in an Arrow Function, you can skip the parentheses.</p>
<p id="demo"></p>
<script>
let hello = "";
hello = val => "Hello " + val;
document.getElementById("demo").innerHTML = hello("Universe!");
</script>
</body>
</html>
สิ่งนี้ ล่ะ?การจัดการ this ก็มีความแตกต่างในฟังก์ชันลูกศรเมื่อเทียบกับฟังก์ชันปกติ ฟังก์ชั่น.
กล่าวโดยสรุปก็คือ ด้วยฟังก์ชันลูกศร จะไม่มีการเชื่อมโยงกัน <รหัส class="w3-codespan">นี้.
ในฟังก์ชันปกติ คีย์เวิร์ด this เป็นตัวแทนของอ็อบเจกต์ที่เรียกว่า the ซึ่งอาจเป็นหน้าต่าง เอกสาร ปุ่ม หรืออะไรก็ตาม
ด้วยฟังก์ชันลูกศร คีย์เวิร์ด this always แสดงถึง คัดค้านสิ่งนั้น กำหนดฟังก์ชั่นลูกศร
ให้เราดูสองตัวอย่างเพื่อทำความเข้าใจความแตกต่าง
ทั้งสองตัวอย่างเรียกเมธอดสองครั้ง ครั้งแรกเมื่อเพจโหลด และอีกครั้งหนึ่ง เมื่อผู้ใช้คลิกปุ่ม
ตัวอย่างแรกใช้ฟังก์ชันปกติ และตัวอย่างที่สองใช้ an ฟังก์ชั่นลูกศร
ผลลัพธ์แสดงให้เห็นว่าตัวอย่างแรกส่งคืนวัตถุสองรายการที่แตกต่างกัน (หน้าต่างและปุ่ม) และ ตัวอย่างที่สองส่งคืนวัตถุหน้าต่างสองครั้งเนื่องจากวัตถุหน้าต่างเป็น "เจ้าของ" ของฟังก์ชัน
ด้วยฟังก์ชันปกติ นี่ แสดงถึง วัตถุที่ เรียกใช้ ฟังก์ชัน:
// Regular Function:
hello = function() {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript "this"</h1>
<p>This example demonstrate that in a regular function, the "this" keyword represents different objects depending on how the function was called.</p>
<p>Click the button to execute the "hello" function again, and you will see that this time "this" represents the button object.</p>
<button id="btn">Click Me!</button>
<p id="demo"></p>
<script>
let hello = "";
hello = function() {
document.getElementById("demo").innerHTML += this;
}
//The window object calls the function:
window.addEventListener("load", hello);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);
</script>
</body>
</html>
ด้วยฟังก์ชันลูกศร นี่ แสดงถึง เจ้าของ ของฟังก์ชัน:
// Arrow Function:
hello = () => {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript "this"</h1>
<p>This example demonstrate that in Arrow Functions, the "this" keyword represents the object that owns the function, no matter who calls the function.</p>
<p>Click the button to execute the "hello" function again, and you will see that "this" still represents the window object.</p>
<button id="btn">Click Me!</button>
<p id="demo"></p>
<script>
let hello = "";
hello = () => {
document.getElementById("demo").innerHTML += this;
}
//The window object calls the function:
window.addEventListener("load", hello);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);
</script>
</body>
</html>
จำความแตกต่างเหล่านี้เมื่อคุณทำงานกับฟังก์ชันต่างๆ บางครั้ง พฤติกรรมของฟังก์ชันปกติคือสิ่งที่คุณต้องการ หากไม่ใช่ ให้ใช้ฟังก์ชันลูกศร
ตารางต่อไปนี้กำหนดเบราว์เซอร์เวอร์ชันแรกที่รองรับอย่างเต็มที่ ฟังก์ชั่นลูกศรใน JavaScript:
| Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
| Sep, 2015 | Jul, 2015 | May, 2013 | Sep, 2016 | Sep, 2015 |