Từ khóa này có nghĩa là gì trong javascript?

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

  greet : function() {
  return "Hi! I am " + this.firstName + " " + this.  lastName + ", a bell boy and I am at your service";
  }

  0 đề cập đến đối tượng bellBoy, là chủ sở hữu của phương thức

  greet : function() {
  return "Hi! I am " + this.firstName + " " + this.  lastName + ", a bell boy and I am at your service";
  }

  0 đó

• this trong bối cảnh toàn cầu

  Khi 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ăng

  Lư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 chung

  function 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

  greet : function() {
  return "Hi! I am " + this.firstName + " " + this.  lastName + ", a bell boy and I am at your service";
  }

  6 vì chúng giữ cùng một giá trị

• 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à

  let y = this
  console.log(y)

  0

• this khi được sử dụng bên trong Trình xử lý sự kiện

  Trì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ày

  window.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

  let y = this
  console.log(y)

  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, 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ủa this 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ạo

• this trong Trình xử lý sự kiện nội tuyến

  
  I 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

Chức năng của từ khóa này là gì?

Từ khóa này có quan trọng trong JavaScript không?

Đây là gì trong lớp JavaScript?