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

ปัจจุบัน 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
อัพเดพตัว Build Windows 10 แอพ Your Phone รับสายเรียกเข้า-โทรออกจาก สมาร์ทโฟนได้แล้ว
โดย chatee supasand อ 15 ต.ค. 2019 12:18 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
12
อ 15 ต.ค. 2019 12:18 pm โดย chatee supasand
ตัวอย่างการสร้าง Service odoo13 บน Ubuntu 16.04
โดย mindphp ส 12 ต.ค. 2019 1:35 am บอร์ด Linux - Web Server
0
68
ส 12 ต.ค. 2019 1:35 am โดย mindphp
MJupgrade Joomla 1.5.26 > 3.9 ขึ้น Error: Could not connect to MySQL server.
โดย เห็ด อินโมชั่น ศ 11 ต.ค. 2019 3:30 pm บอร์ด Joomla Development
3
50
ศ 11 ต.ค. 2019 5:14 pm โดย เห็ด อินโมชั่น
MJupgrade Joomla 1.5.26 > 3.9 ขึ้น Error: Could not connect to MySQL server.
โดย เห็ด อินโมชั่น ศ 11 ต.ค. 2019 4:59 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
7
1707
ส 12 ต.ค. 2019 3:35 am โดย mindphp
อยากทราบวิธีนับจำนวน id ที่ซ้ำกัน ครับ
โดย jamepiyawat ศ 11 ต.ค. 2019 5:06 pm บอร์ด SQL - Database
3
111
ศ 11 ต.ค. 2019 6:20 pm โดย jamepiyawat
การ Search ค้นหาข้อมูลของบอร์ด phpBB
โดย aninthana พฤ 10 ต.ค. 2019 6:46 pm บอร์ด Wordpress user Guide Knowledge
0
92
พฤ 10 ต.ค. 2019 6:46 pm โดย aninthana
ทำป้าย PopUp ด้วย Modal ใน Bootstrap เวอร์ชั่น 4
โดย jamepiyawat พฤ 10 ต.ค. 2019 5:20 pm บอร์ด Booststap Knowledge
0
100
พฤ 10 ต.ค. 2019 5:20 pm โดย jamepiyawat
ทำยังไงถึงจะไม่ให้แสดงเลข ID หน้า Alias ได้ครับ
โดย jamepiyawat พฤ 10 ต.ค. 2019 4:03 pm บอร์ด Joomla Development
1
37
พฤ 10 ต.ค. 2019 6:02 pm โดย tsukasaz
ทำไมผมถึงดึงข้อมูลชื่อหมวดหมู่ออกมาแสดงหน้าตั้งค่า module ไม่ได้ครับ
โดย jamepiyawat พฤ 10 ต.ค. 2019 3:47 pm บอร์ด Joomla Development
2
44
พฤ 10 ต.ค. 2019 6:36 pm โดย jamepiyawat
ตัวเลขด้านหน้าข้อความที่เราตั้ง Alias คืออะไรครับ
โดย jamepiyawat พฤ 10 ต.ค. 2019 11:36 am บอร์ด Joomla Development
5
95
พฤ 10 ต.ค. 2019 2:46 pm โดย mindphp
แก้ปัญหา Error Ignoring file '50unattended-upgrades.ucf-old' in directory บน Ubunto 16.04 ติดตั้ง apt-get
โดย mindphp พฤ 10 ต.ค. 2019 5:42 am บอร์ด Linux - Web Server
0
80
พฤ 10 ต.ค. 2019 5:42 am โดย mindphp
Q - สอบถามวิธี Upload file html ไปยัง web service โดยใช้คำสั่ง curl ใน PHP
โดย birdkritsna พ 09 ต.ค. 2019 3:42 pm บอร์ด Programming - PHP
6
113
พฤ 10 ต.ค. 2019 2:07 pm โดย birdkritsna
10 เเหล่งช๊อปปิ้งใรเชียงรายที่ต้องไปให้ได้
โดย nemo413 พ 09 ต.ค. 2019 1:04 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
96
พ 09 ต.ค. 2019 1:04 pm โดย nemo413
สอบถามครับ อยากได้ url ของลิงค์ ให้มาแสดงในช่อง ต้องทำยังไงครับ
โดย chatee supasand พ 09 ต.ค. 2019 12:22 pm บอร์ด Programming - C/C++ & java & Python
6
135
พ 09 ต.ค. 2019 1:41 pm โดย chatee supasand
Microsoft Word สามารถ แปลงไฟล์เสียง ให้เป็นข้อความได้แล้วใน Office 365
โดย chatee supasand พ 09 ต.ค. 2019 11:32 am บอร์ด Microsoft Office Knowledge & line & Etc
0
38
พ 09 ต.ค. 2019 11:32 am โดย chatee supasand
สอบถามการเขียนโค้ด กรอกข้อมูลหน้าแรก แล้วให้กดส่ง ไปยังหน้าที่สองครับผม
โดย Jakkrit Saengngoenon อ 08 ต.ค. 2019 1:40 pm บอร์ด Programming - PHP
1
63
อ 08 ต.ค. 2019 1:50 pm โดย mindphp
ขอสอบถามเกี่ยวกับ license ของ ฟอนต์ ไทยสารบรรณ (TH Sarabun PSK)
โดย Anonymous อ 08 ต.ค. 2019 8:03 am บอร์ด Programming - PHP
0
46
อ 08 ต.ค. 2019 8:03 am โดย บุคคลทั่วไป
การส่ง parameters ไปกับการ Request แบบ Get ด้วย curl
โดย mindphp จ 07 ต.ค. 2019 12:12 am บอร์ด PHP Knowledge
0
150
จ 07 ต.ค. 2019 12:12 am โดย mindphp
Q สอบถามลองเขียน php webservice ด้วย nuSoap แล้วขึ้น Error ครับ
โดย birdkritsna ส 05 ต.ค. 2019 5:37 pm บอร์ด Programming - PHP
10
245
พฤ 10 ต.ค. 2019 10:29 am โดย birdkritsna
ทำยังไงถึงปุ่มจะอยู่ระดับเดียวกันครับ
โดย jamepiyawat ส 05 ต.ค. 2019 3:08 pm บอร์ด HTML CSS
6
187
ส 05 ต.ค. 2019 4:48 pm โดย jamepiyawat