Arrow funciton và this


this được sử dụng rất nhiều trong javascript, nhưng this cũng là khái niệm rất khó hiểu, rất dễ bị nhầm lẫn khi dùng. Ta xem ví dụ sau.
var myName = 'Mr D';
function sayHi() {
  console.log(this.myName);
}

sayHi(); // Mr D

Hàm sayHi sẽ log ra this.myName, vậy thì this này là gì ? Ta thấy sayHi() được gọi từ Window object. Ta có thể thực thi hàm sayHi(); hoặc window.sayHi(); đều như nhau. Thì lúc này this tượng trưng cho window object, vậy thì khi log ra this.myName có nghĩa là log ra window.myName, nên ta có giá trị 'Mr D'.

Vậy giá trị this được dựa trên ngữ cảnh khi ta thực thi hàm sayHi, trường hợp này là window object.

Ta xem một ví dụ khác.

var myName = "Mr D";
function sayHi2(){
  this.myName = 'Mr X';
  console.log(this); 
  console.log(this.myName);
}

sayHi2(); 
// window
// Mr X

Ta thấy function có định nghĩa this.myName = 'Mr X', thực sự thì this vẫn là window, câu lệnh trên chỉ là cập nhật lại giá trị của window object.

Còn nếu ta tạo một instance của sayHi3() thì lúc đó this được trỏ về object này. Ta xem ví dụ sau.

function SayHi3(){
  this.myName = "Mr T";
}

var say = new SayHi3();
console.log(say.myName); // Mr T

Còn nếu dùng Arrow function thì sẽ không định nghĩa this cho bản thân nên luôn lấy giá trị this của cha.

var myName = "Mr D";
var sayHi3 = () => {
  console.log(this.myName);
}

sayHi3();  // Mr D