JavaScript类型检测的四种方式

96 阅读 0 评论 64 点赞

我是靠谱客的博主阳光鸡翅，最近开发中收集的这篇文章主要介绍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 的实现原理

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 的判断。

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__;
 }
}