Không còn nghi ngờ gì nữa, từ khóa this
là một trong những khái niệm Javascript khó hiểu nhất. Tuy nhiên, hiểu nó là chìa khóa để trở thành một nhà phát triển tuyệt vời vì nó là một phần cực kỳ phổ biến của mã Javascript. Nói một cách đơn giản, điều này đề cập đến đối tượng mà nó thuộc về. Nó cũng có thể được định nghĩa là một thuộc tính của bối cảnh thực thi, luôn là tham chiếu đến một đối tượng khi không ở chế độ nghiêm ngặt. Cần lưu ý rằng từ khóa 'này' được sử dụng chủ yếu trong ngữ cảnh của. Với ý nghĩ đó, từ khóa 'this' sẽ đề cập đến đối tượng mà nó thuộc về; . Hãy để chúng tôi sử dụng một ví dụ để giải thích điều này tốt hơn
let bellBoy = {
firstName: "Andrew",
lastName: "Mike",
gender: "Male",
age: 18,
greet: function [] {
return [
"Hi! I am " +
this.firstName +
" " +
this.lastName +
", a bell boy and I am at your service"
]
},
}
console.log[bellBoy.greet[]]
Trong ví dụ trên, tồn tại một Đối tượng bellBoy bao gồm bốn thuộc tính và một phương thức chào. Khi phương thức chào của đối tượng bellBoy được gọi, bạn có biết cái gì sẽ được trả về không? . log sẽ in chuỗi sau. Xin chào. Tôi là Andrew Mike, một cậu bé bán hàng, và tôi đang phục vụ bạn
Làm thế nào 'điều này. FirstName' và 'this. lastName' lần lượt dịch sang Andrew và Mike? . Nó đã được nói trước đó, rằng nó đề cập đến đối tượng mà nó thuộc về. Vì vậy, trong ví dụ trên, từ khóa 'this' đề cập đến đối tượng bellBoy, là chủ sở hữu của phương thức welcome[]. Dấu chấm[. ] toán tử có thể được sử dụng để truy cập các thành viên của đối tượng như được xác định bởi từ khóa 'this'. Trong bảng điều khiển hiện tại. log[], chúng tôi đang sử dụng dấu chấm [. ] để gọi hoặc truy cập phương thức welcome[]. Theo cách tương tự, chúng ta có thể sử dụng dấu chấm [. ] để truy cập phương thức thuộc tính của đối tượng bellBoy như giới tính và tuổi
Các bối cảnh có thể sử dụng từ khóa 'this'
Định nghĩa this là thuộc tính của bối cảnh thực thi chính xác hơn nhiều vì tùy thuộc vào cách nó được gọi trong thời gian chạy, 'this' có thể đề cập đến nhiều thứ. Hãy tìm hiểu sâu hơn
this
trong phương thức của một đối tượngĐầu tiên, một phương thức được sử dụng để chỉ một hàm là thành viên của một đối tượng. Tất cả các phương thức đều là hàm, nhưng không phải tất cả hàm đều là phương thức. Bây giờ, khi từ khóa 'this' được sử dụng bên trong một phương thức, nó đề cập đến chủ sở hữu của phương thức mà nó được sử dụng trong. Hãy sử dụng ví dụ được xác định ở trên để xem xét kỹ hơn về 'cái này' trong ngữ cảnh này
greet : function[] { return "Hi! I am " + this.firstName + " " + this. lastName + ", a bell boy and I am at your service"; }
Trong ví dụ này,
this
được sử dụng bên trong phương thức
0 đề cập đến đối tượng bellBoy, là chủ sở hữu của phương thứcgreet : function[] { return "Hi! I am " + this.firstName + " " + this. lastName + ", a bell boy and I am at your service"; }
0 đógreet : function[] { return "Hi! I am " + this.firstName + " " + this. lastName + ", a bell boy and I am at your service"; }
this
trong bối cảnh toàn cầuKhi từ khóa 'this' được sử dụng một mình, không nằm trong bất kỳ chức năng nào hoặc được gọi tốt hơn là được sử dụng trong ngữ cảnh toàn cầu, thì từ khóa đề cập đến đối tượng toàn cầu. Đối tượng toàn cầu đề cập đến chủ sở hữu của từ khóa 'this' trong trường hợp này. Khi nó ở trong cửa sổ trình duyệt, đối tượng chung này đề cập đến đối tượng cửa sổ
let y = this console.log[y]
.Vì đó là sự thật, nếu bạn so sánh chặt chẽ giữa giá trị của this và đối tượng window, chúng ta sẽ nhận được giá trị boolean là true
Nếu bạn chạy tệp javascript này bên trong máy tính của mình bằng một công cụ như nút, thì từ khóa này đề cập đến một đối tượng thuộc loại đối tượng, như vậy
this
trong một chức năngLưu ý, chúng ta đang nói về từ khóa 'this' đề cập đến điều gì khi nó được sử dụng trong một chức năng thông thường, một chức năng không liên kết với bất kỳ đối tượng nào. Chỉ là một chức năng đang đứng một mình. Trong một đối tượng javascript như vậy, giá trị mặc định của 'this' là chủ sở hữu của hàm. Nếu mã không ở chế độ nghiêm ngặt và nó không được đặt thành thành viên của một đối tượng, thì
this
mặc định là đối tượng chungfunction function1[] { return this } function1[] === window
Trong ví dụ trên, giá trị của từ khóa
this
được sử dụng bên trong hàm này đề cập đến đối tượng cửa sổ. Đây là lý do tại sao đầu ra của so sánh chuỗi giữa funtion1 và đối tượng cửa sổ sẽ bằng
6 vì chúng giữ cùng một giá trịgreet : function[] { return "Hi! I am " + this.firstName + " " + this. lastName + ", a bell boy and I am at your service"; }
this
trong một chức năng [Chế độ nghiêm ngặt]Tuy nhiên, khi ở chế độ nghiêm ngặt, Javascript không cho phép liên kết mặc định và do đó, nó không được xác định. Đặt chế độ nghiêm ngặt đơn giản ngăn mã cẩu thả. Nghĩ theo quan điểm của một lập trình viên, rất có thể không có lý do chính đáng nào để muốn truy cập giá trị của this trong một hàm vì nó sẽ trả về đối tượng cửa sổ. Trong hầu hết các trường hợp, chúng tôi truy cập từ khóa
this
vì chúng tôi muốn lấy một số tài sản khác từ chủ sở hữu của nó. Chế độ nghiêm ngặt thực thi điều này. Vì vậy, khi ở chế độ này, 'cái này' không được xác định"use strict" function function1[] { return this } function1[] === window
Như có thể thấy trong ví dụ trên, ở chế độ nghiêm ngặt, giá trị của
this
bên trong một hàm là
0let y = this console.log[y]
this
khi được sử dụng bên trong Trình xử lý sự kiệnTrình xử lý sự kiện là một hành động được thực hiện khi một sự kiện được coi là đã xảy ra. Ví dụ: khi một nút được nhấp, chúng tôi với tư cách là người lập trình có thể quyết định ẩn nút đó. Để đạt được điều đó, sự kiện nhấp chuột phải được lắng nghe và trình xử lý sự kiện phải được đưa ra để thực hiện hành động khi sự kiện đó được kích hoạt. Trong trường hợp xử lý sự kiện, từ khóa
this
đề cập đến phần tử đã nhận sự kiện, như thế nàywindow.addEventListener["keydown", function [event] { // `this` will point to `element`, in this case the window object console.log[this.event.key] }]
Trong ví dụ trên, một trình lắng nghe sự kiện của
3 đang được lắng nghe bởi đối tượng cửa sổ và khi sự kiện đó được nhận biết, một chức năng nhận sự kiện sẽ được chạy. Công việc của chức năng đó là điều khiển. nhật kýlet y = this console.log[y]
4. Nếu bạn cố chạy mã này trên trình duyệt, bạn sẽ lấy lại bất kỳ phím nào mà người dùng đã nhấn. Do đó, trong trường hợp này,let y = this console.log[y]
this
đề cập đến đối tượng cửa sổ là đối tượng nhận đối tượng và như với tất cả các đối tượng khác, các thuộc tính của nó có thể được truy cập bằng cách sử dụng dấu chấm [. ] nhà điều hành. Giá trị củathis
khi được sử dụng trong trình xử lý sự kiện sẽ đề cập đến người nhận sự kiện, có thể là đối tượng cửa sổ trong trường hợp này hoặc bất kỳ phần tử HTML cục bộ nào khác mà chúng tôi có thể tạothis
trong Trình xử lý sự kiện nội tuyếnI am a this
Có một chút khác biệt khi 'cái này' được sử dụng trong trình xử lý sự kiện nội tuyến. Trong trường hợp này, giá trị của nó được đặt thành phần tử DOM nơi người nghe được đặt. Trong ví dụ trên, nút được trả về vì sự kiện onClick đang được chấp nhận bởi phần tử DOM có tên thẻ được trả về trong phương thức cảnh báo
Có nhiều ngữ cảnh hơn trong đó giá trị của từ khóa 'this' khác nhau
- điều này trong các lớp học
- đây là một nhà xây dựng
- cái này với phương thức getter hoặc setter
- cái này trên chuỗi nguyên mẫu của một đối tượng
- cái này trong hàm mũi tên
Và nhiều cái khác. Để biết mô tả đầy đủ về từ khóa this
, hãy xem các liên kết này
Có thể là một ý kiến hay khi chạy các đoạn mã để đảm bảo rằng bạn hiểu cách chúng hoạt động. Để làm điều này, hãy sử dụng trình tạo web miễn phí hoặc sân chơi mã codeplay