Javascript: Những điều cần biết về THIS trong Javascipt

This là một trong những khái niệm cơ bản trong Javascript, cũng như trong OOP. Hiểu rõ được this sẽ giúp bạn quản lí tốt code của mình hơn và có cái nhìn toàn diện hơn về cách tiếp cận một đối tượng trong JS. Chúng ta thường thấy this khi add một event cho DOM element, trong object literals, constructor, …

Default this, Window Object

Khi chạy một trang web và load JS, mặc định chúng ta sẽ có một môi trường Global mà ở đó, this là Window Object

const callMe = function() {
  console.log(this):
}
callMe();  // Window object

This trong Object

Chúng ta có thể khai báo một object literal như sau:

const obj = {};
obj.callMe = function() {
  console.log(this);
}
obj.callMe() // obj

Hoặc chúng ta có thể gọi một Constructor để khởi tạo một Object như sau:

const MyObject = function() {
  this.callMe = function(){
    console.log(this);
  }
}
const obj = new MyObject();
obj.callMe() // MyObject

Xem thử một ví dụ khác của Object literals:

const obj = {
  name: "Dan",
  getName: function(){
    console.log(this.name);
  }
}

const getName = obj.getName;
obj.getName(); // Dan
getName(); // undefined

Ở hàm getName thứ hai, do execution context của nó khi thực thi là ở mức Global nên giá trị this.name chưa được khai báo.

This trong event DOM

const myElem = document.querySelector("#my-id");
const callMe = function() {
  console.log(this);
}
myElem.addEventListener('click', callMe); // this ở đây là Elem DOM

Dynamic this với Execution Context khác nhau

Một this sẽ có giá trị khác nhau khi chúng ta gọi một hàm ở những ngữ cảnh khác nhau:

const callMe = function() {
  console.log(this);
}
const myElem = document.querySelector("#my-id");
myElem.addEventListener('click', callMe); // this ở đây là Elem DOM
callMe() // this ở đây là Window

Những cách thay đổi this: call, apply và bind

Một this trong hàm có thể được thay đổi bởi một số method như là call, apply( đổi this và thực thi hàm ngay lập tưc) hay bind( đổi this)

Bạn có thể thao khảo những ví dụ về call, apply, bind tại đây.