Toàn cầu mới Thuộc tính JavaScript này

Thuộc tính mới có tên globalThis cung cấp cho bạn quyền truy cập đa nền tảng vào đối tượng global trong JavaScript.

Việc truy cập thuộc tính global trong JavaScript luôn gây ra một số khó khăn. Điều này là do các nền tảng khác nhau có những cách khác nhau để truy cập nó.

JavaScript phía client sử dụng window hoặc self
Node.js sử dụng global
Nhân viên web self sử dụng

Đây không phải là vấn đề lớn nếu bạn chỉ viết JavaScript phía client . Bạn có thể chỉ cần viết window để tương tác với đối tượng toàn cục.

Tuy nhiên, vấn đề nảy sinh khi bạn cần viết JavaScript di động hoạt động trên nhiều nền tảng (ví dụ: một thư viện như lodash hoạt động trong cả Node.js và client-side).

Giải pháp phổ biến là sử dụng miếng đệm sử dụng mã như thế này để xác định đối tượng toàn cục có sẵn:

var getGlobal = function () { 
  if (typeof window !== 'undefined') {
    return window;  // Client-side JavaScript 
  } 
  if (typeof self !== 'undefined') {
    return self;    // Client-side JavaScript / Web workers
  } 
  if (typeof global !== 'undefined') {
    return global;  // Node.js
  } 
}; 

var __global__ = getGlobal(); 

if (typeof __global__.alert === 'function') { 
  console.log('Client-side land!');
} else {
  console.log('Node.js land!');
};

Sử dụng globalThis

Vì globalThis có sẵn trong Node.js / client-side / Web globalThis , việc tương tác với đối tượng global trở nên đơn giản hơn nhiều!

if (typeof globalThis.alert === 'function') { 
  console.log('Client-side land!');
} else {
  console.log('Node.js land!');
}

Nói lời tạm biệt với việc kiểm tra nền tảng bạn đang sử dụng! ✌️

Kết luận

Hiện tại trên phạm vi global globalThis là Đề xuất ECMAScript Giai đoạn 3. Tuy nhiên, nhiều trình duyệt bao gồm Chrome, Firefox và Safari (máy tính để bàn / thiết bị di động) đã cung cấp API mới này!

Để biết thông tin chuyên sâu về global globalThis tra này , bài đăng trên blog của Axel Rauschmayer 📰

Tags:

Các tin liên quan

Vẽ hình với API Canvas JavaScript
2019-08-05
clientWidth và clientHeight trong JavaScript
2019-07-24
Các phương pháp hay nhất để gỡ lỗi mã JavaScript trong trình duyệt
2019-07-05
Tối ưu hóa Tuyên bố chuyển đổi trong JavaScript
2019-06-18
Làm việc với Singletons trong JavaScript
2019-04-19
Cách sử dụng Axios với JavaScript
2019-04-05
Giới thiệu về Lặp lại và Trình lặp trong JavaScript
2019-03-13
D3.js: Hiểu các lựa chọn và so sánh với Vanilla JavaScript
2019-03-04
Xem xét Phạm vi, Ngữ cảnh, Tham chiếu Đối tượng và Thuyết minh trong JavaScript
2019-02-25
Sử dụng JavaScript Mixins
2019-02-12