问题

Javascript中有些基本的表达式非常反直觉，比如：

var foo = "foo";
foo instanceof String // false

可是我们测试下面的表达式：

"foo".__proto__ === String.prototype // true
typeof "foo" // "string"

看起来"foo"的原型链能找到String.prototype, 而且typeof也返回的是“string”，那到底"foo" 的类型是不是String？

typeof vs instanceof

其实这个问题的答案在于，这两个操作符的作用和字面的意思有非常大的差异。某种意义上说，typeof并不是用来判断数据的类型，instanceof也不是用来判断数据是某个类型的实例。

instanceof

obj instanceof Type 只是用来判断Type.prototype对象是不是在obj对象的原型链路径上。而一旦涉及到原型链，就必须是Object对象，也就是说instanceof左边变量必须是一个Object才有实际的意义。可是Javascript里并不是所有变量都是Object对象。比如'foo' 这样的字符串常量。实际上，instanceof 对于primitives包含的6种类型数据来说都是没有意义的，所以都会返回false。

    var t = 'foo';
    t instanceof t; //Uncaught TypeError: Right-hand side of 'instanceof' is not an object

    var t1 = 'string', t2=1, t3=null, t4=undefined, t5=true, t6=Symbol();
    t1 instanceof String //false
    t2 instanceof Number //false
    t3 instanceof Object //false
    t4 instanceof Object //false
    t5 instanceof Boolean //false
    t6 instanceof Symbol //false

更进一步，instanceof右边的变量必须是一个函数(callable):

 var t = {}; t instanceof {}; // Uncaught TypeError: Right-hand side of 'instanceof' is not callable

  Object instanceof Function //true
  Function instanceof Object //true

另外，让人惊讶的是，Object instanceof Function 和Function instanceof Object 都返回true。。。因为：

Object.__proto__ === Function.prototype // Object instanceof Function
Function.__proto__.__proto__ === Object.prototype// Function instanceof Object

primitives vs Object

Javascript里变量分为两类，primitives(原始类型）和Object(对象类型）。有什么差别呢，我一开始的理解是，类似于C/C++, primitive是分配在stack上的变量，Object是分配在heap上的变量。这么想有助于记忆，但是显然是有问题的。

  function test(){
    var foo  = 'foo';
    return function(){return foo;};
  }

如果foo是分配在stack上的，在test函数执行完后，foo就会被回收，但是由于closure的存在，显然这是有问题的，foo必须保存在另外的地方。

primitives和Object的区别在于primitives是基本的值变量，只有值，没有属性，传参时也是按值传递；Object则是包含属性的复合结构，按引用传递。那 "foo".__proto__ === String.prototype又是怎么回事？这里并不是“foo”上有__proto__这个属性，而是对“foo”做了隐式转换：String("foo").__proto__。

typeof

理解了primitives和Object区别以及instanceof用法后，typeof也就很好理解了。 由于instanceof只对Object数据有意义，typeof可以看作instanceof的一个补充，主要是用来区分primitives的。

image.png

另外要注意的是，typeof null === 'object'， 这又是一个违反直觉的例子。

总结

typeof和instanceof都是Javascript早期就已经存在的重要操作符，由于这两个操作符非常违反直觉，加上真正用到的频率也不高，偶尔需要用的时候就会很容易出错。
我们来看一下这个在stackoverflow上很有意思的一个问答来做为结尾，怎样判断一个变量是string(字符串)? 投票选中的答案是typeof foo === 'string'。看完本文，正确答案就很简单了：

typeof foo === 'string' || foo instanceof String

另外，回答里面有个答案是:

Object.prototype.toString.call(foo) === "[object String]"

这也是正确的，而且这个写法有个很奇妙的地方：

Object.prototype.toString.call(null) === "[object Null]"
Object.prototype.toString.call(undefined) === "[object Undefined]"

这是我这辈子第一次用代码证明null和undefined的类型是传说中的Null和Undefined。