Hướng dẫn typeof class javascript - loại lớp javascript

Đã đăng vào thg 8 21, 2019 2:20 SA 1 phút đọc 1 phút đọc

Toán tử

typeof true;      // 'boolean'
typeof false;     // 'boolean'

typeof 3000;      // 'number'
typeof 3.14;      // 'number'
typeof NaN;       // 'number'
typeof Infinity;  // 'number'

typeof 'foobar';     // 'string'
typeof `foobar`;     // 'string'

Cách dùng

Để dùng

typeof true;      // 'boolean'
typeof false;     // 'boolean'

typeof 3000;      // 'number'
typeof 3.14;      // 'number'
typeof NaN;       // 'number'
typeof Infinity;  // 'number'

typeof 'foobar';     // 'string'
typeof `foobar`;     // 'string'

typeof foo;
typeof(foo);

Ví dụ

Chúng ta sẽ bắt đầu với một vài ví dụ đơn giản sau:

typeof true;      // 'boolean'
typeof false;     // 'boolean'

typeof 3000;      // 'number'
typeof 3.14;      // 'number'
typeof NaN;       // 'number'
typeof Infinity;  // 'number'

typeof 'foobar';     // 'string'
typeof `foobar`;     // 'string'

Những ví dụ đơn giản trên cũng đủ để bạn có thể hiểu hơn về type trong JavsScript.

Mảng và Object

Đối với những mảng và object thì bạn sẽ nhận được kết quả là "object""object"

typeof [1, 2, 'foobar'];   // 'object'
typeof {a: 'foobar'};      // 'object'

“object” is really just a generic label that’s used loosely for more sophisticated values in JavaScript.

Giá trị rỗng (Empty values)

Với những kết quả dưới đây có thể các bạn sẽ thấy khó hiểu:

typeof null;       // 'object'
typeof undefined;  // 'undefined' 

Trong JavaScript thì

typeof true;      // 'boolean'
typeof false;     // 'boolean'

typeof 3000;      // 'number'
typeof 3.14;      // 'number'
typeof NaN;       // 'number'
typeof Infinity;  // 'number'

typeof 'foobar';     // 'string'
typeof `foobar`;     // 'string'

Constructors

Vì các constructors Class trong JavaScript chỉ là các hàm:

typeof String;           // 'function'
typeof Boolean;          // 'function' 
typeof Number;           // 'function'
typeof Object;           // 'function'
typeof Function;         // 'function'
typeof MyAwesomeClass;   // 'function'  

Kiểm tra kiểu cho các chức năng

Việc thực hành kiểm tra kiểu trong lập trình có một lịch sử rất dài và cách chính để thực hiện điều này trong JavaScript là sử dụng toán tử typeof:

function add(a, b) {

  // perform type-checks...
  if (typeof a !== 'number' || typeof b !== 'number') {
    throw 'Arguments must be a number'
  };

  return a + b;
}

Điều này cho phép bạn đảm bảo rằng các đối số cho hàm add là các số và không phải là một chuỗi giống như một chuỗi (sẽ nối với nhau trong JavaScript).

Kiểm tra kiểu trong JavaScript tạo mã ổn định hơn vì bạn đang xác định các quy tắc cơ bản rõ ràng để tương tác với ứng dụng của mình.

Kiểm tra sự tồn tại (Existence Testing)

Một cách khác mà bạn có thể sử dụng typeof là xác định sự tồn tại (existence) của một người có giá trị.existence) của một người có giá trị.

if (typeof window !== 'undefined') {
  // you're programming in JavaScript land!
};

if (typeof process !== 'undefined') {
  // Node.js!
}

if (typeof $ !== 'undefined') {
  // jQuery is available! 
}

All rights reserved

Đã đăng vào thg 11 27, 2017 6:11 CH 4 phút đọc 4 phút đọc

Giới thiệu

Chắc hẳn đôi lúc bạn cũng đau đầu vì việc validate kiểu dữ liệu đầu vào cho function ở javascript đúng không? 2 hàm được sử dụng để check kiểu dữ liệu là typeof và instanceof. Trong bài viết này mình sẽ giới thiệu một số cách để làm cho hàm instanceof của javascript có thể làm được nhiều hơn việc check type so với hiện tại.

Vấn đề

Sự phức tạp của typeof và instanceof

Trong javascript, khi kiểm tra kiểu dữ liệu của 1 giá trị, có những cách thông thường là

• Dùng typeof kiểm tra nếu giá trị đó là kiểu nguyên thuỷ (primitive type)

  typeof true;      // 'boolean'
  typeof false;     // 'boolean'
  
  typeof 3000;      // 'number'
  typeof 3.14;      // 'number'
  typeof NaN;       // 'number'
  typeof Infinity;  // 'number'
  
  typeof 'foobar';     // 'string'
  typeof `foobar`;     // 'string'
  

  6
• Dùng instanceof để kiểm tra nếu giá trị là instance của 1 class hoặc constructor của một function

  typeof true;      // 'boolean'
  typeof false;     // 'boolean'
  
  typeof 3000;      // 'number'
  typeof 3.14;      // 'number'
  typeof NaN;       // 'number'
  typeof Infinity;  // 'number'
  
  typeof 'foobar';     // 'string'
  typeof `foobar`;     // 'string'
  

  7 Điều này không thực sự lý tưởng vì bạn phải hiểu sự khác biệt của kiểu dữ liệu nguyên thuỷ và dữ liệu tham chiếu, điều này có thể gây bối rối và đôi khi gây lỗi.

Thêm nữa là vài thứ không minh bạch trong JS có thể làm vấn đề trở nên khá phức tạp, ví dụ

• typeof null là 'object', không phải là 'null'. Cái này có thể coi là 1 bug
• typeof phân biệt object và function (mà trong JS thì function cũng là 1 object)

> typeof {}
'object'
> typeof function () {}
'function'

Sự không rõ ràng này, cùng với những thứ mơ hồ ở trên, làm cho việc kiểm tra loại dữ liệu của 1 biến không phải object (tức là primary type) trở nên không đơn giản thông qua typeof

• Không phải tất cả các object đều là instance của Object

> Object.create(null) instanceof Object
false

Khắc phục

1. Tạo instanceof cho kiểu dữ liệu nguyên thuỷ (primitive values)

Ví dụ tạo ra 1 class để check xem có phải là kiểu dữ liệu số (number) không. Chúng ta tạo ra 1 class PrimitiveNumber, đoạn code dưới đây đơn giản return là kiểu số nếu typeof x === 'number' trả về true, chỉ cần implement 1 static method cho PrimitiveNumber mà key là symbol Symbol.hasInstancePrimitiveNumber, đoạn code dưới đây đơn giản return là kiểu số nếu typeof x === 'number' trả về true, chỉ cần implement 1 static method cho PrimitiveNumber mà key là symbol Symbol.hasInstance

class PrimitiveNumber {
    static [Symbol.hasInstance](x) {
        return typeof x === 'number';
    }
}
console.log(123 instanceof PrimitiveNumber); // true

2. Kiểm tra bằng cách dùng TypeRight library

Có 1 thư viện hỗ trợ việc kiểm tra type khá đầy đủ và đơn giản đó chính là TypeRight library, các bạn có thể xem thêm ở đây https://github.com/rauschma/type-right Thư viện này sử dụng cách tiếp cận của ví dụ trên để code ra chức năng của những class dứới. Mục đích của nó là để hàm instanceof hoạt động 1 cách trơn tru mà không phải suy nghĩ quá nhiều là dữ liệu đầu vào là loại primitive hay object.TypeRight library, các bạn có thể xem thêm ở đây https://github.com/rauschma/type-right Thư viện này sử dụng cách tiếp cận của ví dụ trên để code ra chức năng của những class dứới. Mục đích của nó là để hàm instanceof hoạt động 1 cách trơn tru mà không phải suy nghĩ quá nhiều là dữ liệu đầu vào là loại primitive hay object.

PrimitiveUndefined PrimitiveNull PrimitiveBoolean PrimitiveNumber PrimitiveString PrimitiveSymbol Với sự hỗ trợ của TypeRight, bạn có thể kiểm tra nếu biến có kiểu dữ liệu input đúng với hàm đã viết, nó sẽ throw error nếu dữ liệu input sai kiểu Với sự hỗ trợ của TypeRight, bạn có thể kiểm tra nếu biến có kiểu dữ liệu input đúng với hàm đã viết, nó sẽ throw error nếu dữ liệu input sai kiểu

typeof true;      // 'boolean'
typeof false;     // 'boolean'

typeof 3000;      // 'number'
typeof 3.14;      // 'number'
typeof NaN;       // 'number'
typeof Infinity;  // 'number'

typeof 'foobar';     // 'string'
typeof `foobar`;     // 'string'

3. Kiểm tra bằng Builtin

Builtin.is và Builtin.typeOf được giới thiệu bởi James M.Snell dùng cho việc kiểu tra kiểu dữ liệu. Các bạn có thể tham khảo ở đây https://github.com/jasnell/proposal-istypes

Builtin.is(value1, value2) kiểm tra nếu value1 và value2 cùng trỏ đến cùng 1 builtin constructor

typeof true;      // 'boolean'
typeof false;     // 'boolean'

typeof 3000;      // 'number'
typeof 3.14;      // 'number'
typeof NaN;       // 'number'
typeof Infinity;  // 'number'

typeof 'foobar';     // 'string'
typeof `foobar`;     // 'string'

Builtin.typeOf() có thể là sự mở rộng của typeof mà dùng được cho cả primitive values và built-in classes

typeof true;      // 'boolean'
typeof false;     // 'boolean'

typeof 3000;      // 'number'
typeof 3.14;      // 'number'
typeof NaN;       // 'number'
typeof Infinity;  // 'number'

typeof 'foobar';     // 'string'
typeof `foobar`;     // 'string'

Kết bài

Như vậy là mình đã giới thiệu xong các phương pháp có thể dùng để thay thế hay bổ sung vào phương thức typeof và instanceof hiện tại của Javascript. Hy vọng nó sẽ có ích cho các bạn.

Bài viết có sử dụng nguồn từ http://2ality.com/2017/08/type-right.html

All rights reserved