Trong bài viết này, mình sẽ bạn sẽ tìm hiểu về giá trị this trong JavaScript và hiểu nó rõ ràng trong các ngữ cảnh khác nhau.

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 người dùng this trong ngữ cảnh toàn cục, JavaScript sẽ thêm thuộc tính vào đối tượng người tiêu dù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 hoàn toàn có thể gọi một hàm theo những cách sau :

• Gọi hàm thường thì

• Gọi phương pháp

• 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 lập ngữ cảnh riêng của nó, do đó, thiscó thể hoạt động giải trí 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ính sách không khắt khe ( non-strict mode ), this tham chiếu đến đối tượng người tiêu dù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ính sách khắt khe, bạn hoàn toàn có thể sử dụng thông tư ” use strict ” ở đầu tệp .

• Nếu bạn chỉ muốn vận dụng chính sách khắt khe cho một hàm đơn cử, bạn đặt nó ở đầu thân hàm .

Chế độ khắt khe đã có sẵn kể từ ECMAScript 5.1. Chế độ khắt khe vận dụng cho cả hàm và những 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.

Nội dung chính

• this là gì?
• this trong ngữ cảnh toàn cục
• this trong ngữ cảnh hàm
• Case #1: this trong lời gọi hàm thông thường
• Case #2: this trong lời gọi phương thức
• Case #3: this trong lời gọi hàm khởi tạo
• Case #4: this trong lời gọi hàm gián tiếp
• this trong Arrow Function
• Tổng kết về cái “this” trong JavaScript
• Video liên quan

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 pháp trải qua biến rất thông 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 trong thực tiễn + Tuyển dụng ngay !

Đc : Tầng 3, 25T2, N05, Nguyễn Thị Thập, CG cầu giấy, TP.HN

SĐT : 02435574074 – 0383.180086

E-Mail :

Website : https://niithanoi.edu.vn

Fanpage: https://facebook.com/NIIT.ICT/

# niit # icthanoi # niithanoi # niiticthanoi # hoclaptrinh # khoahoclaptrinh # hoclaptrinhjava # hoclaptrinhphp