[JS] instanceof 和 typeof 的实现原理

[david2tdw]

instanceof 和 typeof 的实现原理

typeof

typeof 一般被用于判断一个变量的类型，我们可以利用 typeof 来判断number, string, object, boolean, function, undefined, symbol 这七种类型.

typeof 在判断一个 object 的数据的时候只能告诉我们这个数据是 object, 而不能细致的具体到是哪一种 object

var s = new String('abc');
typeof s // 'object'
typeof s === 'object'// true
s instanceof String // true
s instanceof Object // true
[1,2] instanceof Object //true

其实，js 在底层存储变量的时候，会在变量的机器码的低位1-3位存储其类型信息:

000：对象 010：浮点数 100：字符串 110：布尔 1：整数

但对于 undefined 和 null 来说，这两个值的信息存储是有点特殊的。

null：所有机器码均为0 undefined：用 −2^30 整数来表示

所以，typeof 在判断 null 的时候就出现问题了，由于 null 的所有机器码均为0，因此直接被当做了对象来看待。

判断null 可以使用

null === null //true

instanceof

instanceof 主要的作用就是判断一个实例是否属于某种类型. 当然，instanceof 也可以判断一个实例是否是其父类型或者祖先类型的实例。

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__
    }
}

看一个例子：

function Foo() {
}

Object instanceof Object // true
Function instanceof Object // true
Foo instanceof Foo // false
Foo instanceof Object // true

• Object instanceof Object

leftValue = Object.__proto__ = Function.prototype; rightValue = Object.prototype; // 第一次判断 leftValue != rightValue leftValue = Function.prototype.__proto__ = Object.prototype // 第二次判断 leftValue === rightValue // 返回 true

• Foo instanceof Foo

leftValue = Foo, rightValue = Foo leftValue = Foo.__proto__ = Function.prototype rightValue = Foo.prototype // 第一次判断 leftValue != rightValue leftValue = Function.prototype.__proto__ = Object.prototype // 第二次判断 leftValue != rightValue leftValue = Object.prototype = null // 第三次判断 leftValue === null // 返回 false

• Foo instanceof Object

leftValue = Foo, rightValue = Object leftValue = Foo.__proto__ = Function.prototype rightValue = Object.prototype // 第一次判断 leftValue != rightValue leftValue = Function.prototype.__proto__ = Object.prototype // 第二次判断 leftValue === rightValue // 返回 true

Object.prototype.toString.call 方法

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]"

[david2tdw]

浅谈 instanceof 和 typeof 的实现原理