关于javascript:深入了解JS类型判断

JS中判断数据类型的形式有很多

typeof
Object.prototype.toString
instanceof
Array.isArray

一、回顾

JS数据类型分为根本类型和援用类型。
根本类型：

undefined
null
Number
String
Boolean
Symbol

援用类型

Object
Function

函数是一种非凡的对象，即可调用的对象。

二、typeof

2.1 语法

typeof操作符能够辨别根本类型，函数和对象。

console.log(typeof null) // object
console.log(typeof undefined) // undefined
console.log(typeof 1) // number
console.log(typeof 1.2) // number
console.log(typeof "hello") // string
console.log(typeof true) // boolean
console.log(typeof Symbol()) // symbol
console.log(typeof (() => {})) // function
console.log(typeof {}) // object
console.log(typeof []) // object
console.log(typeof /abc/) // object
console.log(typeof new Date()) // object

typeof有个显著的bug就是typeof null为object;
typeof无奈辨别各种内置的对象，如Array, Date等。

2.2 原理

JS是动静类型的变量，每个变量在存储时除了存储变量值外，还须要存储变量的类型。JS里应用32位（bit）存储变量信息。低位的1~3个bit存储变量类型信息，叫做类型标签(type tag)

.... XXXX X000 // object
.... XXXX XXX1 // int
.... XXXX X010 // double
.... XXXX X100 // string
.... XXXX X110 // boolean

只有int类型的type tag应用1个bit，并且取值为1，其余都是3个bit, 并且低位为0。这样能够通过type tag低位取值判断是否为int数据；
为了辨别int，还剩下2个bit，相当于应用2个bit辨别这四个类型：object, double, string, boolean；
然而null，undefined和Function并没有调配type tag。

如何辨认`Function`

函数并没有独自的type tag，因为函数也是对象。typeof外部判断如果一个对象实现了[[call]]外部办法则认为是函数。

如何辨认`undefined`

undefined变量存储的是个非凡值JSVAL_VOID（0-2^30），typeof外部判断如果一个变量存储的是这个非凡值，则认为是undefined。

#define JSVAL_VOID              INT_TO_JSVAL(0 - JSVAL_INT_POW2(30))

如何辨认`null`

null变量存储的也是个非凡值JSVAL_NULL，并且凑巧取值是空指针机器码(0)，正好低位bit的值跟对象的type tag是一样的，这也导致驰名的bug:

typeof null // object

很可怜，这个bug也不修复了，因为第一版JS就存在这个bug了。祖传代码，不敢批改啊。

有很多办法能够判断一个变量是一个非null的对象，之前遇到一个比拟经典的写法：

// 利用Object函数的装箱性能
function isObject(obj) {
    return Object(obj) === obj;
}

isObject({}) // true
isObject(null) // false

三、`Object.prototype.toString`

个别应用Object.prototype.toString辨别各种内置对象。

3.2 语法

console.log(Object.prototype.toString.call(1)); // [object Number]，隐式类型转换
console.log(Object.prototype.toString.call('')); // [object String]，隐式类型转换
console.log(Object.prototype.toString.call(null)); // [object Null]，非凡解决
console.log(Object.prototype.toString.call(undefined)); // [object Undefined]，非凡解决
console.log(Object.prototype.toString.call(true)); // [object Boolean]，隐式类型转换
console.log(Object.prototype.toString.call( {})); // [object Object]
console.log(Object.prototype.toString.call([])); // [object Array]
console.log(Object.prototype.toString.call(function(){})); // [object Function]

如果实参是个根本类型，会主动转成对应的援用类型;

Object.prototype.toString不能辨别根本类型的，只是用于辨别各种对象；

null和undefined不存在对应的援用类型，外部非凡解决了;

3.3 原理

外部属性`[[Class]]`

每个对象都有个外部属性[[Class]]，内置对象的[[Class]]的值都是不同的（”Arguments”, “Array”, “Boolean”, “Date”, “Error”, “Function”, “JSON”, “Math”, “Number”, “Object”, “RegExp”, “String”），并且目前[[Class]]属性值只能通过Object.prototype.toString拜访。

`Symbol.toStringTag`属性

其实Object.prototype.toString外部先拜访对象的Symbol.toStringTag属性值拼接返回值的。

var a = "hello"
console.log(Object.prototype.toString.call(a)); // "[object String]"

// 批改Symbol.toStringTag值
Object.defineProperty(String.prototype, Symbol.toStringTag, {
    get() {
        return 'MyString'
    }
})

console.log(Object.prototype.toString.call(a)); // "[object MyString]"

如果哪个货偷偷批改了内置对象的Symbol.toStringTag属性值，那Object.prototype.toString也就不能失常工作了。

3.4 `Object.prototype.toString`外部逻辑

综上能够总结Object.prototype.toString的外部逻辑：

如果实参是undefined, 则返回”[object Undefined]”；
如果实参是null, 则返回”[object Null]”；
把实参转成对象
获取对象的Symbol.toStringTag属性值subType
- 如果subType是个字符串，则返回[object subType]
- 否则获取对象的[[Class]]属性值type，并返回[object type]

四、instanceof

4.1 语法

object instanceof constructorFunc

instanceof 操作符判断构造函数constructorFunc的prototype属性是否在对象object的原型链上。

Object.create({}) instanceof Object // true
Object.create(null) instanceof Object // false

Function instanceof Object // true
Function instanceof Function // true
Object instanceof Object // true

作为类型判断的一种形式，instanceof 操作符不会对变量object进行隐式类型转换

"" instanceof String; // false，根本类型不会转成对象
new String('') instanceof String; // true

对于没有原型的对象或则根本类型间接返回false

1 instanceof Object // false
Object.create(null) instanceof Object // false

constructorFunc必须是个对象。并且大部分状况要求是个构造函数（即要具备prototype属性）

// TypeError: Right-hand side of 'instanceof' is not an object
1 instanceof 1

// TypeError: Right-hand side of 'instanceof' is not callable
1 instanceof ({})

// TypeError: Function has non-object prototype 'undefined' in instanceof check
({}) instanceof (() => {})

4.2 `intanceof`的缺点

不同的全局执行上下文的对象和函数都是不相等的，所以对于跨全局执行上下文intanceof就不能失常工作了。

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <iframe src=""></iframe>
        <script type="text/javascript">
            var iframe = window.frames[0];
            var iframeArr = new iframe.Array();

            console.log([] instanceof iframe.Array) // false
            console.log(iframeArr instanceof Array)  // false
            console.log(iframeArr instanceof iframe.Array)  // true       
        </script>
    </body>
</html>

4.3 原理

`Symbol.hasInstance`函数

instanceof操作符判断构造函数constructorFunc的prototype属性是否在对象object的原型链上。然而能够利用Symbol.hasInstance自定义instanceof操作逻辑。

var obj = {}

// 自定义Symbol.hasInstance办法
Object.defineProperty(obj, Symbol.hasInstance, {
  value: function() {
      return true;
  }
});

1 instanceof obj // true

当然了这个举例没有任何实际意义。只是阐明下Symbol.hasInstance的性能。Symbol.hasInstance本意是自定义构造函数判断实例对象的形式，不要扭转instanceof 的含意。

原型链

4.4 `instanceof`外部逻辑

综上能够梳理instanceof外部逻辑

object instanceof constructorFunc

如果constructorFunc不是个对象，或则是null，间接抛TypeError异样；
如果constructorFunc[Symbole.hasInstance]办法，则返回!!constructorFunc[Symbole.hasInstance](object )
如果constructorFunc不是函数，间接抛TypeError异样；
遍历object的原型链，一一跟constructorFunc.prototype属性比拟：
- 如果object没有原型，则间接返回false;
- 如果constructorFunc.prototype不是对象，则间接抛TypeError异样。

五、内置的类型判断办法

5.1 Array.isArray

ES5引入了办法Array.isArray专门用于数组类型判断。Object.prototype.toString和instanceof都不够严格

var arr = []
Object.defineProperty(Array.prototype, Symbol.toStringTag, {
    get() {
        return 'myArray'
    }
})

console.log(Object.prototype.toString.call(arr)); // [object myArray]
console.log(Array.isArray(arr)); // true

console.log(Array.prototype instanceof Array); // false
console.log(Array.isArray(Array.prototype)); // true

不过现实情况下根本都是利用Object.prototype.toString作为Array.isArray的polyfill:

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

六、内置对象的`prototype`属性类型判断

内置的对象Number, String, Boolean, Object, Function, Date, RegExp, Array都是各自类型对象的构造函数，并且他们的prototype属性都是各自实例对象的原型。然而这些内置对象的prototype属性又是什么类型呢？

6.1 `Number.prototype`

Number.prototype也是个数字，相似Number(0)，然而Number.prototype并不是Number的实例。

var prototype = Number.prototype

console.log(prototype == 0); // true

console.log(prototype instanceof Number); // false
console.log(Object.prototype.toString.call(protoype)); // [object Number]

6.2 `String.prototype`

String.prototype也是字符串，相似""，然而String.prototype并不是String的实例。

var prototype = String.prototype

console.log(prototype == ''); // true
console.log(prototype instanceof String); // false
console.log(Object.prototype.toString.call(prototype)); // [object String]

6.3 `Boolean.prototype`

Boolean.prototype也是Boolean，相似false，然而Boolean.prototype并不是Boolean的实例。

var prototype = Boolean.prototype

console.log(prototype == false); // true
console.log(prototype instanceof Boolean); // false
console.log(Object.prototype.toString.call(prototype)); // [object Boolean]

6.4 `Object.prototype`

Object.prototype也是Object，相似Object.create(null)的值（原型为null的空对象），然而Object.prototype并不是Object的实例。

var prototype = Object.prototype

Object.getPrototypeOf(prototype); // null
console.log(prototype instanceof Object); // false
console.log(Object.prototype.toString.call(prototype)); // [object Object]

6.5 `Function.prototype`

Function.prototype也是Function，是个空函数，然而Function.prototype并不是Function的实例。

var prototype = Function.prototype

console.log(prototype()) // undefined
console.log(prototype instanceof Function); // false
console.log(Object.prototype.toString.call(prototype)); // [object Function]

6.6 `Array.prototype`

Array.prototype也是Array，是个空数组，然而Array.prototype并不是Array的实例。

var prototype = Array.prototype

console.log(prototype instanceof Array); // false
console.log(Array.isArray(prototype)) // true
console.log(Object.prototype.toString.call(prototype)); // [object Array]

6.6 `RegExp.prototype`

RegExp.prototype并不是RegExp的实例。然而对于RegExp.prototype是RegExp还是对象存在兼容性问题，有些浏览器下RegExp.prototype也是RegExp，并且是个总返回true的正则。

var prototype = RegExp.prototype
console.log(prototype.test('hello')) // true
console.log(prototype instanceof RegExp); // false
// Chrome v84返回"[object Object]", IE返回"[object RegExp]"
console.log(Object.prototype.toString.call(prototype)); //

整顿自gitHub笔记：

JS-类型&类型判断
JS-操作符-instanceof

关于javascript:深入了解JS类型判断

一、回顾

二、typeof

2.1 语法

2.2 原理

如何辨认`Function`

如何辨认`undefined`

如何辨认`null`

三、`Object.prototype.toString`

3.2 语法

3.3 原理

外部属性`[[Class]]`

`Symbol.toStringTag`属性

3.4 `Object.prototype.toString`外部逻辑

四、instanceof

4.1 语法

4.2 `intanceof`的缺点

4.3 原理

`Symbol.hasInstance`函数

原型链

4.4 `instanceof`外部逻辑

五、内置的类型判断办法

5.1 Array.isArray

六、内置对象的`prototype`属性类型判断

6.1 `Number.prototype`

6.2 `String.prototype`

6.3 `Boolean.prototype`

6.4 `Object.prototype`

6.5 `Function.prototype`

6.6 `Array.prototype`

6.6 `RegExp.prototype`

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于javascript:深入了解JS类型判断

一、回顾

二、typeof

2.1 语法

2.2 原理

如何辨认Function

如何辨认undefined

如何辨认null

三、Object.prototype.toString

3.2 语法

3.3 原理

外部属性[[Class]]

Symbol.toStringTag属性

3.4 Object.prototype.toString外部逻辑

四、instanceof

4.1 语法

4.2 intanceof的缺点

4.3 原理

Symbol.hasInstance函数

原型链

4.4 instanceof外部逻辑

五、内置的类型判断办法

5.1 Array.isArray

六、内置对象的prototype属性类型判断

6.1 Number.prototype

6.2 String.prototype

6.3 Boolean.prototype

6.4 Object.prototype

6.5 Function.prototype

6.6 Array.prototype

6.6 RegExp.prototype

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

如何辨认`Function`

如何辨认`undefined`

如何辨认`null`

三、`Object.prototype.toString`

外部属性`[[Class]]`

`Symbol.toStringTag`属性

3.4 `Object.prototype.toString`外部逻辑

4.2 `intanceof`的缺点

`Symbol.hasInstance`函数

4.4 `instanceof`外部逻辑

六、内置对象的`prototype`属性类型判断

6.1 `Number.prototype`

6.2 `String.prototype`

6.3 `Boolean.prototype`

6.4 `Object.prototype`

6.5 `Function.prototype`

6.6 `Array.prototype`

6.6 `RegExp.prototype`

发表回复取消回复