JS学习笔记：温故typeof与instanceof的基本知识点

JS学习笔记：温故typeof与instanceof的基本知识点。

判断一个变量的数据类型或者该变量是否为空值的情况，你是如何去选择判断类型的操作符的？本文来总结记录一下我们开发人员必须掌握的关于 typeof 和 instanceof 的知识点以及在开发中的使用建议，同时在面试过程中也经常会遇到这样的问题。

1、typeof 操作符

typeof 操作符，确定任意变量的数据类型,确切说，它是判断一个变量是否为字符串、数值、布尔值或 undefined 的最好方式。其返回值为字符串类型，其使用方法如下：typeof 是一个操作符，不是一个函数，但是使用可以将变量作为参数传入：
a、typeof  operand
b、typeof (operand)

（1）返回值为字符串类型，其中：

（2）常见使用方法

console.log(typeof undefined);//'undefined'
console.log(typeof true);//'bpplean'
console.log(typeof ("number"));  //'string'
console.log(typeof "number");  //'string' 
console.log(typeof 1);//'number'
console.log(typeof Symbol());//'symbol'
//对于Array，Null等特殊对象使用typeof一律返回object，这正是typeof的局限性
console.log(typeof null);   //'object'
console.log(typeof [1, 2, 3]);//'object'
console.log(typeof undefined);  //'undefined'
//通过 typeof 操作符来区分函数和其他对象
function f1() { console.log(111); }
console.log(typeof f1);  //'function'  
console.log(typeof f1());  // 111 'undefined'

（3）不能通过typeof 来判断一个变量是否存在

var a;
if (a === undefined) {
    console.log("变量不存在")
} else {
    console.log("变量存在")
}

// 变量不存在

2、instanceof 操作符

typeof虽然对原始值很有用，但它对引用值的用处不大。我们通常不关心一个值是不是对象，而是想知道它是什么类型的对象。为了解决这个问题，ECMAScript 提供了 instanceof 操作符。使用如下：

function f1() {
    console.log(111); 
}
console.log(f1 instanceof Object);//true
console.log(f1 instanceof Function);//true
console.log(f1 instanceof RegExp);//false

所有引用值都是 Object 的实例，因此通过 instanceof 操作符检测任何引用值和Object 构造函数都会返回 true 。

• 类似地，如果用 instanceof 检测原始值，则始终会返回 false ，因为原始值不是对象。

instanceof 运算符用于判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。其实现原理如下：

function myInstanceof(left, right) {
   let proto = Object.getPrototypeOf(left), // 获取对象的原型
   prototype = right.prototype; // 获取构造函数的 prototype 对象
 
 // 判断构造函数的 prototype 对象是否在对象的原型链上
   while (true) {
     if (!proto) return false;
     if (proto === prototype) return true;
     proto = Object.getPrototypeOf(proto);
   }
}

3、typeof 和 instanceof 的区别以及开发中的使用建议

typeof 与 instance 都是判断数据类型的方法，区别如下：

• typeof会返回一个变量的基本类型，instanceof返回的是一个布尔值

• instanceof 可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型

• 而typeof 也存在弊端，它虽然可以判断基础数据类型（null 除外），但是引用数据类型中，除了function 类型以外，其他的也无法判断

可以看到，上述两种方法都有弊端，并不能满足所有场景的需求

如果需要通用检测数据类型，建议采用Object.prototype.toString，调用该方法，统一返回格式“[object Xxx]”的字符串。使用如下：

console.log(Object.prototype.toString.call(undefined))  //"[object Undefined]"
console.log(Object.prototype.toString.call(true))  // "[object Boolean]"
console.log(Object.prototype.toString.call('1'))  // "[object String]"
console.log(Object.prototype.toString.call(1))    // "[object Number]"
console.log(Object.prototype.toString.call(Symbol()))    // "[object Symbol]"
console.log(Object.prototype.toString.call({}))   // "[object Object]"
console.log(Object.prototype.toString.call(function () { }))   // "[object Function]"
console.log(Object.prototype.toString.call([]))       //"[object Array]"
console.log(Object.prototype.toString.call(null))    //"[object Null]"
console.log(Object.prototype.toString.call(/123/g))     //"[object RegExp]"
console.log(Object.prototype.toString.call(new Date()))  //"[object Date]"