ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

ปัจจุบัน javascript เข้ามามีบทบาทในการเขียนเว็บมาก มีการออก Framework  มากมายให้มาได้ลองเล่นกัน และ javascript เองก็มีการอัพเดตไปเรื่อยๆ ซึ่งแน่นอนทำให้ให้มี feature ใหม่ๆมากมายเกิดขึ้นเพื่อให้เขียนได้สั้นลงและแก้ปัญหาที่เกิดขึ้นในเวลาที่ผ่านมา

บทความนี้อธิบายความแตกต่างระหว่างฟังก์ชั่นปกติและ  arrow functions

arrow functions เป็น feature ใหม่ที่นำมาใช้ใน JavaScript ES6 (ES2015) - เป็นการเขียนที่ฟังก์ชั่นที่รัดกุมใน JavaScript   ซึ่งทั้งสองฟังก์ชั่นไม่ว่าจะเป็นฟังก์ชันปกติและ arrow functions เป็นการเขียนที่มีกรทำงานในลักษณะที่คล้ายกัน แต่ก็มีความแตกต่างที่น่าสนใจของทั้งสองรูปแบบฟังก์ชัน 

การเขียนฟังก์ชันแบบปกติเรามักจะเขียนแบบนี้

let x = function function_name(parameters){ 
// body of the function 
}; 

เช่น ดังนี้ 

let square = function(x){ 
return (x*x); 
}; 
console.log(sqaure(9)); 

ผลลัพธ์ที่ได้

output
ผลลัพธ์ของฟังก์ชันปกติ

ส่วนการเขียน ฟังก์ชันแบบ arrow functions

let x = (parameters) => { 
	// body of the function 
}; 

เช่น 

var square = (x) => { 
	return (x*x); 
}; 
console.log(square(9)); 

ผลลัพธ์ที่ได้

output
ผลลัพธ์ของฟังก์ชัน arrow functions

จะเห็นว่ามีผลลัพธ์เหมื่อนกัน แต่การเขียนที่แตกต่าง รูปแบบ arrow function ค่อนข้างจะกระชับกว่า 

แต่มีข้อแต่ต่างนิดหน่อยตรงที่เมื่อเราใช้ this ภาษา javascript ความหมายของ this เปลี่ยนไปได้ง่ายเกินไป ซึ่งเจ้าตัวฟังก์ชั่นลูกศรนี้มาช่วยเราได้มาก ดูได้ในตัวอย่างต่อไปนี้

function Person(age) {
  this.age = age;
  this.growOld = function() { this.age++; }
}
var person = new Person(1);
setTimeout(person.growOld,1000);
setTimeout(function() { console.log(person.age); },2000);
// 1, should have been 2

ผลลัพธ์ที่ต้องการคือ 2 แต่เมื่อนำ code ไป execute กลับได้คำตอบเป็น 1 เพราะ this ใน function Person กับ this ใน growOld เป็นคนละตัวกัน ซึ่ง arrow function เข้ามาแก้ไข้ในส่วนนี้

function Person(age) {
  this.age = age;
  this.growOld = () => { this.age++; }
}
var person = new Person(1);
setTimeout(person.growOld,1000);
setTimeout(function() { console.log(person.age); },2000);
// 2

จะเห็นว่า this ภายใน function กับ this ผ่านใน function growOld จะมีค่าเท่ากัน 

 

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : JAVASCRIPT

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
10 สุดยอดสตรีทฟู้ดในแอฟริกาตะวันตก
โดย Anonymous อ 24 พฤษภาคม 2020 9:58 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
5
อ 24 พฤษภาคม 2020 9:58 pm โดย บุคคลทั่วไป
ข้อมูลสำหรับทำระบบ
โดย mindphp อ 24 พฤษภาคม 2020 4:07 am บอร์ด มารียา ซีฟู้ดส์ (Main)
0
3
อ 24 พฤษภาคม 2020 4:07 am โดย mindphp
อัพเดดความคืบหน้า / Progress - มารียา ซีฟู้ดส์
โดย mindphp อ 24 พฤษภาคม 2020 4:07 am บอร์ด มารียา ซีฟู้ดส์ (Main)
0
3
อ 24 พฤษภาคม 2020 4:07 am โดย mindphp
อัพเดด Template เว็บไซต์ FDD (V2)
โดย mindphp อ 24 พฤษภาคม 2020 3:51 am บอร์ด FDD (Main)
0
1
อ 24 พฤษภาคม 2020 3:51 am โดย mindphp
R - ปรับกราฟฟิก ของเว็บ FDD
โดย mindphp อ 24 พฤษภาคม 2020 3:50 am บอร์ด FDD (Main)
0
2
อ 24 พฤษภาคม 2020 3:50 am โดย mindphp
ความคืบหน้า / Progress
โดย mindphp อ 24 พฤษภาคม 2020 3:46 am บอร์ด FDD (Main)
0
1
อ 24 พฤษภาคม 2020 3:46 am โดย mindphp
VDO - SP Page builder
โดย numtan5839 ศ 22 พฤษภาคม 2020 6:27 pm บอร์ด SP Page Builder Thai Edition - Manual & VDO & เทคนิคการใช้งาน
1
7
ศ 22 พฤษภาคม 2020 7:00 pm โดย mindphp
วิธีการใช้ Google Tasks แอพจัดการบันทึกสิ่งที่ต้องทำ
โดย sirirat ศ 22 พฤษภาคม 2020 11:04 am บอร์ด Share Knowledge
0
35
ศ 22 พฤษภาคม 2020 11:04 am โดย sirirat
งานประจำวันที่ 22 พฤษภาคม 2563
โดย sirirat ศ 22 พฤษภาคม 2020 10:10 am บอร์ด M102 - ศิริรัตน์ ทิพย์น้อย
1
15
ศ 22 พฤษภาคม 2020 11:22 am โดย numtan5839
สรุปการเรียนรู้ประจำวัน 21/05/63
โดย sirirat ศ 22 พฤษภาคม 2020 10:08 am บอร์ด M102 - ศิริรัตน์ ทิพย์น้อย
0
2
ศ 22 พฤษภาคม 2020 10:08 am โดย sirirat
รายงานความคืบหน้า / Process
โดย mindphp ศ 22 พฤษภาคม 2020 1:07 am บอร์ด SP Page Builder Thai Edition (Main)
1
3
ศ 22 พฤษภาคม 2020 1:34 am โดย mindphp
ส่ง site map ให้ google แต่ไม่โชว์ในเมนูบนเว็บเรา จะมีผลอะไรกับเว็บไหมครับ
โดย toonytoony2004 พฤ 21 พฤษภาคม 2020 10:17 pm บอร์ด Joomla Development
6
64
ส 23 พฤษภาคม 2020 10:56 pm โดย toonytoony2004
B - เวลาของบอร์ดไม่ตรงเวลาไทย
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:19 pm บอร์ด Odoojob.com - Tester
0
1
พฤ 21 พฤษภาคม 2020 5:19 pm โดย thatsawan
B - ข้อความแนะนำตัว ของผู้สมัครไม่แสดงใน บริษัทที่เปิดรับ
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:18 pm บอร์ด Odoojob.com - Tester
0
1
พฤ 21 พฤษภาคม 2020 5:18 pm โดย thatsawan
R - [email Formart-หาคน] เเจ้งเมื่อมีคนสมัครงานใน Odoojob
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:12 pm บอร์ด Odoojob.com - Manual & Content
0
1
พฤ 21 พฤษภาคม 2020 5:12 pm โดย thatsawan
B - บริษัทหาคน ต้องการเปลี่ยน Email รับสมัครงานหาทางเข้าไม่เจอ
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:07 pm บอร์ด Odoojob.com - Tester
0
1
พฤ 21 พฤษภาคม 2020 5:07 pm โดย thatsawan
R - [email Formart-หางาน] หลังสมัครงาน บน Odoojob
โดย thatsawan พฤ 21 พฤษภาคม 2020 4:57 pm บอร์ด Odoojob.com - Manual & Content
0
5
พฤ 21 พฤษภาคม 2020 4:57 pm โดย thatsawan
ทำไมสมัครสมาชิกแล้วเข้าสู่ระบบไม่ได้??
โดย sirirat พฤ 21 พฤษภาคม 2020 4:56 pm บอร์ด MindPHP News & Feedback
0
35
พฤ 21 พฤษภาคม 2020 4:56 pm โดย sirirat
B - ข้อมูลผู้สมัครที่กรอกใน mdsoft ไม่ติดมาด้วย
โดย thatsawan พฤ 21 พฤษภาคม 2020 4:51 pm บอร์ด Odoojob.com - Tester
0
1
พฤ 21 พฤษภาคม 2020 4:51 pm โดย thatsawan
B - คลิกเมนูแผงควบคุมเเล้ว เข้าไม่ได้ เด้งกลับมา index
โดย thatsawan พฤ 21 พฤษภาคม 2020 4:47 pm บอร์ด Odoojob.com - Tester
0
1
พฤ 21 พฤษภาคม 2020 4:47 pm โดย thatsawan