Metaprogramming คืออะไร? เรียนรู้การใช้งานเบื้องต้นผ่าน JavaScript

1class Article {
2  static statuses = ['drafted', 'published', 'upcoming']
3
4  constructor(status) {
5    this.status = status
6  }
7
8  isDrafted() {
9    return this.status === 'drafted'
10  }
11
12  isPublished() {
13    return this.status === 'published'
14  }
15
16  isUpcoming() {
17    return this.status === 'upcoming'
18  }
19}
20
21const article = new Article('drafted')
22console.log(article.isDrafted()) // true
23console.log(article.isPublished()) // false

1// สร้างฟังก์ชันขึ้นมาอันนึงมีหน้าที่แปลงข้อความให้ตัวแรกเป็นอักษรตัวใหญ่
2// เช่นเปลี่ยนจาก upcoming เป็น Upcoming
3const capitalize = (text) => {
4  return text.charAt(0).toUpperCase() + text.slice(1)
5}
6
7class Article {
8  static statuses = ['drafted', 'published', 'upcoming']
9
10  constructor(status) {
11    this.status = status
12  }
13}
14
15// เมื่อเรามีอาร์เรย์ของสถานะทั้งหลายแล้วจะรอช้าอยู่ใย
16// วนลูปรอบมันเพื่อสร้างเมธอดตามจำนวนสถานะที่เรามี
17Article.statuses.forEach((status) => {
18  // แปะเมธอดที่สร้างใหม่เข้าไปในใน prototype
19  // ใครไม่รู้จัก prototype ไม่เป็นไรครับ ลืมมันไปซะ
20  // คิดซะว่านี่คือวิธีสร้างเมธอดอีกวิธีหนึ่งใน JavaScript แล้วกัน
21  Article.prototype[`is${capitalize(status)}`] = function () {
22    return this.status === status
23  }
24})
25
26const article = new Article('drafted')
27console.log(article.isDrafted()) // true
28console.log(article.isPublished()) // false

1function print(firstName, lastName) {
2  console.log(`${firstName} ${lastName}`)
3}
4
5console.log(typeof print) // function
6
7// function นั้นเป็นอ็อบเจ็กต์ชนิดหนึ่ง
8console.log(print instanceof Object) // true
9
10// เข้าถึงชื่อของฟังก์ชัน
11console.log(print.name) // print
12
13// เข้าถึงข้อมูลว่าฟังก์ชันดังกล่าวรับ arguments กี่ตัว
14console.log(print.length) // 2

1const obj = {
2  firstName: 'Nuttavut',
3  lastName: 'thongjor',
4}
5
6Object.keys(obj) // ["firstName","lastName"]
7Object.values(obj) // ["Nuttavut","thongjor"]
8Object.entries(obj) // [["firstName","Nuttavut"],["lastName","thongjor"]]
9
10// ขอข้อมูลของ property ที่ระบุ
11Object.getOwnPropertyDescriptor(obj, 'firstName') // {"value":"Nuttavut","writable":true,"enumerable":true,"configurable":true}

1const obj = {}
2
3console.log(typeof obj) // object
4console.log(obj instanceof Object) // true

1// สร้างฟังก์ชันสำหรับย้าย property ทั้งหมดของอ็อบเจ็กต์หนึ่งไปยังอีกตัวหนึ่ง
2const moveTo = (source, target) => {
3  for (let [key, value] of Object.entries(source)) {
4    // ย้าย property จาก source ไป target แล้วลบ property ออกจาก source
5    target[key] = value
6    delete source[key]
7  }
8}
9
10const obj1 = {
11  firstName: 'Nuttavut',
12  lastName: 'Thongjor',
13}
14
15const obj2 = {}
16
17moveTo(obj1, obj2)
18
19console.log(obj1) // {}
20console.log(obj2) // {"firstName":"Nuttavut","lastName":"Thongjor"}

1const obj = {
2  // โลก JavaScript นิยมใส่ _ นำหน้า property ที่เราคิดในใจว่าเป็น private property
3  _name: null,
4
5  get name() {
6    // ก่อนเข้าถึง name เราจะตรวจสอบค่า _name ก่อน
7    // ถ้า _name ไม่มีค่า จะคืนค่ากลับเป็ย no name
8    return this._name ? this._name : 'no name'
9  },
10
11  set name(value) {
12    // ถ้าไม่ระบุค่าเข้ามาจะ throw error
13    if (!!value) throw 'Please enter your name.'
14    this._name = value
15  },
16}
17
18obj.name = '' // Please enter your name
19
20obj.name = 'nut'
21console.log(obj.name) // nut

1const str1 = 'Hello'
2const str2 = 'Hello'
3
4// เราสร้าง symbol ด้วยการเรียก Symbol
5// ส่วน Hello นั่นเป็นการใส่คำอธิบาย symbol เฉยๆ
6// จะใส่หรือไม่ใส่ก็ได้
7// แต่แนะนำให้ใส่เสมอครับ เพื่อประโยชน์ในการ debug โปรแกรม
8const sym1 = Symbol('hello')
9const sym2 = Symbol('hello')
10
11// string 2 ตัวมีค่าเหมือนกันย่อยเท่ากัน
12console.log(str1 === str2) // true
13
14// รอถึงชาติหน้า symbol 2 ตัวก็ไม่เท่ากัน!
15console.log(sym1 === sym2) // false

1const sym1 = Symbol.for('hello')
2const sym2 = Symbol.for('hello')
3
4console.log(sym1 === sym2) // true

1const arr = [1, 2, 3]
2
3for (let i of arr) {
4  console.log(i)
5}
6
7// 1, 2, 3

1class Text {
2  constructor(text) {
3    // แตกข้อความยาวๆออกเป็นอาร์เรย์โดยใช้ช่องว่างเป็นตัวหั่น
4    this.words = text.split(' ')
5  }
6
7  // ส่วนนี้คือ ES2015 Generators ถ้าไม่รู้จักไม่เป็นไรครับ
8  // จำรูปแบบการเขียนไปใช้พอ
9  *[Symbol.iterator]() {
10    for (let word of this.words) {
11      yield word
12    }
13  }
14}
15
16const text = new Text('This is a book')
17
18// ทีนี้คลาส Text ของเราก็จะนำไปวนลูปได้แล้ว แหล่มแมวฝุดๆ
19for (let i of text) {
20  console.log(i)
21}
22
23// This
24// is
25// a
26// book

1const str1 = 'hello world'
2const regex = /^hello/
3
4// match ใช้เพื่อตรวจสอบว่า string นั้นมีรูปแบบตรงกับ regular expression
5// ที่เราระบุไว้หรือไม่ สังเกตสิ่งที่มันคืนค่ากลับมานะครับ
6console.log(str1.match(regex)) // ['hello']

1class Word {
2  constructor(word) {
3    this.word = word
4  }
5
6  [Symbol.match](string) {
7    const index = this.word
8      .replace(/^an /, '')
9      .replace(/^a /, '')
10      .replace(/^the /, '')
11      .indexOf(string)
12
13    // หลังจากตัด article ออกแล้วถ้าไม่เท่ากันให้คืนค่าเป็น -1
14    // แต่ถ้าเท่ากันให้คืนค่าเป็นอาร์เรย์แบบเดียวกับที่ String#match ทำ
15    return index === -1 ? null : [this.word]
16  }
17}
18
19const word = new Word('a book')
20console.log('book'.match(word)) // ['a book']

1const obj = {
2  name: null,
3  age: null,
4}
5
6// ใช้เพื่อตั้งค่า property ในอ็อบเจ็กต์
7Reflect.set(obj, 'name', 'Nuttavut Thongjor')
8
9// ใช้เพื่อดึงค่า property ในอ็อบเจ็กต์
10Reflect.get(obj, 'name') // Nuttavut Thongjor
11
12// ใช้เพื่อตรวจสอบว่ามี property นั้นในอ็อบเจ็กต์หรือไม่
13Reflect.has(obj, 'age') // true

1// อ็อบเจ็กต์ตั้งต้นที่เราต้องการเพิ่มความสามารถให้มันด้วยการใช้ Proxy
2const target = {}
3
4// handler เป็นอ็อบเจ็กต์ที่นิยามวิธีเพิ่มความสามารถให้อ็อบเจ็กต์ target
5// ผ่านเมธอดที่เรียกว่า trap (จะได้พูดถึงต่อไป)
6const handler = {}
7
8// วิธีสร้าง Proxy แสนง่ายแค่ส่ง target และ handler เข้าไป
9const proxy = new Proxy(target, handler)

1const target = {}
2const handler = {
3  // get นี่ละครับคือ trap
4  // get ตัวนี้รับพารามิเตอร์3ตัว
5  // เราต้องการ log ชือของ property จึงเข้าถึง name
6  get: (target, name, receiver) => {
7    console.log(`Getting ${name}`)
8  },
9}
10
11const book = new Proxy(target, handler)
12book.title = 'Introduction to ES2015'
13book.title // Getting title

1const validator = {
2  // ใช้ trap ชื่อ set
3  // เพราะเราต้องการเช็คข้อมูลเมื่อทำการตั้งค่าตัวแปร
4  set(object, property, value) {
5    switch (property) {
6      case 'name':
7        // ถ้า name ไม่มีค่าให้ error
8        if (value) break
9        else throw new TypeError("Can't be null")
10      case 'age':
11        // ถ้าอายุไม่เป้นตัวเลขจำนวนเต็มให้ error
12        if (Number.isInteger(value)) break
13        else throw new TypeError('Must be integer')
14    }
15
16    object[property] = value
17
18    // ถ้าสำเร็จต้อง return true กลับออกไปด้วย
19    return true
20  },
21}
22
23const person = new Proxy({}, validator)
24person.name = '' // Can't be null
25person.age = NaN // Must be integer