JavaScript Từ khoá này
Thí dụ
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
Cái gì thế này ?
Từ khóa JavaScript this
đề cập đến đối tượng mà nó thuộc về.
Nó có các giá trị khác nhau tùy thuộc vào nơi nó được sử dụng:
- Trong một phương thức,
this
tham chiếu đến đối tượng chủ sở hữu . - Một mình,
this
đề cập đến đối tượng toàn cục . - Trong một hàm,
this
tham chiếu đến đối tượng toàn cục . - Trong một chức năng, trong chế độ nghiêm ngặt,
this
làundefined
. - Trong một sự kiện,
this
đề cập đến phần tử đã nhận sự kiện. - Các phương thức như
call()
, vàapply()
có thể tham chiếuthis
đến bất kỳ đối tượng nào .
điều này trong một phương pháp
Trong một phương thức đối tượng, this
tham chiếu đến " chủ sở hữu " của phương thức.
Trong ví dụ trên đầu trang này, this
đề cập đến đối tượng người .
Đối tượng person là chủ sở hữu của phương thức fullName .
fullName : function() {
return this.firstName + " " + this.lastName;
}
một mình này
Khi được sử dụng một mình, chủ sở hữu là đối tượng Toàn cục, do đó, this
đề cập đến đối tượng Toàn cục.
Trong cửa sổ trình duyệt, đối tượng Global là [object Window]
:
Thí dụ
let x = this;
Trong chế độ nghiêm ngặt , khi được sử dụng một mình, this
cũng đề cập đến đối tượng Toàn cục
[object Window]
:
Thí dụ
"use strict";
let x = this;
điều này trong một chức năng (Mặc định)
Trong một hàm JavaScript, chủ sở hữu của hàm là liên kết mặc định cho this
.
Vì vậy, trong một hàm, hãy this
tham chiếu đến đối tượng Toàn cục [object Window]
.
Thí dụ
function myFunction() {
return this;
}
điều này trong một Chức năng (Nghiêm ngặt)
Chế độ nghiêm ngặt JavaScript không cho phép ràng buộc mặc định.
Vì vậy, khi được sử dụng trong một hàm, ở chế độ nghiêm ngặt, this
là undefined
.
Thí dụ
"use strict";
function myFunction() {
return this;
}
cái này trong Trình xử lý sự kiện
Trong trình xử lý sự kiện HTML, this
đề cập đến phần tử HTML đã nhận sự kiện:
Thí dụ
<button onclick="this.style.display='none'">
Click to
Remove Me!
</button>
Phương pháp đối tượng Ràng buộc
Trong các ví dụ này, this
là đối tượng person (Đối tượng person là "chủ sở hữu" của hàm):
Thí dụ
const person = {
firstName : "John",
lastName : "Doe",
id : 5566,
myFunction : function() {
return this;
}
};
Thí dụ
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " +
this.lastName;
}
};
Nói cách khác: this.firstName có nghĩa là thuộc tính firstName của đối tượng này (người).
Ràng buộc chức năng rõ ràng
Các call()
và apply()
phương thức là các phương thức JavaScript được xác định trước.
Cả hai đều có thể được sử dụng để gọi một phương thức đối tượng với một đối tượng khác làm đối số.
Bạn có thể đọc thêm về call()
và apply()
ở phần sau của hướng dẫn này.
Trong ví dụ dưới đây, khi gọi person1.fullName với person2 làm đối số, this
sẽ tham chiếu đến person2, ngay cả khi đó là một phương thức của person1:
Thí dụ
const person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person2 = {
firstName:"John",
lastName: "Doe",
}
person1.fullName.call(person2); // Will return "John Doe"