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

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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ไม่สามารถสมัครสมาชิก Mindphp ได้
โดย bolue พ 10 มิ.ย. 2020 2:03 pm บอร์ด MindPHP News & Feedback
1
99
พ 10 มิ.ย. 2020 2:14 pm โดย mindphp
สิ่งที่เกิดขึ้นของ pgAdmin 4 v4.22
โดย bolue พ 10 มิ.ย. 2020 10:01 am บอร์ด Python Knowledge
0
74
พ 10 มิ.ย. 2020 10:01 am โดย bolue
netbeans เชื่อมกับ gitlab ไม่ได้
โดย bolue อ 09 มิ.ย. 2020 6:36 pm บอร์ด Programming - C/C++ & java & Python
1
112
พ 10 มิ.ย. 2020 10:04 am โดย bolue
การเก็บรักษาเอกสารทางบัญชี
โดย natthanit.r2538 อ 09 มิ.ย. 2020 6:32 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
72
อ 09 มิ.ย. 2020 6:32 pm โดย natthanit.r2538
เอกสารที่ใช้ประกอบในการลงบัญชี
โดย natthanit.r2538 อ 09 มิ.ย. 2020 4:48 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
1
67
อ 07 ก.ค. 2020 11:12 am โดย thatsawan
วิธีการ ลบตารางออกจากฐานข้อมูล Postgres ด้วย Module psycopg2
โดย bolue อ 09 มิ.ย. 2020 3:44 pm บอร์ด Python Knowledge
0
60
อ 09 มิ.ย. 2020 3:44 pm โดย bolue
วิธีการ สร้างตารางข้อมูลในฐานข้อมูล Postgres ด้วย Module psycopg2
โดย bolue อ 09 มิ.ย. 2020 3:21 pm บอร์ด Python Knowledge
0
126
อ 09 มิ.ย. 2020 3:21 pm โดย bolue
สอบถาม ผมจะทำ wedhook Messenger ของ fackbook ทำตามวิธี ของ Getting Started แล้วไม่ได้ครับ
โดย jirawoot อ 09 มิ.ย. 2020 2:39 pm บอร์ด Programming - C/C++ & java & Python
0
99
อ 09 มิ.ย. 2020 2:39 pm โดย jirawoot
วิธีการ ลบข้อมูลออกจากฐานข้อมูล Postgres ด้วย Module psycopg2
โดย bolue อ 09 มิ.ย. 2020 1:49 pm บอร์ด Python Knowledge
0
68
อ 09 มิ.ย. 2020 1:49 pm โดย bolue
วิธีการ แก้ไขข้อมูลในฐานข้อมูล Postgres ด้วย Module psycopg2
โดย bolue อ 09 มิ.ย. 2020 1:39 pm บอร์ด Python Knowledge
0
94
อ 09 มิ.ย. 2020 1:39 pm โดย bolue
วิธีการ เพิ่มข้อมูลลงฐานข้อมูล Postgres ด้วย Module psycopg2
โดย bolue อ 09 มิ.ย. 2020 1:30 pm บอร์ด Python Knowledge
0
69
อ 09 มิ.ย. 2020 1:30 pm โดย bolue
ngrok คืออะไร - ทำ Localhost เครื่องของผู้พัฒนาอยู่ในเครื่องสามารถ online บน internet ได้
โดย jirawoot อ 09 มิ.ย. 2020 11:37 am บอร์ด Python Knowledge
0
123
อ 09 มิ.ย. 2020 11:37 am โดย jirawoot
การบัญชีต้นทุน กับการบัญชีบัญชีบริหารเกี่ยวข้องกันอย่างไร
โดย natthanit.r2538 จ 08 มิ.ย. 2020 4:50 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
64
จ 08 มิ.ย. 2020 4:50 pm โดย natthanit.r2538
หนังสือรับรองหักภาษี ณ ที่จ่าย มีความสำคัญอย่างไร
โดย natthanit.r2538 จ 08 มิ.ย. 2020 3:13 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
69
จ 08 มิ.ย. 2020 3:13 pm โดย natthanit.r2538
วิธีการ ทำตาราง ด้วย bootstrap เพื่อความสวยงาม ทำตารางย่อตามหน้าจอได้
โดย bolue จ 08 มิ.ย. 2020 10:56 am บอร์ด Booststap Knowledge
0
143
จ 08 มิ.ย. 2020 10:56 am โดย bolue
ส่วนสำคัญของใบกำกับภาษี
โดย natthanit.r2538 ส 06 มิ.ย. 2020 5:56 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
94
ส 06 มิ.ย. 2020 5:56 pm โดย natthanit.r2538
วิธีการ ไล่สีพื้นหลัง โดย css
โดย bolue ส 06 มิ.ย. 2020 5:03 pm บอร์ด CSS Knowledge
1
120
จ 08 มิ.ย. 2020 1:52 pm โดย LEG
วิธีการสร้าง nav-tabs โดย bootstrap
โดย bolue ส 06 มิ.ย. 2020 4:52 pm บอร์ด Booststap Knowledge
0
116
ส 06 มิ.ย. 2020 4:52 pm โดย bolue
วิธีกดภาพ เล็กด้านข้าง แล้วโชว์ภาพใหญ่ ในพื้นที่ดำๆ โดยใช้ javascript
โดย bolue ส 06 มิ.ย. 2020 4:24 pm บอร์ด Jquery & Ajax Knowledge
0
123
ส 06 มิ.ย. 2020 4:24 pm โดย bolue
กดภาพเล็กๆ ด้านข้าง แล้วโชว์ภาพใหญ่ ในพื้นที่ดำๆ ทำยังไง
โดย bolue ส 06 มิ.ย. 2020 11:20 am บอร์ด JavaScript & Jquery Ajax
2
170
จ 08 มิ.ย. 2020 1:52 pm โดย LEG