认识 instanceof 和 typeof

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 方法。