Tại sao từ khóa này được sử dụng trong javascript?

Từ khóa this là một biến tham chiếu đề cập đến đối tượng hiện tại. Ở đây, chúng ta sẽ tìm hiểu về từ khóa này với sự trợ giúp của các ví dụ khác nhau

JavaScript ví dụ về từ khóa này

Hãy xem một ví dụ đơn giản về từ khóa này

đầu ra

Các cách sau đây có thể được sử dụng để biết đối tượng nào được giới thiệu bởi từ khóa này

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

Trong ngữ cảnh toàn cầu, các biến được khai báo bên ngoài hàm. Ở đây, từ khóa này đề cập đến đối tượng cửa sổ

Phương thức call[] và apply[]

Phương thức call[] và apply[] cho phép chúng ta viết một phương thức có thể sử dụng trên các đối tượng khác nhau

Phương thức liên kết []

Phương thức bind[] đã được giới thiệu trong ECMAScript 5. Nó tạo một hàm mới có từ khóa this đề cập đến giá trị được cung cấp, với một chuỗi các đối số đã cho

CSS Visual Dictionary chứa các sơ đồ trực quan cho mọi thuộc tính CSS đơn lẻ được sử dụng phổ biến. Ngữ pháp JavaScript chứa…

hướng dẫn js. Trung bình. com

JavaScript mượn từ khóa this từ C++, nơi nó được sử dụng để trỏ đến một thể hiện của một đối tượng từ bên trong định nghĩa lớp của chính nó. Hoàn toàn không có sự nhầm lẫn nào về từ khóa this trong C++ bởi vì nó không bao giờ được sử dụng cho bất kỳ mục đích nào khác ngoài việc trỏ đến một thể hiện của một đối tượng từ hàm tạo của nó

Nhà thiết kế ban đầu của JavaScript đã quyết định kết hợp một tính năng phụ với tính năng này. Nó không chỉ được sử dụng để trỏ đến một thể hiện của một đối tượng từ hàm tạo của chính nó hoặc các phương thức của nó [do đó, this], mà còn được sử dụng để theo dõi ngữ cảnh thực thi — thường dựa trên vị trí một hàm được gọi từ đâu.

Tính hai mặt của điều này chính xác là thứ đã tàn phá việc học và hiểu cách thức hoạt động của nó. Đó cũng là lý do tại sao điều này có thể gây nhầm lẫn ngay cả với những lập trình viên đến với JavaScript từ C++

Vì vậy, hãy tóm tắt cho JavaScript

1. Từ khóa this được sử dụng để trỏ đến thể hiện của một đối tượng từ hàm tạo và phương thức của chính nó [khi được sử dụng bên trong phạm vi hàm hoặc lớp. ]
2. Từ khóa this cũng theo dõi ngữ cảnh thực thi, thường được một số người gọi là phạm vi từ vựng hoặc môi trường từ vựng. Hãy coi phạm vi từ vựng là vị trí trong bộ nhớ được phân bổ cho tất cả các biến cục bộ cho phạm vi đó
3. Liên kết đến ngữ cảnh thực thi có thể thay đổi. ví dụ: sử dụng cái này bên trong hàm mũi tên không giống như sử dụng cái này trong hàm kiểu ES. Các hàm mũi tên không phải là hàm tạo và không thể được sử dụng để khởi tạo một đối tượng. Vì vậy, họ thậm chí không có bối cảnh này của riêng mình. Nhưng họ có cái này. Vì vậy, những gì nó trỏ đến?
4. Liên kết đến bối cảnh thực thi cũng được thiết lập khi điều này được tham chiếu bởi hàm gọi lại, ngay cả khi hàm đó được xác định bên trong hàm tạo của đối tượng [khi hàm hoặc lớp được sử dụng làm hàm tạo đối tượng. ]

Chúng ta hãy xem ý tưởng ban đầu đằng sau điều này

function Cat[] {
  this.name = "felix";
  console.log[this]; // Cat {name: "felix"}
}let cat = new Cat[]; // Cat {name: "felix"}

Trong hàm ví dụ này, Cat được sử dụng làm hàm tạo cho đối tượng kiểu Cat. Không có sự nhầm lẫn nào. Tham chiếu this trỏ đến chính nó. Ý tôi là… đây là lý do tại sao nó được gọi là cái này ngay từ đầu. "đối tượng này" chúng tôi đang xác định ngay bây giờ

Khi được sử dụng làm hàm tạo, phần thân của hàm sẽ trở thành vùng xây dựng đối tượng

Như mong đợi, ở đây điều này chỉ đến bản thân. con mèo {tên. “felix” }

Sau khi khởi tạo cat, cat. tên sẽ là “felix”, bởi vì tên thuộc tính đã được đính kèm với một đối tượng trong tương lai. Điều tương tự cũng xảy ra với từ khóa lớp

class Mouse {
  constructor[] {
    this.name = "mappy";
    console.log[this]; // Mouse {name: "mappy"}
  }
}let mouse = new Mouse[]; // Mouse{name: "mappy"}

Điều tương tự cũng được quan sát ở đây. Điều này có ý nghĩa hoàn hảo. Nếu chúng ta chỉ dừng lại ở đây, thì từ khóa this trong JavaScript sẽ không bao giờ gây ra bất kỳ sự nhầm lẫn nào

Đây cũng là cách nó hoạt động trong C++. Và tôi nghĩ người thiết kế ban đầu của JavaScript nên dừng lại ở đây. Nhưng… thay vào đó, từ khóa this cũng được chọn để mang liên kết đến ngữ cảnh thực thi. Sự lựa chọn này là ngoài lý do. Tại sao không phát minh ra một từ khóa khác. giả sử bối cảnh và tách biệt hai chức năng riêng biệt?

Vậy cái “khác” này hoạt động như thế nào?

Mục đích phụ của từ khóa này

Khi được sử dụng bên ngoài các trường hợp đối tượng [ví dụ trước], từ khóa này mang một ý nghĩa hoàn toàn mới

Đôi khi một chức năng chỉ là một chức năng

function abc[] {
    console.log[this];
}abc[]; // [object Window] -- points to window object

Here, this points to [object Window] [or global scope.] Simply because it was called from the global scope [assuming we’re in brackets.]

Nhưng… khi bạn muốn sử dụng hàm như một hàm tạo của một đối tượng, nói cách khác, để tạo một đối tượng kiểu abc, thì từ khóa this sẽ thay đổi ngữ cảnh của nó một cách kỳ diệu thành thể hiện của chính đối tượng kiểu đó [không còn là [Cửa sổ đối tượng]

function abc[] {
    console.log[this];
}let type = new abc[]; // abc{} -- self
typeof type;

Nói cách khác, đối tượng được trỏ bởi biến kiểu [bản thân] trở thành ngữ cảnh. Đây là lý do tại sao điều này được gọi là điều này

Nó trỏ đến một đối tượng. Chỉ không phải đối tượng này. Trong thực tế, bạn có thể nói nó trỏ đến đối tượng đó. -] Và đối tượng đó là gì cũng sẽ thay đổi dựa trên ngữ cảnh mà hàm được gọi

Trước chức năng mũi tên. đó chính xác là tên mà nhiều lập trình viên đã đặt cho đối tượng này khi được sử dụng trong ngữ cảnh khác

Trước tiên, hãy xem xét vấn đề là gì

function food[kind] {this.kind = kind;
    this.cook = cook; // functions are hoisted, so it's perfectly
                      // fine to call or assign function names
                      // before the are defined.function cook[sec] {
      setTimeout[function[] {
        console.log[this.kind + " cooked for " + sec + " seconds."];
      }, sec * 1000];
    }
  }let soup = new food["soup"]; // {this}, 1000] từ khóa this không trỏ tới [object Window]. Nó trỏ đến bất cứ thứ gì bên ngoài nó. Và trong trường hợp trước, bên ngoài là đối tượng thực phẩm. Điều này khắc phục sự cần thiết phải liên tục ràng buộc điều này với câu tục ngữ rằng
Và đây là phiên bản hiện đại của mã trước đó mà không có ràng buộc này/kia
function food[kind] {
      this.kind = kind;
      this.cook = cook;
      function cook[sec] {
        setTimeout[[] => {
          console.log[this.kind + " cooked for " + sec + " seconds."];
        }, sec * 1000];
      }
    }
  let soup = new food["soup"];
  soup.cook[2]; // soup cooked for 2 seconds.
nó hoạt động
Let that = điều vô nghĩa này đã biến mất
Súp và không xác định được nấu trong 2 giây
Trong nhiều năm, các lập trình viên đã phải thực hiện việc ràng buộc này bằng tay. Phiền thật đấy
Chúng tôi đã thay thế hàm[] {} bằng cú pháp mũi tên [] => {}
Và điều đó đã giải quyết toàn bộ vấn đề. Nhưng ít nhất chúng ta đã học được điều gì đó mới
Đó là lý do tại sao các chức năng mũi tên đã được phát minh. [Mặc dù chúng cũng có những đặc tính thú vị khác. chẳng hạn như mã sạch [er]. khi được sử dụng cùng với các hàm bậc cao hơn của Array. ]
Cách dung hòa hai trường hợp sử dụng “cái này” mà không làm bạn mất trí
Chà, đây mới là phần thú vị.  . ]
Có một cách suy nghĩ lành mạnh về điều này trong cả hai bối cảnh
Hãy nhớ rằng chúng ta đã thấy rằng điều này trỏ đến thể hiện của một đối tượng trong trường hợp đầu tiên như thế nào?

  

Nhưng trong trường hợp thứ hai, nó trỏ đến một số bối cảnh khác?
Tất cả bắt đầu có ý nghĩa hơn nếu chúng ta nhận ra rằng ngữ cảnh cũng là một thể hiện của một đối tượng. Không nhất thiết phải thuộc về phạm vi chúng tôi đang ở. Nó giống như một liên kết với thế giới bên ngoài. Và thế giới bên ngoài - đại khái là - nơi mà chức năng được gọi
Trong một số trường hợp, JavaScript sẽ quyết định cho chúng ta nên sử dụng liên kết đến thế giới bên ngoài hay sử dụng liên kết này làm tham chiếu đến thể hiện của đối tượng mà chúng ta đang ở trong phạm vi của hàm tạo.
Lấy đi. Bối cảnh luôn là một thể hiện của một đối tượng. Bởi vì khi chương trình JavaScript của chúng tôi bắt đầu, trình duyệt sẽ tạo. var window = đối tượng Window[] mới đằng sau hậu trường. Đây là ngữ cảnh “gốc” đầu tiên được tạo
So when we are in  tags, we are actually inside the body of the Window constructor function. And this is why [object Window] is a prime candidate for being pointed to by this in many cases. Because this is the object from which many functions are called.
Mọi lệnh gọi hàm sẽ bắt nguồn từ ngữ cảnh đó. Việc gọi một hàm bên trong một hàm sẽ mang bối cảnh này, tạo ra một chồng bối cảnh thực thi
Vậy khi nào điều này *không trỏ đến [cửa sổ đối tượng]?
Trong trường hợp sử dụng thứ hai khi điều này trỏ đến thể hiện của bối cảnh thực thi chứ không phải là thể hiện của đối tượng từ hàm tạo mà chúng ta đang ở… trường hợp này sẽ không trỏ đến [Cửa sổ đối tượng] là gì?
Điều đó phụ thuộc vào việc hàm có phải là một cuộc gọi lại hay không, nhưng cũng phụ thuộc vào việc hàm gọi cuộc gọi lại được gọi từ đâu
Đây có phải là sự nhầm lẫn thuần túy hay thiên tài của JavaScript? 
Tiếp tục viết mã
Những loại khái niệm này cần có thời gian để chìm vào
Trong nhiều trường hợp, bạn thậm chí không cần hiểu chúng để viết mã JavaScript tốt. Nhưng bạn có thể quan tâm đến mức độ chi tiết này vì những loại câu hỏi này thường được hỏi trong các cuộc phỏng vấn
Chỉ cần viết JavaScript và xem điều gì sẽ xảy ra. Bạn sẽ học cách hiểu điều này theo bản năng khi bạn thực hành nhiều hơn
Nếu bạn cần thử và sai, hãy làm đi. Ngay cả những nhà phát triển dày dạn kinh nghiệm đôi khi vẫn bối rối về những gì điều này thực sự chỉ ra
Nếu tôi bỏ lỡ điều gì đó hoặc bạn biết về một tình huống bóng kỳ lạ nào đó cần được đề cập, hãy cho tôi biết và tôi có thể cập nhật bài viết này
 

			
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 từ khóa này không được xác định trong JavaScript?
			
Biến chưa được gán giá trị  thuộc loại không xác định. Một phương thức hoặc câu lệnh cũng trả về không xác định nếu biến đang được đánh giá không có giá trị được gán. Hàm trả về không xác định nếu giá trị không được trả về. 
		
			
Đây là gì trong lớp JavaScript?
			
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 đó. 
		
			
Đây có phải là từ khóa hoặc biến trong JavaScript không?
			
từ khóa này xác định một đối tượng, đối tượng đó đang thực thi đoạn mã JavaScript hiện tại. Trong JavaScript, biến “this” là  một biến  mà mọi ngữ cảnh thực thi đều nhận được trong một lệnh gọi hàm thông thường. Mỗi hàm JavaScript có một tham chiếu đến bối cảnh thực thi hiện tại của nó trong khi thực thi, được gọi là.