面试官问：typeof 可以判断哪些类型？instanceof 做了什么？null为什么被typeof错误的判断为object

一、typeof

typeof 操作符唯一的目的就是检查数据类型

所以，但我们使用 typeof 来判断引用类型变量时，无论是什么类型的变量，它都会返回 Object 。

为此，引入了instanceof。

二、instanceof

instanceof 与 typeof 相比，instanceof方法要求开发者明确的确认对象为某特定类型。即 instanceof 用于判断引用类型属于哪个构造函数的方法。

var arr = []
arr instanceof Array // true
typeof arr // "object"
// typeof 是无法判断类型是否为数组的

instanceof 操作符检测过程中也会将继承关系考虑在内，所以instanceof 可以在继承关系中用来判断一个实例是否属于它的父类型。

// 判断 f 是否是 Foo 类的实例 , 并且是否是其父类型的实例
function Aoo(){} 
function Foo(){} 
//JavaScript 原型继承
Foo.prototype = new Aoo();

var foo = new Foo(); 
console.log(foo instanceof Foo) // true 
console.log(foo instanceof Aoo) // true

f instanceof Foo 的判断逻辑是：

• f 的 __proto__一层一层往上，是否对应到 Foo.prototype
• 再往上，看是否对应着Aoo.prototype
• 再试着判断 f instanceof Object

即 instanceof 可以用于判断多层继承关系。

三、instanceof 的内部实现原理

instanceof 的内部实现机制是：通过判断对象的原型链上是否能找到对象的 prototype，来确定 instanceof 返回值

1. 内部实现原理

// instanceof 的内部实现 
function instance_of(L, R) {//L 表左表达式，R 表示右表达式，即L为变量，R为类型
  // 取 R 的显示原型
  var prototype = R.prototype
  // 取 L 的隐式原型
  L = L.__proto__
  // 判断对象（L）的类型是否严格等于类型（R）的显式原型
  while (true) { 
    if (L === null) {
      return false
    }

    // 这里重点：当 prototype 严格等于 L 时，返回 true
    if (prototype === L) {
      return true
    } 

    L = L.__proto__
  } 
}

instanceof 运算符用来检测 constructor.prototype是否存在于参数 object 的原型链上。

看下面一个例子，instanceof 为什么会返回 true？很显然，an 并不是通过 Bottle() 创建的。

function An() {}
function Bottle() {}
An.prototype = Bottle.prototype = {};

let an = new An();
console.log(an instanceof Bottle); // true

这是因为 instanceof 关心的并不是构造函数，而是原型链。

an.__proto__ === An.prototype; // true
An.prototype === Bottle.prototype; // true
// 即
an.__proto__ === Bottle.prototype; // true

即有 an.__proto__ === Bottle.prototype 成立，所以 an instanceof Bottle 返回了 true。

所以，按照 instanceof 的逻辑，真正决定类型的是 prototype，而不是构造函数。

2. Object.prototype.toString（扩展）

还有一个不错的判断类型的方法，就是 Object.prototype.toString ，我们可以利用这个方法来对一个变量的类型来进行比较准确的判断

默认情况下(不覆盖 toString 方法前提下)，任何一个对象调用 Object 原生的 toString 方法都会返回 "[object type]"，其中 type 是对象的类型；

let obj = {};

console.log(obj); // {}
console.log(obj.toString()); // "[object Object]"

[[Class]]

每个实例都有一个 [[Class]] 属性，这个属性中就指定了上述字符串中的 type (构造函数名)。[[Class]] 不能直接地被访问，但通常可以间接地通过在这个值上借用默认的 Object.prototype.toString.call(..) 方法调用来展示。

Object.prototype.toString.call("abc"); // "[object String]"
Object.prototype.toString.call(100); // "[object Number]"
Object.prototype.toString.call(true); // "[object Boolean]"
Object.prototype.toString.call(null); // "[object Null]"
Object.prototype.toString.call(undefined); // "[object Undefined]"
Object.prototype.toString.call([1,2,3]); // "[object Array]"
Object.prototype.toString.call(/\w/); // "[object RegExp]"

可以通过 Object.prototype.toString.call(..) 来获取每个对象的类型。

function isFunction(value) {
  return Object.prototype.toString.call(value) === "[object Function]"
}
function isDate(value) {
  return Object.prototype.toString.call(value) === "[object Date]"
}
function isRegExp(value) {
  return Object.prototype.toString.call(value) === "[object RegExp]"
}

isDate(new Date()); // true
isRegExp(/\w/); // true
isFunction(function(){}); //true

或者可写为：

function generator(type){
  return function(value){
    return Object.prototype.toString.call(value) === "[object "+ type +"]"
  }
}

let isFunction = generator('Function')
let isArray = generator('Array');
let isDate = generator('Date');
let isRegExp = generator('RegExp');

isArray([]));    // true
isDate(new Date()); // true
isRegExp(/\w/); // true
isFunction(function(){}); //true

Symbol.toStringTag

Object.prototype.toString 方法可以使用 Symbol.toStringTag 这个特殊的对象属性进行自定义输出。

举例说明：

let bottle = {
  [Symbol.toStringTag]: "Bottle"
};

console.log(Object.prototype.toString.call(bottle)); // [object Bottle]

大部分和环境相关的对象也有这个属性。以下输出可能因浏览器不同而异：

// 环境相关对象和类的 toStringTag：
console.log(window[Symbol.toStringTag]); // Window
console.log(XMLHttpRequest.prototype[Symbol.toStringTag]); // XMLHttpRequest

console.log(Object.prototype.toString.call(window)); // [object Window]
console.log(Object.prototype.toString.call(new XMLHttpRequest())); // [object XMLHttpRequest]

输出结果和 Symbol.toStringTag（前提是这个属性存在）一样，只不过被包裹进了 [object ...] 里。

所以，如果希望以字符串的形式获取内置对象类型信息，而不仅仅只是检测类型的话，可以用这个方法来替代 instanceof。

3. 总结

Object.prototype.toString 基本上就是一增强版 typeof。

instanceof 在涉及多层类结构的场合中比较实用，这种情况下需要将类的继承关系考虑在内。

四、null为什么被typeof错误的判断为了'object'

// JavaScript 诞生以来便如此
typeof null === 'object';

在 JavaScript 最初的实现中，JavaScript 中的值是由一个表示类型的标签和实际数据值表示的。对象的类型标签是 0。由于 null 代表的是空指针（大多数平台下值为 0x00），因此，null 的类型标签是 0，typeof null 也因此返回 "object"。（参考来源）

曾有一个 ECMAScript 的修复提案（通过选择性加入的方式），但被拒绝了。该提案会导致 typeof null === 'null'。

如果用 instanceof 来判断的话：

null instanceof null
// Uncaught TypeError: Right-hand side of 'instanceof' is not an object

本文由哈喽比特于3年以前收录，如有侵权请联系我们。
文章来源：https://mp.weixin.qq.com/s/Ji2pJEsq0mKszXSLbsY66Q