Data binding ของ JavaScript และการใช้งาน “this” เข้ากับ User Interface (UI)

Data binding คืออะไร แปลตรงตัวเลย นั่นก็คือการ แทนค่า binding data เข้ากับ User Interface (UI) นั่นไง คิดแล้วว่าต้องงง !!

ในภาษา Java ที่เป็น OOP ทั่วไป น่าจะคุ้นเคยกับตัวแปรที่ชื่อว่า this ซึ่งโดยปกติแล้วจะหมายถึงตัว object ที่กำลังอ้างถึง properties ในคลาส เช่น ใน class มีตัวแปรชื่อ X อยู่ เวลาเราจะเรียกใช้ เราก็ใช้ this.x นั้นเอง ง่ายๆใน method ของตัวเอง

class Dummy {
    int x;
    function set(y){
        this.x = y;
    }
}

แต่มีอยู่ภาษาหนึ่งที่คีย์เวิร์ด this ทำตัวไม่ค่อยเหมือนภาษาชาวบ้านคนอื่นเขาเท่าไหร่ นั่นคือ JavaScript

บทความนี้จะมาอธิบายการทำงานของ “this” ปกติ “this” เราจะอ้างถึง properties ของคลาสนั่นๆ แต่ JavaScript แต่ต่างออกไปนิดหน่อยและการใช้ “this” นั้นทำได้หลายหลายวิธีมากขึ้นอยู่กับการ binding Properties ของเราครับ วันนี้จะมาสอนการใช้ “this” ให้ถูกวิธีกัน

ในการ Binding ของ JavaScript นั่นจะมีอยู่ 4 แบบหลักๆ

1. Window Binding / Default Binding
2. Implicit Binding
3. Explicit Binding
4. New Binding

1. Window Binding / Default Binding

คือการที่เราใช้ “this” เพื่อไปเรียก Objcet หรือตัวแปรของ window ในบราวเซอร์

function foo() {
  console.log( this.a );
}
var a = 2;
foo(); // 2

ตัวแปร a ด้านนอกสุดจะเป็น global ถ้าเราใช้คำสั่ง foo() เราก็จะได้ค่า global ของ a นั้นเอง

2. Implicit Binding

คือการอ้างไปถึง Object หรือ Properties ที่อยู่ใน Context ของตัวมันเอง

var person = {
  firstName: 'Tuanrit',
  lastName: 'Sahapaet',
  sayHi: function(){
    console.log('Hello '+ this.firstName+'  '+this.lastName);
  }
}
person.sayHi(); //Hello Tuanrit Sahapaet

คือการอ้างอิงค่าของข้อมูลที่อยู่ Object ของมัน ยกตัวอย่างข้อมูล person มีข้อมูล sayHi อยู่ด้านใน ในเวลาที่เราเรียก person.sayHi() เราก็จะได้ข้อมูล

Hello Tuanrit Sahapaet

3. Explicit Binding

คือการทำให้ฟังก์ชันของเราใช้ “this” ไปชี้ที่ใน scope ของมันเองครับ ไม่ชี้ที่ window หรือ context อื่นๆ นอกจากตัวมัน

const print = (fn) => {
  console.log(fn())
}

const obj = {
  firstName: 'Tuanrit',
  lastName: 'Sahapaet',
  getFullName() {
    console.log(this)
    return `${this.firstName} ${this.lastName}`
  }
}
console.log(obj.getFullName()) // Tuanrit Sahapaet

จากคำสั่งข้างบนคือ obj.getFullName() เราจะได้ ผลลัพธ์ Tuanrit Sahapaet ออกมา เป็นวิธีการเรียกแบบ Implicit ที่ได้อธิบายไปแล้วนั้นเอง

แต่ก็มีอีกวิธีหนึ่งที่สามารถเรียกข้ามฟังค์ชั่น ข้าม Scope ได้ ซึ่งเราสามารถใช้คำสั่งสามตัวนี้ดังต่อไปนี้ ได้ เช่น call(), bind(), apply() เพราะการทำ explicit binding เราจะเอาสามฟังก์ชันที่ว่าเอามาช่วยได้

// bind this เข้ากับ obj
print(obj.getFullName.bind(obj))

การเรียกฟังกชั้นสองต่อ เริ่มจาก เราเรียก print() แต่เนื่องจากภายใน print() นั้นมี obj.getFullName() ผลลัพธ์ที่ออกมา ก็คือการเรียก obj.getFullName() ผ่าน print() เลยได้ออกมาเป็น แต่เนื่องจากมันมี 2 scope จะทำให้ this มันทับกัน จึงต้องใช้คำสั่ง .bind มาช่วยให้แยกออกว่าเป็น this ของ scope ตัวไหน

4. New Binding

ตัวนี้จะเป็นการทำงานกับ keyword “new” หรือก็คือการสร้าง Object

function Rectangle(x, y , width , height) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
}
Rectangle.prototype = {
  print_me: function(){
    console.log(this.x +" "+this.y+" "+this.width+" "+this.height);
  }
}
var rec = new Rectangle(0, 0, 45, 45);

คือการ กำหนดค่าใหม่ จากตัวแปร x, y , width , height ที่ยังไม่มีค่า ถูกกำหนด new Rectangle(0, 0, 45, 45); และเมื่อเราเรียก

rec.print_me() // 0 0 45 45

ผลลัพธ์ที่ได้ออกมาเป็น 0 0 45 45

สำหรับบทความนี้มือใหม่อาจจะ งง แต่ผมเชื่อว่าไม่น่ายากเกินไป อ่านเสร็จแล้วลองไปอ่านเพิ่มเติมและลองทำตามเพื่อความเข้าใจนะครับ

จบแล้ว!

Reference

https://www.algorithmtut.com/data-binding-ของ-javascript-และการใช้งาน-this-keyword/