13Jan, 2021
Language blog :
Thai
Share blog : 
13 January, 2021
Thai

JS class syntax

By

4 mins read
JS class syntax

เชื่อว่าหลายๆคนที่เขียน javascript กันมา คงต้องเคยสงสัยกันบ้าง ว่า class ที่อยู่ใน js เนี่ย มันคืออะไร แล้วมันมีหน้าที่ต่างกับการประกาศ function อย่างไร? 

เรามารู้จักกับ class ให้มากขึ้นกันดีกว่า class เปรียบเสมือนกับ blueprint หรือแบบพิมพ์เขียว ที่สามารถนำไปสร้างเป็นสิ่งของ( object ) ตาม  blueprint หรือแบบพิมพ์เขียว( class ) นั้นๆได้ โดยภายใน class เรานั้น จะมีการตั้งค่าเริ่มต้นหรือ constructor เพื่อให้เป็นการทำงานเริ่มต้นของการสร้าง object หนึ่ง หน้าตาในการเรียกใช้งานจะคล้ายๆกับ การประกาศเรียกใช้ ฟังชันท์เลย โดยมีการเพิ่ม new ต่อหน้า เช่น 
class example { }  // สำหรับการประกาศ classconst objectExample = new example()  // สำหรับการประกาศเรียกใช้งานโดยการทำงานของ class นั้นเมื่อมีการเรียก  การสร้าง class ขึ้น ตัว class จะมองหา constructor ภายใน class เป็นตัวแรกเสมอ 

พูดให้เข้าใจง่ายๆ คือ หากเราต้องการส่ง parameter ให้กับ class เหมือนกับ function ก็เพียงต้องมี constructor ใน class เสมอ ดังตัวอย่างนี้

class exampleWithConstructor {  // การประกาศ class โดยมี constructor     constructor(param) {         this.param = param;        } } // ประกาศการใช้งาน class โดยส่ง param const objectExampleWithConstructor = exampleWithConstructor('test') 

และเมื่อเราลอง console.log( objectExampleWithConstructor ) ออกมาดูจะเห็นว่า

สิ่งที่ออกมามันคือ Object type ที่มี attributes ตามใน constructor ที่เราสร้่างไว้และมี prototype ( __proto__ ) เป็น class 
ที่เราสร้างไว้ โดยถ้าเราสร้าง Method ไว้ภายใน object ด้วยเมื่อลอง console.log ดูอีกที ภายใน prototype ( __proto__ ) ก็จะมี method ที่เราเพิ่งสร้างไว้ เช่น

class exampleWithConstructor {  // การประกาศ class โดยมี constructor    constructor(param){      this.param = param;        }}
exampleMethod() {  // สร้าง method ใน class    console.log('enter method')}
const objectExampleWithConstructor = exampleWithConstructor('test') 
objectExampleWithConstructor.exampleMethod()  // เรียกใช้งาน method ที่เราสร้างไว้

โดยเมื่อเรานำมาเทียบกับ การประกาศ function ปกติๆ เราจะไม่สามารถมาสร้าง โครงสร้างอะไรแบบนี้ได้เลย และ class ยังมีลูกเล่นให้ใช้งานอีกมากมาย เช่น การ inherit การ binding โดยสามารถนำมาสร้างโครงสร้างของ Object ที่เราต้องการได้ตามใจชอบ

อย่างที่เรารู้ๆกันดีกว่า javascript ทุกๆอย่าง คือ Object ไม่ว่าจะเป็น ค่า type Null หรือ type Array ที่เราใช้กัน จริงๆแล้วนั้น เป็น object base ของ JS ที่ built-in ขึ้นมา สามารถทดสอบได้โดยการ console.log(typeof Array กับ Null ) ได้เลยครับ

Written by
Senna Labs
Senna Labs

Subscribe to follow product news, latest in technology, solutions, and updates

- More than 120,000 people/day visit to read our blogs

Other articles for you

04
March, 2024
15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G
4 March, 2024
15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G
ผู้ให้บริการเครือข่ายในสหรัฐฯ ได้เปิดตัว 5G ในหลายรูปแบบ และเช่นเดียวกับผู้ให้บริการเครือข่ายในยุโรปหลายราย แต่… 5G มันคืออะไร และทำไมเราต้องให้ความสนใจ บทความนี้ได้รวบรวม 15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G เพราะเราปฏิเสธไม่ได้เลยว่ามันกำลังจะถูกใช้งานอย่างกว้างขวางขึ้น 1. 5G หรือ Fifth-Generation คือยุคใหม่ของเทคโนโลยีเครือข่ายไร้สายที่จะมาแทนที่ระบบ 4G ที่เราใช้อยู่ในปัจจุบัน ซึ่งมันไม่ได้ถูกจำกัดแค่มือถือเท่านั้น แต่รวมถึงอุปกรณ์ทุกชนิดที่เชื่อมต่ออินเตอร์เน็ตได้ 2. 5G คือการพัฒนา 3 ส่วนที่สำคัญที่จะนำมาสู่การเชื่อมต่ออุปกรณ์ไร้สายต่างๆ ขยายช่องสัญญาณขนาดใหญ่ขึ้นเพื่อเพิ่มความเร็วในการเชื่อมต่อ การตอบสนองที่รวดเร็วขึ้นในระยะเวลาที่น้อยลง ความสามารถในการเชื่อมต่ออุปกรณ์มากกว่า 1 ในเวลาเดียวกัน 3. สัญญาณ 5G นั้นแตกต่างจากระบบ

By

4 mins read
Thai
04
March, 2024
Software Architecture แบบไหนเหมาะกับธุรกิจของคุณ
4 March, 2024
Software Architecture แบบไหนเหมาะกับธุรกิจของคุณ
Monolith โปรแกรมเมอร์ส่วนใหญ่น่าจะรู้จักและเคยผ่านมากันเกือบทุกคน มันคือ Software Architechture รูปแบบหนึ่งที่มีการใช้ resource และ environment เดียวกันทั้งโปรเจค แต่การพัฒนาการสามารถแยกกัน หรือพัฒนาไปพร้อมกันระหว่าง Backend และ Frontend ขึ้นอยู่กับทีมว่าแบบไหนเหมาะ และเร็วกับทีม ข้อดี แน่นอนว่าเมื่อ software architechture มันมีการใช้งาน environment เดียวกันมันจึงช่วยให้ทีมที่พัฒนาสามารถใช้งาน library เดียวกันและ เมื่อมีการเปลี่ยนแปลงใดๆ ทีมก็จะได้ code base เดียวกัน ทำให้สามารถพัฒนา produdct

By

3 mins read
Thai
04
March, 2024
จัดการ Array ด้วย Javascript (Clone Deep)
4 March, 2024
จัดการ Array ด้วย Javascript (Clone Deep)
ในปัจจุบันนี้ ปฏิเสธไม่ได้เลยว่าภาษาที่ถูกใช้ในการเขียนเว็บต่าง ๆ นั้น คงหนีไม่พ้นภาษา Javascript ซึ่งเป็นภาษาที่ถูกนำไปพัฒนาเป็น framework หรือ library ต่าง ๆ มากมาย ผู้พัฒนาหลายคนก็มีรูปแบบการเขียนภาษา Javascript ที่แตกต่างกัน เราเลยมีแนวทางการเขียนที่หลากหลาย มาแบ่งปันเพื่อน ๆ เกี่ยวกับการจัดการ Array ด้วยภาษา Javascript กัน เรามาดูตัวอย่างกันเลยดีกว่า โดยปกติแล้วการ copy ค่าจาก value type ธรรมดา สามารถเขียนได้ดังนี้

By

4 mins read
Thai

Let’s build digital products that are
simply awesome !

We will get back to you within 24 hours!Go to contact us
Please tell us your ideas.
- Senna Labsmake it happy
Contact ball
Contact us bg 2
Contact us bg 4
Contact us bg 1
Ball leftBall rightBall leftBall right
Sennalabs gray logo28/11 Soi Ruamrudee, Lumphini, Pathumwan, Bangkok 10330+66 62 389 4599hello@sennalabs.com© 2022 Senna Labs Co., Ltd.All rights reserved.