美文网首页
2020-02-22 typeof的实现原理和应用

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

作者: FConfidence | 来源:发表于2020-02-22 23:18 被阅读0次

    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'
      

    相关文章

      网友评论

          本文标题:2020-02-22 typeof的实现原理和应用

          本文链接:https://www.haomeiwen.com/subject/dytdqhtx.html