js--浅谈instanceof的底层实现原理、手动实现一个instanceof

转自https://blog.csdn.net/qq_38722097/article/details/80717240 www.cnblogs.com/yalong/p/10…

typeof 实现原理

typeof通常被用于判断一个变量的类型，咱们能够利用typeof来判断number、string、object、boolean、function、undefined、symbol这七种类型。当判断不是object时其它都好说。、

typeof 不存在的变量 = “undefined”

typeof 对象 = “object”

typeof null = "object"

typeof 数组 = “object”

typeod 方法的实例（好比 new Array()） =“object”

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

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

可是，对于undefined和null来讲，这两个的信息存储比较特殊。 null全部机器码均为0，undefined为-2^30整数，因此typeof判断时null均为0，所以被当作对象。 因此通常用typeof判断基本数据类型。 还能够经过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主要做用就是判断一个实例是否属于某种类型

let person = function(){
    
}
let no = new person()
no instanceof person//true
复制代码

原理大概以下

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，告诉咱们左边变量并不是是右边变量的实例。

同时还要了解js的原型继承原理

咱们知道每一个 JavaScript 对象均有一个隐式的 proto 原型属性，而显式的原型属性是 prototype，只有 Object.prototype.proto 属性在未修改的状况下为 null 值。根据图上的原理，咱们来梳理上面提到的几个有趣的 instanceof 使用的例子。

1. Object instanceof Object

由图可知，Object 的 prototype 属性是 Object.prototype, 而因为 Object 自己是一个函数，由 Function 所建立，因此 Object.proto 的值是 Function.prototype，而 Function.prototype 的 proto 属性是 Object.prototype，因此咱们能够判断出，Object instanceof Object 的结果是 true 。用代码简单的表示一下

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

Function instanceof Function 和 Function instanceof Object 的运行过程与 Object instanceof Object 相似，故再也不详说。

2. Foo instanceof Foo

Foo 函数的 prototype 属性是 Foo.prototype，而 Foo 的 proto 属性是 Function.prototype，由图可知，Foo 的原型链上并无 Foo.prototype ，所以 Foo instanceof Foo 也就返回 false 。

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
复制代码

3. 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 
复制代码

4. Foo instanceof Function

leftValue = Foo, rightValue = Function
leftValue = Foo.__proto__ = Function.prototype
rightValue = Function.prototype
// 第一次判断
leftValue === rightValue
// 返回 true 
复制代码

模拟实现instanceof

1. 直接使用instanceof 规则

function instance_of(L, R) {//L 表示左表达式，R 表示右表达式
    var O = R.prototype;
    L = L.__proto__;
    while (true) { 
        if (L === null) 
        return false; 
        if (O === L) // 这里重点：当 O 严格等于 L 时，返回true 
        return true; 
        L = L.__proto__; 
    } 
}
// 开始测试
var a = []
var b = {}

function Foo(){}
var c = new Foo()

function child(){}
function father(){}
child.prototype = new father() 
var d = new child()

console.log(instance_of(a, Array)) // true
console.log(instance_of(b, Object)) // true
console.log(instance_of(b, Array)) // false
console.log(instance_of(a, Object)) // true
console.log(instance_of(c, Foo)) // true
console.log(instance_of(d, child)) // true
console.log(instance_of(d, father)) // true
复制代码

2. 在方法一的基础上使用 constructor (此方法没法用于判断继承)

function instance_of(L, R) {//L 表示左表达式，R 表示右表达式
    var O = R;
    L = L.__proto__;
    while (true) { 
        if (L === null) 
        return false; 
        if (O === L.constructor) // 这里重点：当 O 严格等于 L 时，返回 true 
        return true; 
        L = L.__proto__; 
    } 
}
// 开始测试
var a = []
var b = {}

function Foo(){}
var c = new Foo()

function child(){}
function father(){}
child.prototype = new father() 
var d = new child()

console.log(instance_of(a, Array)) // true
console.log(instance_of(b, Object)) // true
console.log(instance_of(b, Array)) // false
console.log(instance_of(a, Object)) // true
console.log(instance_of(c, Foo)) // true
console.log(instance_of(d, child)) // false 这里就是没法用于判断继承的
console.log(instance_of(d, father)) // true
复制代码