“this” in JavaScript

this là một khái niệm gây lú trong Javascript. Có thể coi nó như nước ngoài đời thật.

– Nếu nước được rót vào ly, nó sẽ có hình dạng của chiếc ly.

– Nếu nước được đựng trong chiếc lu, nó sẽ có hình dạng của chiếc lu đấy.

this không được quyết định tại lúc khai báo, mà được quyết định tại lúc gọi hàm.

Nói cách khác:

this không cố định
this phụ thuộc vào ngữ cảnh gọi hàm
Javascript xác định giá trị của this dựa trên cách function được gọi, không phải function được viết ở đâu.

—————————————————————————————————-

Xác định this

—————————————————————————————————-

Plain Function Call

Với cách gọi hàm độc lập, Javascript sẽ không biết bind this cho ai, do function không thuộc object nào và cũng không ai sở hữu function.

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

greeting(); // undefined
Output sẽ cho ra undefined (strict) hoặc Global Object (none-strict).

Đối với node.js hoặc class, module sẽ cho ra undefined vì trong ES6 mặc định sẽ dùng strict mode.

Với browser sẽ trả về Global Object là window.

—————————————————————————————————-

Losing Context

Đây là tình trạng mất context khi tách hàm khỏi object dẫn đến mất this.

const user = {
name: “Minh”,
greeting() {
console.log(this.name);
}
};

const fn = user.greeting;
fn(); // undefined
Phần body của greeting() được gán cho fn(), this đã bị tách khỏi user dẫn đến mất ngữ cảnh.

Lúc này, fn() được gọi như một hàm độc lập và cho kết quả là undefined.

this nằm trong method greeting của user nên this phải là user. ⇒ Sai hoàn toàn

Nên nhớ ⇒ this không cố định và phụ thuộc vào cách hàm được gọi.

—————————————————————————————————-

Arrow Function không có this riêng

Arrow Function không tạo this của riêng nó, this được lấy từ scope bên ngoài.

const user = {
name: “Minh”,
greeting: () => {
console.log(this.name);
}
};

user.greeting(); // undefined
greeting là arrow function nên không có this, this được lấy từ scope bên ngoài mà scope bên ngoài của greeting là global scope không phải user.

Lưu ý với Arrow Function:

Methods của Object không nên dùng Arrow Function.

Chỉ nên dùng Arrow Function trong callback để giữ this của function cha.

const user = {
name: “Minh”,
greeting() {
setTimeout(() => {
console.log(this.name);
}, 1000);
}
};

user.greeting(); // Minh
—————————————————————————————————-

this trong call, apply, bind

Với call và apply, function được gọi và chỉ định this ngay lập tức. Ngữ cảnh của this phụ thuộc vào đối số được truyền vào call/apply

function greeting() {
console.log(this.name);
}

greeting.call({ name: “Minh” }); // Minh
Với bind hàm được gọi và trả về hàm mới với this cố định.

const user = {
name: “Minh”
};

function greeting() {
console.log(this.name);
}

const boundFn = greeting.bind(user);
boundFn(); // Minh
—————————————————————————————————-

Thứ tự ưu tiên

new

bind()

call() / apply()

Gọi qua object obj.method()

Gọi hàm độc lập (undefined trong strict mode)

—————————————————————————————————-

Đây là kiến thức mình học được, có sai sót gì mọi người hãy góp ý nhá!!