Việc sử dụng từ khóa này trong Nodejs là gì?

Từ khóa 'this' trong Javascript là một trong những khái niệm thường bị hiểu lầm nhất vì hành vi của nó khác nhau dựa trên cách thức và vị trí nó được gọi

Understanding ‘this’ is JavaScript

Ảnh của Felicia Buitenwerf trên Bapt

Từ khóa 'this' đề cập đến đối tượng/hàm/phương thức hiện tại mà chúng đang làm việc và nó không đặc biệt đối với Javascript, nó cũng có sẵn trong các ngôn ngữ khác, nhưng ở đây trong Javascript, nó hoạt động…

Tóm lược. trong hướng dẫn này, bạn sẽ tìm hiểu về giá trị

console.log(this === window); // true

Code language: JavaScript (javascript)
4 trong JavaScript và hiểu nó một cách rõ ràng trong nhiều ngữ cảnh khác nhau

Nếu bạn đã từng làm việc với các ngôn ngữ lập trình khác như Java, C# hoặc PHP, thì bạn đã quen thuộc với từ khóa

console.log(this === window); // true

Code language: JavaScript (javascript)
4

Trong các ngôn ngữ này, từ khóa 

console.log(this === window); // true

Code language: JavaScript (javascript)
4 đại diện cho phiên bản hiện tại của lớp. Và nó chỉ có liên quan trong lớp

JavaScript cũng có từ khóa

console.log(this === window); // true

Code language: JavaScript (javascript)
4. Tuy nhiên, từ khóa

console.log(this === window); // true

Code language: JavaScript (javascript)
4 trong JavaScript hoạt động khác với các ngôn ngữ lập trình khác

Trong JavaScript, bạn có thể sử dụng từ khóa 

console.log(this === window); // true

Code language: JavaScript (javascript)
4 trong ngữ cảnh chung và ngữ cảnh chức năng. Hơn nữa, hành vi của từ khóa  

console.log(this === window); // true

Code language: JavaScript (javascript)
4 thay đổi giữa các chế độ nghiêm ngặt và không nghiêm ngặt

từ khóa này là gì

Nói chung,

console.log(this === window); // true

Code language: JavaScript (javascript)
4 tham chiếu đối tượng mà hàm là một thuộc tính. Nói cách khác,

console.log(this === window); // true

Code language: JavaScript (javascript)
4 tham chiếu đối tượng hiện đang gọi hàm

Giả sử bạn có một đối tượng tên là

this.color= 'Red'; console.log(window.color); // 'Red'

Code language: JavaScript (javascript)
3 có phương thức

this.color= 'Red'; console.log(window.color); // 'Red'

Code language: JavaScript (javascript)
4. Khi bạn gọi phương thức

this.color= 'Red'; console.log(window.color); // 'Red'

Code language: JavaScript (javascript)
4, bạn có thể truy cập đối tượng

console.log(this === window); // true

Code language: JavaScript (javascript)
4

console.log(this === window); // true

Code language: JavaScript (javascript)
3

Bên trong hàm

this.color= 'Red'; console.log(window.color); // 'Red'

Code language: JavaScript (javascript)
4,

console.log(this === window); // true

Code language: JavaScript (javascript)
4 tham chiếu đối tượng

this.color= 'Red'; console.log(window.color); // 'Red'

Code language: JavaScript (javascript)
3. Xem cuộc gọi phương thức sau

console.log(this === window); // true

Code language: JavaScript (javascript)
7

this.color= 'Red'; console.log(window.color); // 'Red'

Code language: JavaScript (javascript)
4 là một hàm là thuộc tính của đối tượng

this.color= 'Red'; console.log(window.color); // 'Red'

Code language: JavaScript (javascript)
3. Do đó, bên trong hàm

this.color= 'Red'; console.log(window.color); // 'Red'

Code language: JavaScript (javascript)
4,

console.log(this === window); // true

Code language: JavaScript (javascript)
4 tham chiếu đối tượng

this.color= 'Red'; console.log(window.color); // 'Red'

Code language: JavaScript (javascript)
3

Bối cảnh toàn cầu

Trong ngữ cảnh toàn cầu,

console.log(this === window); // true

Code language: JavaScript (javascript)
4 tham chiếu đối tượng toàn cầu, đó là đối tượng

console.log(this === window); // true

Code language: JavaScript (javascript)
46 trên trình duyệt web hoặc đối tượng

console.log(this === window); // true

Code language: JavaScript (javascript)
47 trên Node. js

Hành vi này nhất quán ở cả chế độ nghiêm ngặt và không nghiêm ngặt. Đây là đầu ra trên trình duyệt web

console.log(this === window); // true

Code language: JavaScript (javascript)

Nếu bạn gán một thuộc tính cho đối tượng

console.log(this === window); // true

Code language: JavaScript (javascript)
4 trong ngữ cảnh toàn cầu, JavaScript sẽ thêm thuộc tính đó vào đối tượng toàn cầu như trong ví dụ sau

this.color= 'Red'; console.log(window.color); // 'Red'

Code language: JavaScript (javascript)

bối cảnh chức năng

Trong JavaScript, bạn có thể gọi một hàm theo các cách sau

  • lời gọi hàm
  • gọi phương thức
  • lời gọi hàm tạo
  • lời mời gián tiếp

Mỗi lời gọi hàm xác định bối cảnh riêng của nó. Do đó,

console.log(this === window); // true

Code language: JavaScript (javascript)
4 hành xử khác đi

1) Gọi hàm đơn giản

Ở chế độ không nghiêm ngặt,

console.log(this === window); // true

Code language: JavaScript (javascript)
4 tham chiếu đối tượng toàn cục khi hàm được gọi như sau

console.log(this === window); // true

Code language: JavaScript (javascript)
4

Khi bạn gọi hàm

console.log(this === window); // true

Code language: JavaScript (javascript)
21, thì

console.log(this === window); // true

Code language: JavaScript (javascript)
4 sẽ tham chiếu đến đối tượng chung, đó là

console.log(this === window); // true

Code language: JavaScript (javascript)
46 trên trình duyệt web và

console.log(this === window); // true

Code language: JavaScript (javascript)
47 trên Node. js

Gọi hàm

console.log(this === window); // true

Code language: JavaScript (javascript)
21 giống như

console.log(this === window); // true

Code language: JavaScript (javascript)
2

Ở chế độ nghiêm ngặt, JavaScript đặt

console.log(this === window); // true

Code language: JavaScript (javascript)
4 bên trong một hàm thành

console.log(this === window); // true

Code language: JavaScript (javascript)
27. Ví dụ

console.log(this === window); // true

Code language: JavaScript (javascript)
0

Để bật chế độ nghiêm ngặt, bạn sử dụng lệnh

console.log(this === window); // true

Code language: JavaScript (javascript)
28 ở đầu tệp JavaScript. Nếu bạn chỉ muốn áp dụng chế độ nghiêm ngặt cho một chức năng cụ thể, bạn đặt nó ở đầu thân chức năng

Lưu ý rằng chế độ nghiêm ngặt đã có từ ECMAScript 5. 1. Chế độ

console.log(this === window); // true

Code language: JavaScript (javascript)
29 áp dụng cho cả chức năng và chức năng lồng nhau. Ví dụ

console.log(this === window); // true

Code language: JavaScript (javascript)
3

đầu ra

console.log(this === window); // true

Code language: JavaScript (javascript)
4

Trong chức năng bên trong của

console.log(this === window); // true

Code language: JavaScript (javascript)
00,

console.log(this === window); // true

Code language: JavaScript (javascript)
4 cũng được đặt thành

console.log(this === window); // true

Code language: JavaScript (javascript)
27 như được hiển thị trong bảng điều khiển

2) 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

console.log(this === window); // true

Code language: JavaScript (javascript)
4 thành đối tượng sở hữu phương thức đó. Xem đối tượng

console.log(this === window); // true

Code language: JavaScript (javascript)
04 sau

console.log(this === window); // true

Code language: JavaScript (javascript)
0

Trong ví dụ này, đối tượng

console.log(this === window); // true

Code language: JavaScript (javascript)
4 trong phương thức

console.log(this === window); // true

Code language: JavaScript (javascript)
06 tham chiếu đối tượng

console.log(this === window); // true

Code language: JavaScript (javascript)
04

Vì một phương thức là một thuộc tính của một đối tượng là một giá trị, nên bạn có thể lưu trữ nó trong một biến

console.log(this === window); // true

Code language: JavaScript (javascript)
70

Và sau đó gọi phương thức thông qua biến

console.log(this === window); // true

Code language: JavaScript (javascript)
71

Bạn nhận được

console.log(this === window); // true

Code language: JavaScript (javascript)
27 thay vì

console.log(this === window); // true

Code language: JavaScript (javascript)
09 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

console.log(this === window); // true

Code language: JavaScript (javascript)
4 thành đối tượng chung ở chế độ không nghiêm ngặt và

console.log(this === window); // true

Code language: JavaScript (javascript)
27 ở chế độ nghiêm ngặt

Để khắc phục sự cố này, bạn sử dụng phương thức

console.log(this === window); // true

Code language: JavaScript (javascript)
32 của đối tượng

console.log(this === window); // true

Code language: JavaScript (javascript)
33. Phương thức

console.log(this === window); // true

Code language: JavaScript (javascript)
34 tạo một hàm mới có từ khóa

console.log(this === window); // true

Code language: JavaScript (javascript)
4 được đặt thành một giá trị được chỉ định

console.log(this === window); // true

Code language: JavaScript (javascript)
72

Trong ví dụ này, khi bạn gọi phương thức

console.log(this === window); // true

Code language: JavaScript (javascript)
36, từ khóa

console.log(this === window); // true

Code language: JavaScript (javascript)
4 được liên kết với đối tượng

console.log(this === window); // true

Code language: JavaScript (javascript)
04. Ví dụ

console.log(this === window); // true

Code language: JavaScript (javascript)
73

đầu ra

console.log(this === window); // true

Code language: JavaScript (javascript)
74

Trong ví dụ này, phương thức

console.log(this === window); // true

Code language: JavaScript (javascript)
34 đặt

console.log(this === window); // true

Code language: JavaScript (javascript)
4 thành đối tượng

console.log(this === window); // true

Code language: JavaScript (javascript)
41, do đó, bạn sẽ thấy giá trị của thuộc tính

console.log(this === window); // true

Code language: JavaScript (javascript)
42 của đối tượng

console.log(this === window); // true

Code language: JavaScript (javascript)
41 trên bảng điều khiển

3) Gọi hàm tạo

Khi bạn sử dụng từ khóa

console.log(this === window); // true

Code language: JavaScript (javascript)
44 để tạo một thể hiện của đối tượng hàm, bạn sử dụng hàm này làm hàm tạo

Ví dụ sau khai báo một hàm

console.log(this === window); // true

Code language: JavaScript (javascript)
45, sau đó gọi nó như một hàm tạo

console.log(this === window); // true

Code language: JavaScript (javascript)
75

Biểu thức

console.log(this === window); // true

Code language: JavaScript (javascript)
46 là lời gọi hàm tạo của hàm

console.log(this === window); // true

Code language: JavaScript (javascript)
45

JavaScript tạo một đối tượng mới và đặt

console.log(this === window); // true

Code language: JavaScript (javascript)
4 cho đối tượng mới được tạo. Mô hình này hoạt động tốt chỉ với một vấn đề tiềm ẩn

Bây giờ, bạn có thể gọi

console.log(this === window); // true

Code language: JavaScript (javascript)
49 dưới dạng hàm hoặc hàm tạo. Nếu bạn bỏ qua từ khóa

console.log(this === window); // true

Code language: JavaScript (javascript)
44 như sau

console.log(this === window); // true

Code language: JavaScript (javascript)
76

Vì giá trị

console.log(this === window); // true

Code language: JavaScript (javascript)
4 trong

console.log(this === window); // true

Code language: JavaScript (javascript)
49 được đặt thành đối tượng chung, nên

console.log(this === window); // true

Code language: JavaScript (javascript)
03 trả về

console.log(this === window); // true

Code language: JavaScript (javascript)
27

Để đảm bảo rằng hàm

console.log(this === window); // true

Code language: JavaScript (javascript)
49 luôn được gọi bằng cách sử dụng lời gọi hàm tạo, bạn thêm dấu kiểm vào đầu hàm

console.log(this === window); // true

Code language: JavaScript (javascript)
49 như sau

console.log(this === window); // true

Code language: JavaScript (javascript)
77

ES6 đã giới thiệu một thuộc tính meta có tên là

console.log(this === window); // true

Code language: JavaScript (javascript)
07 cho phép bạn phát hiện xem một hàm được gọi dưới dạng một lời gọi đơn giản hay dưới dạng một hàm tạo

Bạn có thể sửa đổi hàm

console.log(this === window); // true

Code language: JavaScript (javascript)
49 sử dụng siêu thuộc tính

console.log(this === window); // true

Code language: JavaScript (javascript)
07 như sau

console.log(this === window); // true

Code language: JavaScript (javascript)
78

4) Gọi gián tiếp

Trong JavaScript, các chức năng là công dân hạng nhất. Nói cách khác, hàm là đối tượng, là thể hiện của kiểu Hàm

Loại

console.log(this === window); // true

Code language: JavaScript (javascript)
700 có hai phương thức.

console.log(this === window); // true

Code language: JavaScript (javascript)
701 và

console.log(this === window); // true

Code language: JavaScript (javascript)
702. Các phương thức này cho phép bạn đặt giá trị

console.log(this === window); // true

Code language: JavaScript (javascript)
4 khi gọi hàm. Ví dụ

console.log(this === window); // true

Code language: JavaScript (javascript)
79

đầu ra

console.log(this === window); // true

Code language: JavaScript (javascript)
0

Trong ví dụ này, chúng tôi đã gọi gián tiếp hàm

console.log(this === window); // true

Code language: JavaScript (javascript)
06 bằng cách sử dụng phương thức

console.log(this === window); // true

Code language: JavaScript (javascript)
705 của hàm

console.log(this === window); // true

Code language: JavaScript (javascript)
706. Chúng tôi đã thông qua đối tượng

console.log(this === window); // true

Code language: JavaScript (javascript)
707 và  

console.log(this === window); // true

Code language: JavaScript (javascript)
708 làm đối số đầu tiên của phương thức

console.log(this === window); // true

Code language: JavaScript (javascript)
705, do đó, chúng tôi có thương hiệu tương ứng trong mỗi cuộc gọi

Phương thức

console.log(this === window); // true

Code language: JavaScript (javascript)
710 tương tự như phương thức

console.log(this === window); // true

Code language: JavaScript (javascript)
705 ngoại trừ đối số thứ hai của nó là một mảng các đối số

console.log(this === window); // true

Code language: JavaScript (javascript)
1

chức năng mũi tên

ES6 đã giới thiệu một khái niệm mới gọi là chức năng mũi tên. Trong các hàm mũi tên, JavaScript đặt

console.log(this === window); // true

Code language: JavaScript (javascript)
4 theo từ vựng

Điều đó có nghĩa là hàm mũi tên không tạo ngữ cảnh thực thi của riêng nó mà kế thừa

console.log(this === window); // true

Code language: JavaScript (javascript)
4 từ hàm bên ngoài nơi hàm mũi tên được xác định. Xem ví dụ sau

console.log(this === window); // true

Code language: JavaScript (javascript)
2

Trong ví dụ này, giá trị

console.log(this === window); // true

Code language: JavaScript (javascript)
4 được đặt thành đối tượng toàn cầu i. e. ,

console.log(this === window); // true

Code language: JavaScript (javascript)
46 trong trình duyệt web

Vì hàm mũi tên không tạo bối 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 hàm mũi tên sẽ gây ra sự cố. Ví dụ

console.log(this === window); // true

Code language: JavaScript (javascript)
3

Bên trong phương thức

console.log(this === window); // true

Code language: JavaScript (javascript)
716, giá trị

console.log(this === window); // true

Code language: JavaScript (javascript)
4 tham chiếu đối tượng toàn cục, không phải đối tượng

console.log(this === window); // true

Code language: JavaScript (javascript)
45 nhưng đối tượng toàn cục không có thuộc tính gọi là tốc độ. Do đó,

console.log(this === window); // true

Code language: JavaScript (javascript)
719 trong phương thức

console.log(this === window); // true

Code language: JavaScript (javascript)
716 trả về

console.log(this === window); // true

Code language: JavaScript (javascript)
27

Việc sử dụng từ khóa này trong nút JS là gì?

Từ khóa this chỉ các đối tượng khác nhau tùy thuộc vào cách nó được sử dụng . Trong một phương thức đối tượng, điều này đề cập đến đối tượng. Một mình, điều này đề cập đến đối tượng toàn cầu. Trong một chức năng, điều này đề cập đến đối tượng toàn cầu.

Việc sử dụng từ khóa này là gì?

Từ khóa this đề cập đến đối tượng hiện tại trong một phương thức hoặc hàm tạo. Cách sử dụng phổ biến nhất của từ khóa this là để loại bỏ sự nhầm lẫn giữa thuộc tính lớp và tham số có cùng tên (vì thuộc tính lớp bị ẩn bởi phương thức .

Tại sao điều này được sử dụng trong JavaScript?

Từ khóa “Đây” chỉ một đối tượng đang thực thi đoạn mã hiện tại . Nó tham chiếu đối tượng đang thực thi chức năng hiện tại. Nếu hàm đang được tham chiếu là một hàm thông thường, thì “this” sẽ tham chiếu đối tượng toàn cục.

Giá trị này trong JavaScript là gì?

Giá trị này khác nhau trong từng ngữ cảnh. Các hàm tạo của lớp luôn được gọi với new , vì vậy hành vi của chúng giống như các hàm tạo của hàm. giá trị này là phiên bản mới đang được tạo . Các phương thức của lớp hoạt động giống như các phương thức trong nghĩa đen của đối tượng - giá trị this là đối tượng mà phương thức được truy cập trên đó.