Nếu bạn đang làm việc với các ngôn ngữ lập trình khác như C++, Java và PHP, bạn đã quen thuộc với từ khóa this.
Trong các ngôn ngữ này, từ khóa this đại diện cho thể hiện của đối tượng hiện tại trong phương thức của class.
Và từ khóa this chỉ có liên quan trong một phương thức của class, có nghĩa là bạn không thể sử dụng nó bên ngoài một phương thức.
Tuy nhiên, JavaScript có từ khóa this hoạt động khác với các ngôn ngữ lập trình khác, điều này khiến rất nhiều người bối rối.
Trong JavaScript, bạn có thể sử dụng từ khóa this trong ngữ cảnh toàn cục và ngữ cảnh hàm. Hơn nữa, hành vi của từ khóa thiscũng thay đổi giữa chế độ nghiêm ngặt [strict mode] và không nghiêm ngặt [none-strict mode].
this là gì?
Từ khóa thistham chiếu đến đối tượng hiện đang gọi hàm.
Giả sử rằng bạn có một đối tượng được gọi là counter. Đối tượngcounter này có một phương thức được gọi là next[].
Khi bạn gọi phương thức next[], bạn có thể truy cập đối tượng this.
constcounter={
count:0,
next:function[]{
return++this.count;
}
};
counter.next[];
Bên trong hàm next[], this tham chiếu đến đối tượng counter.
Xem lệnh gọi phương thức sau:
counter.next[];
next[] là một hàm [cũng gọi là thuộc tính hoặc phương thức] của đối tượng counter. Do đó, bên trong hàm next[], this tham chiếu đến đối tượng counter.
> Lưu ý: Khi một hàm là một thuộc tính của một đối tượng, nó được gọi là một phương thức
this trong ngữ cảnh toàn cục
Trong ngữ cảnh toàn cục [global context], this tham chiếu đến đối tượng toàn cục, là đối tượng window trên trình duyệt web hoặc đối tượng global trên Node.js.
Hành vi này nhất quán cho dù chế độ nghiêm ngặt có được áp dụng hay không, ví dụ thử gọi câu lệnh này trong phạm vi cao nhất:
console.log[this===window];//true
Nếu bạn gán một thuộc tính cho đối tượng this trong ngữ cảnh toàn cục, JavaScript sẽ thêm thuộc tính vào đối tượng toàn cục như trong ví dụ sau:
this.color='Red';
console.log[window.color];//'Red'
this trong ngữ cảnh hàm
Trong JavaScript, bạn có thể gọi một hàm theo những cách sau:
- Gọi hàm thông thường
- Gọi phương thức
- Gọi hàm khởi tạo
- Gọi hàm gián tiếp
Mỗi lời gọi hàm xác định ngữ cảnh riêng của nó, do đó, thiscó thể hoạt động khác với những gì bạn nghĩ.
Case #1: this trong lời gọi hàm thông thường
Trong chế độ không nghiêm ngặt [non-strict mode], this tham chiếu đến đối tượng toàn cục khi hàm được gọi như sau:
functionshow[]{
console.log[this===window];//true
}
show[];
Khi bạn gọi hàm show[], this tham chiếu đến đối tượng toàn cục, là đối tượng window trên trình duyệt web và là đối tượng global trên Node.js.
Do đó, lệnh gọi hàm show[]ở trên cũng tương đương như sau:
window.show[];
Trong chế độ nghiêm ngặt [strict mode], để hạn chế hành vi không rõ ràng, lời gọi hàm như vậy sẽ được JavaScript đặt giá trị this thành undefined.
Hãy xem xét ví dụ sau:
"usestrict";//Khaibáostrictmode
functionshow[]{
console.log[this===undefined];//true
}
show[];
Lưu ý:
- Để thiết lập chế độ nghiêm ngặt, bạn có thể sử dụng chỉ thị "use strict" ở đầu tệp.
- Nếu bạn chỉ muốn áp dụng chế độ nghiêm ngặt cho một hàm cụ thể, bạn đặt nó ở đầu thân hàm.
Chế độ nghiêm ngặt đã có sẵn kể từ ECMAScript 5.1. Chế độ nghiêm ngặt áp dụng cho cả hàm và các hàm lồng nhau. Đây là một ví dụ:
functionshow[]{
"usestrict";
console.log[this===undefined];//true
functiondisplay[]{
console.log[this===undefined];//true
}
display[];
}
show[];
Kết quả:
true
true
Trong hàm bên trong display[], this cũng được đặt thành undefinedbởi vì "use strict"có tác dụng.
Case #2: this trong lời gọi phương thức
Khi bạn gọi một phương thức của một đối tượng, JavaScript sẽ đặt this cho đối tượng sở hữu phương thức.
Xem đối tượng car sau:
letcar={
brand:'Vinfast',
getBrand:function[]{
returnthis.brand;
}
}
console.log[car.getBrand[]];//Vinfast
Trong ví dụ này, đối tượng this trong phương thức getBrand[] tham chiếu đến đối tượng car.
Và vì một phương thức là thuộc tính của một đối tượng, cũng là một giá trị, thế nên bạn có thể lưu trữ nó trong một biến như thế này:
letbrand=car.getBrand;
Và sau đó, gọi phương thức thông qua biến rất bình thường như sau:
console.log[brand[]];//undefined
Kết quả, bạn nhận được undefined thay vì Vinfastnhư mong đợi.
Bởi vì, khi bạn gọi một phương thức mà không chỉ định đối tượng của nó, JavaScript sẽ đặt this thành đối tượng toàn cục ở chế độ không nghiêm ngặt và undefined trong chế độ nghiêm ngặt.
Để xử lý tình huống này, bạn có thể sử dụng phương thức bind[] của đối tượng Function.prototype.
Phương thức bind[] tạo một hàm mới có từ khóa this được đặt thành một giá trị được chỉ định.
letbrand=car.getBrand.bind[car];
console.log[brand[]];//Vinfast
Trong ví dụ trên, khi bạn gọi phương thức brand[], từ khóa this được liên kết với đối tượng carbởi bind[]
Một ví dụ khác, sử dụng bind[] để liên kết đến đối tượng chỉ định.
letcar={
brand:'Vinfast',
getBrand:function[]{
returnthis.brand;
}
}
letbike={
brand:'ThốngNhất'
}
letbrand=car.getBrand.bind[bike];
console.log[brand[]];
Kết quả:
Thống Nhất
Trong ví dụ này, phương thức bind[] đặt giá trị this cho đối tượng bike, do đó, bạn thấy giá trị thuộc tính brand của đối tượng bike trong kết quả.
Case #3: this trong lời gọi hàm khởi tạo
Khi bạn sử dụng từ khóa new để tạo một thể hiện của một đối tượng hàm, bạn sử dụng hàm như một phương thức khởi tạo [constructor].
> Đọc chi tiết hơn về Constructor trong JavaScript
Ví dụ sau khai báo một hàm Car, sau đó gọi nó như một hàm tạo:
functionCar[brand]{
this.brand=brand;
}
Car.prototype.getBrand=function[]{
returnthis.brand;
}
varcar=newCar['Vinfast'];
console.log[car.getBrand[]];
Biểu thức new Car['Vinfast'] là một lệnh gọi hàm tạo của hàm Car.
JavaScript tạo một đối tượng mới và đặt đối tượng this thành đối tượng mới được tạo [Cách này hoạt động tốt nhưng có một vấn đề tiềm ẩn]
Bây giờ, bạn có thể gọi Car[] dưới dạng một hàm hoặc như một phương thức khởi tạo.
Nếu bạn bỏ qua từ khóa new như sau:
varkia=Car['Kia'];
console.log[kia.brand];
//TypeError:Cannotreadproperty'brand'ofundefined
Vì giá trị this trong Car[] được đặt thành đối tượng toàn cục, do đókia.brand trả về không xác định.
Để đảm bảo rằng hàm Car[] luôn được gọi bằng cách gọi hàm tạo, bạn thêm kiểm tra vào đầu hàm Car[] như sau:
functionCar[brand]{
if[![thisinstanceofCar]]{
throwError['Phảisửdụngtừkhóanew'];
}
this.brand=brand;
}
ES6 đã giới thiệu một thuộc tính meta có tên new.target cho phép bạn phát hiện xem một hàm được gọi như một lời gọi hàm đơn giản hay như một hàm tạo.
Bạn có thể sửa đổi hàm Car[] sử dụng new.target như sau:
functionCar[brand]{
if[!new.target]{
throwError['Phảisửdụngtừkhóanew'];
}
this.brand=brand;
}
Case #4: this trong lời gọi hàm gián tiếp
Trong JavaScript, các hàm là first-class citizens. Nói cách khác, các hàm là các đối tượng, là các thể hiện của kiểu Function.
Kiểu Function có hai phương thức: call[] và apply[]. Các phương thức này cho phép bạn đặt giá trị this khi gọi một hàm.
Ví dụ:
functiongetBrand[prefix]{
console.log[prefix+this.brand];
}
letvinfast={
brand:'Vinfast'
};
letkia={
brand:'Kia'
};
getBrand.call[vinfast,"Đâylà"];
getBrand.call[kia,"Đâylà"];
Kết quả:
Đây là Vinfast
Đây là Kia
Trong ví dụ này, chúng ta đã gọi hàm getBrand[] một cách gián tiếp bằng cách sử dụng phương thức call[] của hàm getBrand.
Chúng ta đã chuyển đối tượng vinfast và kia làm đối số đầu tiên của phương thức call[], do đó, chúng ta có thương hiệu tương ứng trong mỗi lần gọi.
Phương thức apply[] tương tự như phương thức call[] ngoại trừ đối số thứ hai của nó là một mảng các đối số.
getBrand.apply[vinfast,"Đâylà"];//ĐâylàVinfast
getBrand.apply[kia,"Đâylà"];//ĐâylàKia
this trong Arrow Function
ES6 đã giới thiệu một khái niệm mới có tên là Arrow Function, bạn cũng có thể gọi đến this trong đó.
Tuy nhiên, arrow functionkhông tạo bối cảnh thực thi của riêng nó, mà kế thừa this từ hàm bên ngoài nơi arrow function được định nghĩa.
Xem ví dụ sau:
letgetThis=[]=>this;
console.log[getThis[]===window];//true
Trong ví dụ này, giá trị this được đặt thành đối tượng toàn cục, tức là window trong trình duyệt web.
Và vì một hàm mũi tên không tạo ngữ cảnh thực thi của riêng nó, nên việc xác định một phương thức bằng arrow function sẽ gây ra sự cố.
Ví dụ:
functionCar[]{
this.speed=100;
}
//ThêmvàođốitượngCarmộthàm
//bằngarrowfunction
Car.prototype.getSpeed=[]=>{
returnthis.speed;
}
varcar=newCar[];
car.getSpeed[];//TypeError
Bên trong phương thức getSpeed[], giá trị this tham chiếu đến đối tượng toàn cục, không phải đối tượng Car.
Do đó, lời gọi car.getSpeed[] gây ra lỗi vì đối tượng toàn cục không có thuộc tính speed.
Tổng kết về cái "this" trong JavaScript
Như vậy, qua bài viết này bạn đã hiểu về hành vi của this trong JavaScript, cụ thể nó hoạt động như thế nào trong ngữ cảnh toàn cục, ngữ cảnh hàm và khi sử dụng Arrow function.
Mình cũng đã phân chia ra các trường hợp this trong các cách gọi hàm, hi vọng giúp bạn hiểu và vận dụng this trong JavaScript tốt hơn.
> Nếu bạn đang tích cực học JavaScript và muốn học nhanh hơn, bài bản hơn để đi làm thì hãy đăng ký HỌC FRONT END ngay hôm nay!
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao [Since 2002]. Học thực tế + Tuyển dụng ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0383.180086
Email:
Website://niithanoi.edu.vn
Fanpage: //facebook.com/NIIT.ICT/
#niit #icthanoi #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp