2020-02-22 typeof的实现原理和应用

typeof的实现原理

1. typeof 一般被用于判断一个变量的类型，我们可以利用 typeof 来判断number,string, object, boolean, function, undefined, symbol这七种类型

2. typeof 在判断一个 object的数据的时候只能告诉我们这个数据是 object, 而不能细致的具体到是哪一种 object

   let s = new String('abc');
   typeof s === 'object'// true
   s instanceof String // true
   
   typeof null === 'object'
   typeof undefined === 'undefined'
   

3. js 在底层存储变量的时候，会在变量的机器码的低位1-3位存储其类型信息

   • 000：对象
   • 010：浮点数
   • 100：字符串
   • 110: 布尔值
   • 1：整数

   but, 对于 undefined 和 null 来说，这两个值的信息存储是有点特殊的。

   null：所有机器码均为0

   undefined：用 −2^30 整数来表示

   所以，typeof 在判断 null 的时候就出现问题了，由于null 的所有机器码均为0，因此直接被当做了对象来看待。

   null instanceof null // TypeError: Right-hand side of 'instanceof' is not an object
   /*
    null 直接被判断为不是 object，这也是 JavaScript 的历史遗留bug
   */
   

   因此在用 typeof 来判断变量类型的时候，我们需要注意，最好是用 typeof 来判断基本数据类型（包括symbol），避免对 null 的判断。

4. 有一个不错的判断类型的方法，就是Object.prototype.toString，我们可以利用这个方法来对一个变量的类型来进行比较准确的判断

   Object.prototype.toString.call(1) // "[object Number]"
   Object.prototype.toString.call('hi') // "[object String]"
   
   Object.prototype.toString.call({a:'hi'}) // "[object Object]"
   
   Object.prototype.toString.call([1,'a']) // "[object Array]"
   
   Object.prototype.toString.call(true) // "[object Boolean]"
   
   Object.prototype.toString.call(() => {}) // "[object Function]"
   
   Object.prototype.toString.call(null) // "[object Null]"
   
   Object.prototype.toString.call(undefined) // "[object Undefined]"
   
   Object.prototype.toString.call(Symbol(1)) // "[object Symbol]"
   
   

typeof的用途

1. 检查一个变量是否存在，是否有值, 下面两种情况返回undefined

   • 变量没有被声明
   • 变量的值是 undefined

2. 在未声明的变量上使用typeof, 直接报错

3. 判断一个值不等于 undefined 也不等于 null

   function isDefined(x) {
     return x !== null && x !== undefined;
   }
   
   // 默认值运算符
   myValue ?? defaultValue
   // 和上述代码一直
   (myValue !== undefined && myValue !== null) ? myValue : defaultValue
   // 或者
   myValue ??= defaultValue
   // 上面的简化
   myValue = myValue ?? defaultValue
   

4. 区分原始值和对象值

   function isObject(x) {
     return (typeof x === "function"
         || (typeof x === "object" && x !== null));
   }
   
   function isObject2(x) {
     return x === Object(x);
   }
   

5. 某个值是否是函数

   typeof function () {}  // 'function'
   
   typeof Object.prototype.toString // 'function'