JavaScript类型检测的四种方式

类型检测的四种方式

1.typeof 方法

• 对于引用类型Arrary、Null、[]、{} 都会返回 object ,若对 object 无严格要求可以简单使用。

console.log(typeof "hello"); //string
console.log(typeof null); //object
console.log(typeof []); //object
console.log(typeof {}); //object

2. instanceof 方法

• 不建议使用，问题有点多，尤其 null、undefined。

"hello" instanceof String; //false
123 instanceof Number; //false
new String("hello") instanceof String; //true
new Number(123) instanceof Number; //true

3. constructor 方法

• 不可检测 null、undefined

"1".constructor === String; //true
[].constructor === Array; //true
(function() {}.constructor === Function); //true
({}.constructor === Object); //true
undefined.constructor === Undefined; //Uncaught TypeError: Cannot read property 'constructor' of undefined
//构造函数的问题
function Fn() {}
Fn.prototype = new Array();
var f = new Fn();
f.constructor === Fn; //false
f.constructor === Array; //true

4. Object.prototype.toString.call() 方法

• 所有的数据类型，这个办法都可以判断出来。返回结果为字符串类型，开头大些。注意：[object String]中间是有个空格的。

Object.prototype.toString.call("hello");
//[object String]
Object.prototype.toString.call("hello").slice(8, -1);
//String

instanceof 和 typeof 的实现原理

浅谈 instanceof 和 typeof 的实现原理

1. typeof

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

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

   • 特殊：undefined和null

     • null：所有机器码均为0
     • undefined：用 −2^30 整数来表示

   • typeof 在判断 null 的时候

     • 由于 null 的所有机器码均为0，因此直接被当做了对象来看待。
     • null instanceof null 会 TypeError，直接被判断为不是 object。（ JavaScript 的历史遗留bug）

   • typeof 来判断基本数据类型（包括symbol），避免对 null 的判断。

2. instanceof

   • instanceof 来判断对象的具体类型
   • instanceof 主要的实现原理就是只要右边变量的 prototype 在左边变量的原型链上即可。

   // ECMAScript 语言规范,`instanceof`原理基本思路
   function new_instance_of(leftVaule, rightVaule) {
      let rightProto = rightVaule.prototype; // 取右表达式的 prototype 值
      leftVaule = leftVaule.__proto__; // 取左表达式的__proto__值
      while (true) {
          if (leftVaule === null) {
              return false;
          }
          if (leftVaule === rightProto) {
              return true;
          }
          leftVaule = leftVaule.__proto__;
    }
   }