HomeLập trìnhJavaScript'Cái này' có...

‘Cái này’ có nghĩa là gì trong JavaScript? Từ khóa này được giải thích bằng các ví dụ


Để hiểu những gì this thực sự có nghĩa trong JavaScript, chúng ta hãy xem một khái niệm rất giống trong tiếng Anh: đa nghĩa.

Hãy xem xét từ “chạy“. Chạy là một từ duy nhất có thể có nhiều nghĩa khác nhau tùy thuộc vào bối cảnh.

  • “Tôi sẽ chạy về nhà” – nghĩa là đi bộ nhanh
  • “She running the 1500m” – có nghĩa là chạy trong một cuộc đua
  • “Anh ấy đang tranh cử tổng thống” – có nghĩa là tranh giành một vị trí chính thức
  • “Ứng dụng đang chạy” – có nghĩa là ứng dụng phần mềm vẫn đang mở và hoạt động
  • “Go for a run” – có nghĩa là chạy như một hình thức tập thể dục

Và danh sách được tiếp tục.

Một kịch bản tương tự diễn ra khi bạn sử dụng this từ khóa trong mã JavaScript của bạn. Khi bạn làm như vậy, nó sẽ tự động phân giải thành một đối tượng hoặc phạm vi tùy thuộc vào ngữ cảnh được xác định.

Các bối cảnh có thể là gì? Và làm thế nào chúng ta có thể sử dụng thông tin đó để suy ra đối tượng nào this cuộc gọi sẽ giải quyết?

this Bối cảnh

Khi được sử dụng trong một chức năng, this từ khóa chỉ đơn giản trỏ đến một đối tượng mà nó bị ràng buộc. Nó trả lời câu hỏi của nơi nó sẽ nhận được một số giá trị hoặc dữ liệu từ:

function alert() { 
  console.log(this.name + ' is calling'); 
}
Hàm có tham chiếu “this”

Trong chức năng trên, this từ khóa đang đề cập đến một đối tượng mà nó bị ràng buộc vì vậy nó nhận thuộc tính “tên” từ đó.

Nhưng làm thế nào để bạn biết đối tượng mà chức năng được liên kết với? Làm thế nào để bạn tìm ra những gì this đang đề cập đến?

Đọc thêm  Ba cách bạn có thể tìm thấy số lớn nhất trong một mảng bằng JavaScript

Để làm như vậy, chúng ta cần xem xét chi tiết cách các chức năng được liên kết với các đối tượng.

Các loại ràng buộc trong JavaScript

Nhìn chung có bốn loại ràng buộc:

  • Ràng buộc mặc định
  • Ràng buộc ngầm định
  • Ràng buộc rõ ràng
  • Liên kết cuộc gọi hàm tạo

Liên kết mặc định trong JavaScript

Một trong những quy tắc đầu tiên cần nhớ là nếu hàm chứa một this tài liệu tham khảo là một chức năng độc lậpthì chức năng đó được liên kết với đối tượng toàn cầu.

function alert() { 
  console.log(this.name + ' is calling'); 
}

const name="Kingsley"; 
alert(); // Kingsley is calling
chức năng độc lập

Bạn có thể thấy, name() là một chức năng độc lập, không được gắn kết, do đó, nó bị ràng buộc với phạm vi toàn cầu. Kết quả là, các this.name tham chiếu phân giải thành biến toàn cục const name="Kingsley".

Tuy nhiên, quy tắc này không đúng nếu name() đã được xác định trong chế độ nghiêm ngặt:

function alert() { 
  'use strict'; 
  console.log(this.name + ' is calling'); 
}

const name="Kingsley"; 
alert(); // TypeError: `this` is `undefined`
không xác định trong chế độ nghiêm ngặt

Khi được đặt ở chế độ nghiêm ngặt, this tham chiếu được đặt thành không xác định.

Liên kết ngầm định trong JavaScript

Một tình huống khác cần chú ý là liệu chức năng có được gắn vào một đối tượng hay không (bối cảnh của nó) tại trang web cuộc gọi.

Theo quy tắc ràng buộc trong JavaScript, một hàm chỉ có thể sử dụng một đối tượng làm ngữ cảnh của nó nếu đối tượng đó được liên kết với nó tại vị trí cuộc gọi. Hình thức ràng buộc này được gọi là ràng buộc ngầm.

Đây là những gì tôi có nghĩa là:

function alert() { 
  console.log(this.age + ' years old'); 
}

const myObj = {
  age: 22,
  alert: alert
}

myObj.alert() // 22 years old

Nói một cách đơn giản, khi bạn gọi một hàm bằng ký hiệu dấu chấm, this được liên kết ngầm với đối tượng mà hàm đang được gọi từ đó.

Đọc thêm  Cách sử dụng các tính năng ES6 trong React

Trong ví dụ này, vì alert đang được gọi từ myObjcác this từ khóa bị ràng buộc với myObj. Vì vậy, khi alert được gọi với myObj.alert(), this.age là 22, đó là age tài sản của myObj.

Hãy xem xét một ví dụ khác:

function alert() { 
  console.log(this.age + ' years old'); 
}

const myObj = {
  age: 22,
  alert: alert,
  nestedObj: {
    age: 26,
    alert: alert
  }
}

myObj.nestedObj.alert(); // 26 years old

Ở đây, bởi vì alert cuối cùng được gọi từ nestedObj, this bị ràng buộc ngầm nestedObj thay vì myObj.

Một cách dễ dàng để tìm ra đối tượng nào this bị ràng buộc hoàn toàn là nhìn vào đối tượng nào ở bên trái của dấu chấm (.):

function alert() { 
  console.log(this.age + ' years old'); 
}

const myObj = {
  age: 22,
  alert: alert,
  nestedObj: {
    age: 26,
    alert: alert
  }
}

myObj.alert(); // `this` is bound to `myObj` -- 22 years old
myObj.nestedObj.alert(); // `this` is bound to `nestedObj` -- 26 years old

Ràng buộc rõ ràng trong JavaScript

Chúng ta đã thấy rằng liên kết ẩn liên quan đến việc có một tham chiếu trong đối tượng đó.

Nhưng nếu chúng ta muốn lực lượng một hàm để sử dụng một đối tượng làm ngữ cảnh của nó mà không đặt tham chiếu hàm thuộc tính lên đối tượng?

Chúng tôi có hai phương pháp tiện ích để đạt được điều này: call()apply().

Cùng với một vài bộ chức năng tiện ích khác, hai tiện ích này có sẵn cho tất cả các chức năng trong JavaScript thông qua [[Prototype]]cơ chế.

Để liên kết rõ ràng một lời gọi hàm với một ngữ cảnh, bạn chỉ cần gọi hàm call() trên chức năng đó và chuyển vào đối tượng ngữ cảnh dưới dạng tham số:

function alert() { 
  console.log(this.age + ' years old'); 
}

const myObj = {
  age: 22
}

alert.call(myObj); // 22 years old

Bây giờ đây là phần thú vị. Ngay cả khi bạn chuyển hàm đó nhiều lần cho các biến mới (currying), mọi lệnh gọi sẽ sử dụng cùng ngữ cảnh vì nó đã bị khóa (ràng buộc rõ ràng) với đối tượng đó. cái này gọi là ràng buộc cứng.

Đọc thêm  Đã hoàn thành tất cả JavaScript nhưng KHÔNG CÓ Chứng chỉ
function alert() { 
  console.log(this.age); 
} 

const myObj = { 
  age: 22 
}; 

const bar = function() { 
  alert.call(myObj); 
}; 

bar(); // 22
setTimeout(bar, 100); // 22 
// a hard-bound `bar` can no longer have its `this` context overridden 
bar.call(window); // still 22
ràng buộc cứng

Liên kết cứng là một cách hoàn hảo để khóa ngữ cảnh vào lệnh gọi hàm và thực sự biến hàm đó thành một phương thức.

Liên kết cuộc gọi hàm tạo trong JavaScript

Loại liên kết cuối cùng và có lẽ là thú vị nhất là liên kết mới cũng làm nổi bật hành vi bất thường của JavaScript so với các ngôn ngữ dựa trên lớp khác.

Khi một chức năng được gọi với new từ khóa ở phía trước của nó, còn được gọi là một cuộc gọi hàm tạonhững điều sau đây xảy ra:

  1. Một đối tượng hoàn toàn mới được tạo (hoặc được xây dựng)
  2. Đối tượng mới được xây dựng là [[Prototype]]-được liên kết với chức năng đã xây dựng nó
  3. Đối tượng mới được xây dựng được đặt là this ràng buộc cho cuộc gọi chức năng đó.

Hãy xem mã này để hiểu rõ hơn:

function giveAge(age) { 
  this.age = age; 
} 

const bar = new giveAge(22); 
console.log(bar.age); // 22

Bằng cách gọi giveAge(...) với new trước nó, chúng tôi đã tạo một đối tượng mới và đặt đối tượng mới đó làm đối tượng this cho cuộc gọi của foo(...). Cho nên new là cách cuối cùng mà bạn có thể ràng buộc một lời gọi hàm this .

kết thúc

Tóm tắt,

  • Các this từ khóa, khi được sử dụng trong một hàm, sẽ liên kết hàm đó với một đối tượng ngữ cảnh
  • Có bốn loại ràng buộc: ràng buộc mặc định, ràng buộc ngầm định, ràng buộc rõ ràng và ràng buộc cuộc gọi hàm tạo (Mới)
  • Biết bốn quy tắc này sẽ giúp bạn dễ dàng nhận ra bối cảnh của một this thẩm quyền giải quyết.
Một hình ảnh giải thích từ khóa 'this'
Một hình ảnh giải thích từ khóa ‘this’
Một hình ảnh giải thích từ khóa 'this'
Một hình ảnh giải thích từ khóa ‘this’

Nếu bạn thích hoặc được hưởng lợi từ bài viết này và muốn hỗ trợ tôi, bạn có thể mua cho tôi một ly cà phê tại đây.

Bạn cũng có thể liên hệ với tôi trên Twitter. Hãy nhớ xem blog của tôi để biết thêm nội dung liên quan đến JavaScript và lập trình.

Cảm ơn và hẹn gặp lại.





Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status