typeof实现原理
typeof 一般被用于判断一个变量的类型, 我们可以利用typeof 来判断 number, string, object, function, undefiend, symbol 这七种类型, 这种判断能帮助我们搞定一些问题, 比如在判断不是 object 类型的时候,typeof能比较清楚的告诉我们具体是哪一种类型。 但是, typeof在判断object的数据的时候只能告诉我们这个数据时object, 不能细致到具体是哪一种object。
let str = new String('abc');
typeof str === 'object'; // true
s instanceof String // true
想要判断是哪一种object 需要用 instanceof 这个操作符来判断。
typeof 的原理
js在底层存储数据类型信息的方式说明: 一个js变量在它的底层实现中,他的类型信息存储变量会在机器码的低位1-3存储类型信息。
- 000: 对象
- 010: 浮点数
- 100: 字符串
- 110: 布尔
- 1:整数
但是, 对于undefiend 和 null来说,这两个值的信息存储是有点独特的。
- null: 所有机器码均为 0
- undefiend: 用-2^30整数来表示
所以, typeof 在判断null的时候就会出现问题, 由于null的所有机器码都是0, 因此直接被当做了对象来处理。
如果用instanceof 来判断:
null instanceof null // TypeError: Right-hand side of 'instanceof' is not an object
null 由被判断不是 object, 这也是 JavaScript的历史遗留bug. (详情了解typeof)
因此在用 typeof 来判断变量类型的时候, 来判断基本数据类型, 避免对 null 的判断。
- 还有一个不错的判断类型的方法, 就是Object.prototype.toString, 此方法可以对一个变量类型进行比较准确的判断。
Object.prototype.toString.call(1) // "[object Number]"
Object.prototype.toString.call('hi') // "[object String]"
Object.prototype.toString.call({a:'hi'}) // "[object Object]"
Object.prototype.toString.call([1,'a']) // "[object Array]"
Object.prototype.toString.call(true) // "[object Boolean]"
Object.prototype.toString.call(() => {}) // "[object Function]"
Object.prototype.toString.call(null) // "[object Null]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
Object.prototype.toString.call(Symbol(1)) // "[object Symbol]"
instanceof 原理
instanceof 来判断对象的具体类型是不准确的, 其实instanceof 的主要作用就是判断一个实例是否属于某种类型
var Person = function() {};
var lee = new Person();
lee instanceof Person // true
当然, instanceof 也可以判断一个实例是否是其父类型或者祖先类型的实例。
var Parent = function() {};
var Child = function() {};
Child.prototype = new Parent();
var child = new Child();
child instanceof Child // true
child instanceof Parent // true
以上是 instanceof的用法, 根据ECMAScript语言规范,梳理一下大概原理思路:
function new_instance_of(leftVaule, rightVaule) {
let rightProto = rightVaule.prototype; // 取右表达式的 prototype 值
leftVaule = leftVaule.__proto__; // 取左表达式的__proto__值
while (true) {
if (leftVaule === null) {
return false;
}
if (leftVaule === rightProto) {
return true;
}
leftVaule = leftVaule.__proto__;
}
}
其实 instanceof主要思路就是只看右边变量的 prototype在左边变量的原型链上即可,因此, instanceof 在查找过程中会遍历左变量的原型链,直到找到等于右变量的 prototype,如果查找失败,则会返回false, 查找成功返回true 告诉我们左边变量是右边变量的实例。
function Foo() {}
Object instanceof Object // true
Function instanceof Function // true
Function instanceof Object // true
Foo instanceof Foo // false
Foo instanceof Object // true
Foo instanceof Function // true
总结
- typeof判断基本数据类型是ok的, 需要注意判断 null类型时的问题。
- 如果判断一个类型是否属于另一种类型可以使用 instanceof。
- 如果需要准确判断对象实例的类型时, 可以采取 Object.prototype.toString.call 方法。