问题
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的。
另外要注意的是,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。