JavaScript 案例二 --typeof 与 instanceof

目录

typeof

特例

instanceof

实现原理

区别

需要通用检测数据类型

案例

---

typeof

---

typeof 操作符返回一个字符串，表示未经计算的操作数的类型

'number'	typeof 1
'string'	typeof '1'
'undefined'	typeof  undefined
'boolean'	typeof  true
'symbol'	typeof Symbol()
'object'	typeof []
'object'	typeof {}
'object'	typeof  console
'object'	typeof null
'function'	typeof console.log

特例

---

• 虽然typeof null为object，但这只是JavaScript 存在的一个悠久 Bug，不代表null就是引用数据类型，并且null本身也不是对象
  • null在 typeof之后返回的是有问题的结果，不能作为判断null的方法。如果你需要在 if 语句中判断是否为 null，直接通过===null来判断就好
• 可以发现引用类型数据，用typeof来判断的话，除了function会被识别出来之外，其余的都输出object
• 如果我们想要判断一个变量是否存在，可以使用typeof：(不能使用if(a)， 若a未声明，则报错)

instanceof

---

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上

// 定义构建函数
let Car = function() {}
let benz = new Car()
benz instanceof Car // true
let car = new String('xxx')
car instanceof String // true
let str = 'xxx'
str instanceof String // false

实现原理

---

function myInstanceof(left, right) {
    // 这里先用typeof来判断基础数据类型，如果是，直接返回false
    if(typeof left !== 'object' || left === null) return false;
    // getProtypeOf是Object对象自带的API，能够拿到参数的原型对象
    let proto = Object.getPrototypeOf(left);
    while(true) {                  
        if(proto === null) return false;
        if(proto === right.prototype) return true;//找到相同原型对象，返回true
        proto = Object.getPrototypeof(proto);
    }
}

区别

---

• typeof会返回一个变量的基本类型，instanceof返回的是一个布尔值
• instanceof 可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型，而typeof 也存在弊端，它虽然可以判断基础数据类型（null 除外），但是引用数据类型中，除了function 类型以外，其他的也无法判断

需要通用检测数据类型

---

Object.prototype.toString

调用该方法，统一返回格式“[object Xxx]”的字符串

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

案例

---

function getType(obj){
  let type  = typeof obj;
  if (type !== "object") {    
    // 先进行typeof判断，如果是基础数据类型，直接返回
    return type;
  }
  // 对于typeof返回结果是object的，再进行如下的判断，正则返回结果
  return Object.prototype.toString.call(obj)
                .replace(/^\[object (\S+)\]$/, '$1'); 
}