Tản mạn đôi chút về "This" trong Javascript

Trong bài viết này mình sẽ giải thích cho mọi người chi tiết về this, một khái niệm cơ bản trong js nhưng lại rất dễ làm các lập trình viên javascript đau đầu và nhầm lẫn nhất 😛😛😛.

1. This là gì ?

this nói một cách ngắn gọn và đơn giản thì nó giống như một biến, nhưng biến này sẽ trỏ đến (trả về) object gần nhất chứa nó, các trường hợp khác, this sẽ trả về window mọi người hãy xem vd bên dưới để hiểu hơn những gì mình vừa viết nhé.

// a constructor function
function constructorFunc(name) {
  console.log(this);
  
  this.name = name || "no name";
}

const obj1 = new constructorFunc("obj 1"); // => trả về obj

Ở vd trên, mình có tạo một constructor function cùng với một instance kế thừa từ constructor function đó, và kết quả của this khi instance được chạy sẽ trả về chính instance đó. Đơn giản là vì biến obj1 là một object nên việc gọi this bên trong obj1 chính là việc ta đang gọi this bên trong một objectthis lại trả về object chứa nó (như mình nói ở trên) nên trong vd trên, this sẽ trả về obj1.

Khá là rắc rối phải không 😅😅😅, bây giờ mọi người hãy cùng xem tiếp các mục dưới đây và ngẫm lại những gì mình vừa viết để hiểu hơn về this nhé.

2. This trả về window (global object).

Nếu các bạn chưa biết thì tất cả code của ta viết đều được bao bởi window ( global object ), chỉ là chúng ta không nhìn thấy thôi. Nên khi ta gọi this mà nó không được bao bởi một object khác thì this sẽ trả về window.

console.log(this); // window

function func() { 
  console.log(this);
}

func(); // window

3. This trả về một object !== window.

Do this chỉ trả về object gần nhất chứa nó, nên một function nằm bên trong một method sẽ trả về window chứ không phải window.

const man = {
  name: "robert",
  age: 20,
  getThis() {
    console.log("this trong mot method", this); // => man
    
    (iife = function() {
      console.log("this trong function binh thuong", this); // => window
    })();
  }
}

man.getThis();

Ở vd trên, mình có một object chứa method getThisgetThis đồng thời cũng chứa một IIFE ( Immediately Invoked Function Expression ). Mọi người có thể thấy IIFE không có object nào chứa nó nên this bên trong nó sẽ trả về window. Mặt khác, method getThis được chứa bởi man nên this của nó sẽ trả về man.

4. This trong các Event.

This trong các event sẽ trả về element được đính với event đó.

document.getElementById("test").onclick = function() {
    console.log(this); // => <div id="test">test</div> (html element)
};

5. Lưu ý.

Nếu ta dùng strict mode thì this trong các function sẽ trả về undefined (trừ method).

This trong Arrow function ( es6 ) sẽ kế thừa từ this của functionArrow function đó được khai báo ở bên trong, chứ không trỏ đến object gần nhất chứa nó nữa.

const obj = {
  method1: () => {
    console.log(this); // => window vi arrow function ke thua "this" tu global iife 
  }
}

obj.method1();

Lời kết.

Trong bài viết này, mình không liệt kê ra cá context cụ thể của this như trong các bài post khác trên internet để đem đến cho mọi người có một các nhìn khác về từ khóa này, và mọi người cũng không cần phải nhớ hết tất cả các context đó. Qua bài viết này, mình mong mọi người có thể hiểu hơn về this và sử dụng nó một cách chính xác