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.