JavaScript cái này | Giải thích

Javascript Cai Nay Giai Thich



Một trong những khái niệm thách thức nhất và được sử dụng thường xuyên trong JavaScript là “ đây Từ khóa ”. JavaScript sử dụng “ đây Từ khóa khác với các ngôn ngữ khác. Tuy nhiên, nó là điều cần thiết để tạo mã JavaScript nâng cao hơn. Là người mới bắt đầu, bạn có thể hơi khó hiểu cách sử dụng từ khóa được đề cập, nhưng đừng lo lắng!

Bài đăng này sẽ giải thích “ đây Từ khóa ”và cách sử dụng nó trong JavaScript.







“Cái này” trong JavaScript là gì?

đây ”Là từ khóa trong JavaScript đề cập đến một đối tượng thực thi khối mã hiện có. Nó đại diện cho một đối tượng đang gọi hàm hiện tại. Nó được sử dụng trong nhiều trường hợp theo những cách khác nhau, chẳng hạn như:



    • Trong phương pháp
    • Trong xử lý sự kiện
    • Trong các chức năng

Chúng ta hãy kiểm tra từng cách sử dụng đã đề cập!



Làm thế nào để sử dụng “cái này” trong các Phương thức JavaScript?

đây ”Được sử dụng trong các phương thức JavaScript như một ràng buộc ngầm định. Khi hàm được gọi với sự trợ giúp của một đối tượng và một dấu chấm, nó được coi là ràng buộc ngầm và “ đây ”Chỉ ra đối tượng trong khi gọi hàm.





Thí dụ

Đầu tiên, chúng tôi sẽ tạo một đối tượng với một số thuộc tính và một phương thức, sau đó sử dụng “ đây Từ khóa ”để nhận các giá trị thuộc tính của đối tượng:



var personInfo = {
Tên: 'John' ,
tuổi tác : hai mươi ,
thông tin: hàm số ( ) {
console.log ( 'Hy! Tôi là' + this.name + ' và tôi là ' + this.age + ' tuổi' ) ;
}
}


Tiếp theo, hãy gọi “ thông tin() ”Cùng với tên đối tượng:

personInfo.info ( ) ;


Có thể thấy rằng các giá trị thuộc tính được chỉ định của đối tượng hiện tại được hiển thị thành công:


Nếu bạn muốn sử dụng “ đây ”Trong việc xử lý sự kiện, hãy làm theo phần bên dưới.

Làm thế nào để Sử dụng “cái này” trong Xử lý Sự kiện JavaScript?

Trong ví dụ này, hãy kiểm tra việc sử dụng “ đây ”Trong xử lý sự kiện. Đối với điều này, hãy xem xét một ví dụ trong đó chúng tôi sẽ ẩn nút của mình bằng một cú nhấp chuột. Để làm như vậy, hãy tạo một nút và đính kèm “ trong một cái nhấp chuột() ”Với nó để truy cập thuộc tính style.display với“ đây ”Từ khóa sẽ ẩn nút khi được nhấp vào:

< h3 > Nhấp để ẩn nút h3 >
< cái nút trong một cái nhấp chuột = 'this.style.display = 'none'' > Bấm vào đây ! cái nút >


Đầu ra


Nếu bạn bối rối về việc sử dụng “ đây ”Trong các hàm do người dùng xác định trong JavaScript, hãy làm theo phần đã cho.

Làm thế nào để Sử dụng “this” trong các Hàm JavaScript?

Trong khi sử dụng ' đây ”Trong các hàm, có ba loại liên kết trong JavaScript, bao gồm:

    • Ràng buộc mặc định
    • Ràng buộc ngầm
    • Ràng buộc rõ ràng

Hãy hiểu chúng theo từng cá nhân!

Ví dụ 1: Sử dụng từ khóa này trong Ràng buộc Mặc định

Trong ràng buộc mặc định, “ đây Từ khóa ”hoạt động như một đối tượng toàn cục. Nó chủ yếu được sử dụng trong các chức năng độc lập.

Hãy hiểu khái niệm đã nêu với một ví dụ.

Đầu tiên, chúng tôi sẽ tạo một biến “ x 'Và gán cho nó giá trị' mười lăm ”:

var x = mười lăm ;


Sau đó, xác định một hàm có tên là “ functionDB () ”Và định nghĩa hàm của nó, tạo một biến có cùng tên“ x 'Và gán cho nó một giá trị' 5 ”, Sau đó, in giá trị của nó bằng cách sử dụng“ console.log () 'Phương pháp với' đây ”Từ khóa:

var functionDB = hàm số ( ) {
var x = 5 ;
console.log ( this.x ) ;
}


Cuối cùng, hãy gọi “ functionDB () ' hàm số:

functionDB ( ) ;


Do việc sử dụng “ đây Từ khóa ”, đầu ra hiển thị giá trị của“ x ' như ' mười lăm 'Bởi vì nó hoạt động như một đối tượng toàn cục và quá trình này được gọi là' Ràng buộc động ”:


Ví dụ 2: Sử dụng từ khóa này trong Liên kết Ngầm định

Khi hàm được gọi bằng một đối tượng hoặc một biểu tượng dấu chấm, “ đây ”Từ khóa hoạt động như một ràng buộc ngầm. Nó chỉ ra đối tượng trong khi gọi hàm.

Trong ví dụ này, chúng tôi sẽ xác định một hàm “ thông tin() ”Và sử dụng“ đây ”Từ khóa trong định nghĩa hàm:

hàm số thông tin ( ) {
console.log ( 'Hy! Tôi là' + this.name + ' và tôi là ' + this.age + ' tuổi' )
}


Sau đó, tạo một đối tượng có tên là “ personInfo ”Với các thuộc tính được xác định:

var personInfo = {
Tên: 'John' ,
tuổi tác : hai mươi ,
info: thông tin
}


Bây giờ, hãy gọi hàm cùng đối tượng:

personInfo.info ( ) ;


Đầu ra


Ví dụ 3: Sử dụng từ khóa này trong Ràng buộc rõ ràng

Ràng buộc rõ ràng còn được gọi là “ ràng buộc cứng 'Bởi vì hàm được gọi một cách bắt buộc để sử dụng một đối tượng cụ thể cho' đây ”Ràng buộc, mà không đặt một tham chiếu hàm thuộc tính vào đối tượng. Với mục đích này, các phương thức call (), apply () và bind () có thể được sử dụng.

Bây giờ chúng tôi sẽ sử dụng cùng một chức năng có tên là “ thông tin() ”Được xác định trong ví dụ trước. Sau đó, tạo một đối tượng có tên là “ personInfo ”Với các giá trị sau:

var personInfo = {
Tên: 'John' ,
tuổi tác : hai mươi
}


Để gọi hàm có tên “ thông tin() ”, Chúng tôi sẽ sử dụng“ cuộc gọi() ”Và chuyển đối tượng đã tạo mà nó vào làm đối số:

info.call ( personInfo ) ;


Vì thông tin () không phải là một phần của đối tượng, chúng tôi vẫn truy cập rõ ràng vào nó:


Để gọi một hàm một cách rõ ràng, bạn cũng có thể sử dụng các phương thức apply () và bind (). Phương thức apply () giống với phương thức call (), trong khi phương thức bind () tạo ra một hàm mới có cùng nội dung và phạm vi hoạt động giống như hàm gốc. Phương thức bind () có thể được sử dụng để trả về một hàm mà bạn có thể sử dụng sau này.

Để gọi thông tin () bằng phương thức apply (), hãy sử dụng câu lệnh sau:

info.apply ( personInfo ) ;


Nó cung cấp đầu ra giống như phương thức call () đưa ra:


Để gọi ' thông tin() ”Với“ trói buộc() ”, Sử dụng câu lệnh đã cho:

info.bind ( personInfo ) ;


Đầu ra


Chúng tôi đã tổng hợp tất cả các thông tin thiết yếu liên quan đến “ đây Từ khóa ”.

Sự kết luận

đây ”Là từ khóa trong JavaScript đề cập đến một đối tượng thực thi khối mã hiện có. Nó đại diện cho đối tượng đang gọi hàm hiện tại. Nó được sử dụng trong nhiều tình huống theo những cách khác nhau, bao gồm các phương pháp, xử lý sự kiện và các chức năng. Trong bài đăng này, chúng tôi đã giải thích về “ đây Từ khóa ”trong JavaScript.