Trong hướng dẫn này, bạn sẽ tìm hiểu về từ khóa this của JavaScript với sự trợ giúp của các ví dụ.
Trong JavaScript, thistừ khóa đề cập đến đối tượng mà nó được gọi.
1. Phạm vi Toàn cầu Bên trong này
Khi thisđược sử dụng một mình, thisđề cập đến đối tượng toàn cục ( windowđối tượng trong trình duyệt). Ví dụ,
let a = this; console.log(a); // Window () this.name = 'Sarah'; console.log(window.name); // Sarah
Ở đây, this.namecũng giống như window.name.
2. Chức năng Bên trong này
Khi thisđược sử dụng trong một hàm, thisđề cập đến đối tượng toàn cục ( windowđối tượng trong trình duyệt). Ví dụ,
function greet() ( // this inside function // this refers to the global object console.log(this); ) greet(); // Window ()
3. Hàm tạo bên trong này
Trong JavaScript, các hàm khởi tạo được sử dụng để tạo các đối tượng. Khi một hàm được sử dụng như một hàm khởi tạo, hãy thistham chiếu đến đối tượng bên trong mà nó được sử dụng. Ví dụ,
function Person() ( this.name = 'Jack'; console.log(this); ) let person1 = new Person(); console.log(person1.name);
Đầu ra
Người (tên: "Jack") Jack
Ở đây, thisđề cập đến đối tượng person1. Đó là lý do tại sao, person1.namecho chúng tôi Jack.
Lưu ý : Khi thisđược sử dụng với các lớp ES6, nó đề cập đến đối tượng bên trong mà nó được sử dụng (tương tự như các hàm khởi tạo).
4. Phương pháp Đối tượng Bên trong này
Khi thisđược sử dụng bên trong phương thức của một đối tượng, thisđề cập đến đối tượng mà nó nằm bên trong. Ví dụ,
const person = ( name : 'Jack', age: 25, // this inside method // this refers to the object itself greet() ( console.log(this); console.log(this.name); ) ) person.greet();
Đầu ra
(tên: "Jack", tuổi: 25, chào: ƒ) Jack
Trong ví dụ trên, thisđề cập đến personđối tượng.
5. Chức năng Bên trong Bên trong này
Khi bạn truy cập thisbên trong một hàm bên trong (bên trong một phương thức), hãy thistham chiếu đến đối tượng toàn cục. Ví dụ,
const person = ( name : 'Jack', age: 25, // this inside method // this refers to the object itself greet() ( console.log(this); // (name: "Jack", age… ) console.log(this.age); // 25 // inner function function innerFunc() ( // this refers to the global object console.log(this); // Window (… ) console.log(this.age); // undefined ) innerFunc(); ) ) person.greet();
Đầu ra
(tên: "Jack", tuổi: 25, chào: ƒ) 25 Cửa sổ (…) không xác định
Ở đây, thisbên trong innerFunc()đề cập đến đối tượng toàn cục vì innerFunc()bên trong một phương thức.
Tuy nhiên, this.agebên ngoài innerFunc()đề cập đến personđối tượng.
6. Hàm Mũi tên Bên trong này
Bên trong hàm mũi tên, thisđề cập đến phạm vi cha. Ví dụ,
const greet = () => ( console.log(this); ) greet(); // Window (… )
Các hàm mũi tên không có hàm riêng của chúng this. Khi bạn sử dụng thisbên trong một hàm mũi tên, hãy thistham chiếu đến đối tượng phạm vi cha của nó. Ví dụ,
const greet = ( name: 'Jack', // method sayHi () ( let hi = () => console.log(this.name); hi(); ) ) greet.sayHi(); // Jack
Ở đây, this.namebên trong hi()hàm đề cập đến greetđối tượng.
Bạn cũng có thể sử dụng hàm mũi tên để giải quyết vấn đề gặp phải undefinedkhi sử dụng một hàm bên trong một phương thức (như trong Ví dụ 5). Ví dụ,
const person = ( name : 'Jack', age: 25, // this inside method // this refers to the object itself greet() ( console.log(this); console.log(this.age); // inner function let innerFunc = () => ( // this refers to the global object console.log(this); console.log(this.age); ) innerFunc(); ) ) person.greet();
Đầu ra
(tên: "Jack", tuổi: 25, chào: ƒ) 25 (tên: "Jack", tuổi: 25, chào: ƒ) 25
Ở đây, innerFunc()được xác định bằng cách sử dụng hàm mũi tên. Nó lấy thistừ phạm vi cha của nó. Do đó, this.agecho 25 .
Khi hàm mũi tên được sử dụng với this, nó đề cập đến phạm vi bên ngoài.
7. Chức năng Bên trong này với Chế độ Nghiêm ngặt
Khi thisđược sử dụng trong một chức năng với chế độ nghiêm ngặt, thislà undefined. Ví dụ,
'use strict'; this.name = 'Jack'; function greet() ( // this refers to undefined console.log(this); ) greet(); // undefined
Lưu ý : Khi sử dụng thisbên trong một hàm có chế độ nghiêm ngặt, bạn có thể sử dụng lệnh gọi Hàm JavaScript ().
Ví dụ,
'use strict'; this.name = 'Jack'; function greet() ( console.log(this.name); ) greet.call(this); // Jack
Khi bạn truyền thisvới call()hàm, greet()được coi là phương thức của thisđối tượng (đối tượng toàn cục trong trường hợp này).
