Đối tượng toàn cầu JavaScript

Tìm hiểu điều gì đặc biệt về việc sử dụng điều này trong Javascript so với các ngôn ngữ lập trình khác. Hiểu các giá trị khác nhau của this tùy thuộc vào ngữ cảnh nơi nó được sử dụng

Đối tượng toàn cầu JavaScript

Gần đây, chúng tôi đã tổ chức một buổi nói chuyện trên kênh Youtube của mình dành riêng cho "các phương pháp hay trong ngôn ngữ Javascript". Ở đó, chúng tôi đã thấy một số điểm thú vị mà chúng tôi hiện đang ghi lại trong các bài báo. Đây là cuốn thứ hai mà chúng tôi đã xuất bản, cuốn đầu tiên dành riêng cho việc giải quyết tình trạng quá tải hàm. Nó được cung cấp cho chúng tôi bởi đồng nghiệp của chúng tôi, Eduard Tomàs, người luôn mang đến cho chúng tôi những viên ngọc kiến ​​thức tuyệt vời

Trong hầu hết các ngôn ngữ lập trình "truyền thống", biến "this" luôn có giá trị rất rõ ràng. Không còn nghi ngờ gì nữa, "cái này" luôn chứa tham chiếu đến đối tượng mà một phương thức đang được thực thi. Tất cả các phương thức được thực thi trong ngữ cảnh của một đối tượng (ngoại trừ phương thức tĩnh, nơi không thể truy cập this) và "this" trỏ đến đối tượng này. Tuy nhiên, trong Javascript, điều này không phải lúc nào cũng đúng.

Trong Javascript, tìm kiếm qua nhiều trang web thực sự tìm thấy các định nghĩa về "cái này" hơi khó hiểu. Họ nói với bạn rằng đó là "chủ sở hữu của chức năng". và nếu không có chủ sở hữu, họ sẽ nói với bạn rằng "cái này" là "đối tượng chung"

Ghi chú. Khi bạn chạy Javascript bên trong một trang web, tức là trong trình duyệt, đối tượng chung là đối tượng "cửa sổ", từ đó tất cả các đối tượng trong hệ thống phân cấp đều bị treo. Tuy nhiên, trong NodeJS chạy trên máy dưới dạng ngôn ngữ lập trình có mục đích chung, đối tượng toàn cầu là một thứ khác. Ngoài ra còn có một đối tượng toàn cầu trong NodeJS, có một số chức năng, đóng vai trò của đối tượng "cửa sổ". Rõ ràng, trong đối tượng toàn cầu NodeJS đó, tôi có những thứ rất khác so với những gì bạn tìm thấy trong "cửa sổ" trong trình duyệt, nhưng cũng có "bối cảnh toàn cầu"

Nói cách khác, mà chúng ta có thể tìm thấy trong tài liệu Javascript, "đây là bối cảnh của một chức năng". Một trong những điều thú vị và rất mạnh mẽ về Javascript là bối cảnh có thể được sửa đổi và nó phụ thuộc vào cách chức năng đó được gọi. chúng ta lặp lại. giá trị của "this" bên trong một hàm không phụ thuộc vào cách hàm đó được định nghĩa, mà phụ thuộc vào cách nó được gọi

Đối tượng toàn cầu JavaScript

đây là đối tượng toàn cầu

Nếu tôi đặt mã bên ngoài bất kỳ chức năng nào và thử xem nội dung của chức năng này, tôi sẽ tìm thấy ngữ cảnh chung. Bạn có thể kiểm tra nó với một dòng như thế này

console.log(this);

Nếu bạn đang ở trong một trình duyệt, bạn sẽ thấy rằng nó sẽ gửi nội dung của đối tượng "cửa sổ" tới bảng điều khiển.

Đây là chủ sở hữu của chức năng Javascript

Nếu bây giờ bạn viết mã của một hàm và bên trong bạn truy cập "cái này", thứ bạn sẽ tìm thấy là "chủ sở hữu của hàm". Nhưng điều "chủ sở hữu" này hơi phức tạp để hiểu, bởi vì về cơ bản hai điều có thể xảy ra

  1. Nếu chức năng được thực thi dưới dạng toàn cầu, thì "cái này" sẽ là đối tượng toàn cầu
  2. Nếu chức năng đang được thực thi như một phương thức của một đối tượng, thì "cái này" là đối tượng đang nhận phương thức này.

Ví dụ: nếu chúng tôi có mã này như trong một trang web, bên ngoài bất kỳ chức năng hoặc đối tượng nào

function miFuncion() {
  console.log(this);
}
miFuncion();

Chúng ta sẽ thấy rằng giá trị của this trong trường hợp này hóa ra là đối tượng cửa sổ

Nó có ý nghĩa rằng đó là đối tượng cửa sổ bởi vì trong javascript của trình duyệt, mọi khai báo chung (như hàm này) được đính kèm dưới dạng thuộc tính của đối tượng cửa sổ. Do đó, chủ sở hữu của một chức năng toàn cầu trở thành đối tượng toàn cầu, nghĩa là cửa sổ. Điều này có nghĩa là chúng ta cũng có thể gọi hàm là window.miFuncion(), vì nó thuộc về đối tượng cửa sổ. Đó là những thứ Javascript kỳ lạ mà khi bạn hiểu về chúng, chúng dường như không còn quá xa lạ với bạn

Bây giờ chúng ta sẽ xem this thay đổi như thế nào trong trường hợp chủ sở hữu của hàm là một đối tượng. Chúng tôi có đoạn mã sau

let miObjeto = {
  prop: 'valor',
  metodo: function() {
    console.log(this);
  }
}
miObjeto.metodo();

Khi được thực thi, bạn sẽ thấy rằng trong bảng điều khiển, giá trị của this được hiển thị chính là đối tượng "

function miFuncion() {
  console.log(this);
}
miFuncion();
1"

Nhưng sau đó có những cơ chế để thay đổi nó, như chúng ta cũng sẽ thấy

Lỗi điển hình trong Javascript

Bây giờ, hãy xem một mã mà chúng ta có thể tìm thấy xung quanh có thể dẫn đến các ngôn ngữ khác là chính xác, nhưng mã đó trong Javascript biểu thị rằng lập trình viên không hiểu rằng "điều này" có thể trỏ đến nhiều thứ khác nhau.
//esto estaría conceptualmente mal
var obj = {
  nombre: "Edu",
  apellidos: "Tomas",
  completo: this.nombre + " " + this.apellidos
}
console.log(obj);
//nos mostrará en consola
//Object { nombre="Edu", apellidos="Tomas", completo="undefined undefined"}

Như bạn có thể thấy, chúng tôi đã định nghĩa một đối tượng có "ký hiệu đối tượng Javascript" thường được gọi là JSON. Thuộc tính đầy đủ, dường như đã được gán tên đầu tiên nối với họ, thực sự bị bỏ lại với "không xác định không xác định". Điều này là do ở vị trí đó, "this" là đối tượng toàn cục, vì nó không được thực thi bên trong một hàm như một phương thức của một đối tượng.

Ghi chú. Nó trả về không xác định vì trong ngữ cảnh chung (đối tượng "cửa sổ" có tính đến việc nó được thực thi trong trình duyệt) "cửa sổ. tên" không tồn tại và "cửa sổ" cũng không. họ" và nếu chúng ta truy cập thuộc tính không tồn tại của một đối tượng, Javascript sẽ trả về giá trị "không xác định"

Điều đó có thể đã được "sửa" bằng cách đặt "hoàn thành" một hàm trả về phép nối đó

var obj = {
  nombre: "Edu",
  apellidos: "Tomas",
  completo: function(){
    return this.nombre + " " + this.apellidos;
  }
}
console.log(obj.completo());
//nos mostrará en consola "Edu Tomas"

Sau đó, nếu chúng ta gọi hàm hoàn chỉnh như một phương thức của đối tượng, thì "cái này" sẽ là thể hiện của đối tượng mà phương thức được gọi

cái này trong trình xử lý sự kiện

Một trường hợp thú vị khác của tham chiếu this trong Javascript là khi chúng ta xác định trình xử lý sự kiện. Trong đó, từ this đề cập đến đối tượng mà trình xử lý sự kiện đã được cấu hình.

Chúng ta có thể thấy điều này rất rõ ràng với một trình xử lý sự kiện ví dụ, như trong đoạn mã sau.

document.addEventListener('mousemove', function() {
  console.log(this);
});

Chúng tôi đã xác định trình xử lý cho sự kiện 'mousemove' trên đối tượng tài liệu. Điều này sẽ khiến mỗi khi chuột di chuyển qua tài liệu, nó sẽ hiển thị giá trị của this trong bảng điều khiển. Nếu bạn thực hiện nó, bạn sẽ thấy rằng giá trị xuất hiện là đối tượng

function miFuncion() {
  console.log(this);
}
miFuncion();
5 của trang

Một lần nữa, nó hợp lý bởi vì trong trường hợp này, chúng ta có thể nghĩ rằng chủ sở hữu của một hàm được định nghĩa là trình xử lý sự kiện trên một đối tượng nhất định là chính đối tượng đó. Đó là, trong trường hợp này, trình xử lý được xác định trên đối tượng tài liệu sẽ có đối tượng tài liệu là chủ sở hữu của nó. Do đó, this sẽ chứa một tham chiếu đến đối tượng tài liệu

Nếu trình xử lý sự kiện của chúng tôi đã được đặt trên một nút trên trang, thì this sẽ tham chiếu đến nút đó trên trang vì nó sẽ sở hữu chức năng xử lý

chức năng gọi/áp dụng/liên kết

Để làm rối tung nó lên, có 3 hàm "rất vui" là "call()", "apply()" và "bind()". Chúng ta sẽ xem chi tiết các hàm này sau, khi chúng ta thấy các khía cạnh khác của Javascript, nhưng về cơ bản, "call()" và "apply()" dùng để gọi một hàm nhưng trong đó một giá trị của "this" được cung cấp sẽ thay thế giá trị nó sẽ có trong một tình huống khác

Nói cách khác, trong quá trình thực thi một hàm, giá trị của "this" sẽ không phải là giá trị mà nó sẽ chạm vào, mà là giá trị mà bạn chỉ ra trong lệnh gọi "call()" hoặc "apply ()"

Về phần mình, "bind()" là một phương thức rất thú vị, ngay từ đầu, nó không trả về một giá trị mà trả về một hàm khác. Khi tôi gọi hàm khác này trả về, giá trị của "this" bên trong nó, là giá trị ban đầu mà tôi đã chuyển khi gọi "bind()"

Ghi chú. Luôn nhớ rằng Javascript là ngôn ngữ loại "chức năng" (có thể nói như vậy), trong đó các hàm là công dân của đơn hàng đầu tiên. Kiểu dữ liệu "hàm" hợp lệ như có thể là "chuỗi", "đối tượng", "số". Điều đó có nghĩa là tôi có thể truyền hàm dưới dạng tham số và tôi có thể trả về hàm dưới dạng giá trị trả về.

Thật khó để thấy điều này nếu không có một đoạn mã và mặc dù chúng tôi muốn xem xét "bind()" chi tiết hơn sau này, tôi nghĩ sẽ rất tuyệt nếu xem qua.

________số 8_______

kết luận

  • Giá trị của điều này không phải là giá trị kinh điển mà tất cả chúng ta đều nghĩ đến trong các ngôn ngữ lập trình khác như PHP, Java, C#, C++
  • Bạn không thể biết biến "this" sẽ có giá trị gì bằng cách nhìn vào mã của hàm, bởi vì nó phụ thuộc vào cách hàm được gọi cho bạn

Sau này chúng ta sẽ thấy chi tiết hơn về "this" và các chức năng "call()", "apply()" và "bind()". và trong bài viết này, chúng tôi đã dừng lại ở phút thứ 27 của bài thuyết trình đó

Video về các phương pháp hay trong Javascript

Cuối cùng, chúng tôi đã chia sẻ video mà từ đó chúng tôi đã trích xuất thông tin có trong bài viết này về từ this trong Javascript. Chúng tôi hy vọng bạn thích cuộc nói chuyện này

JavaScript đối tượng toàn cầu là gì?

Đối tượng toàn cục là đối tượng luôn tồn tại trong phạm vi toàn cục . Trong JavaScript, luôn có một đối tượng toàn cục được định nghĩa. Trong trình duyệt web, khi tập lệnh tạo biến toàn cục được xác định bằng từ khóa var, chúng được tạo với tư cách là thành viên của đối tượng toàn cục.

Làm thế nào để chức năng toàn cầu trong JavaScript?

Đối tượng toàn cục trong JavaScript là một đối tượng luôn được xác định, cung cấp các biến và hàm, đồng thời có sẵn ở mọi nơi. Trong trình duyệt web, đối tượng toàn cầu là đối tượng cửa sổ, trong khi nó được đặt tên là toàn cầu trong Node. js. Đối tượng toàn cầu có thể được truy cập bằng toán tử this trong phạm vi toàn cầu .

Làm cách nào để truy cập biến toàn cầu trong JavaScript?

Một biến toàn cục JavaScript được khai báo bên ngoài hàm hoặc được khai báo với đối tượng cửa sổ. Nó có thể được truy cập từ bất kỳ chức năng. .
giá trị thay đổi = 50;
hàm a(){
cảnh báo (cửa sổ). value); // truy xuất biến toàn cục

Biến toàn cục JavaScript là gì?

Biến toàn cục là biến được khai báo trong phạm vi toàn cầu nói cách khác, một biến có thể nhìn thấy từ tất cả các phạm vi khác. Trong JavaScript, nó là thuộc tính của đối tượng toàn cầu.