前端面试系列-typeof 和instanceof 的实现原理(手写代码)

引自：https://blog.csdn.net/qq_39903567/article/details/115048977

文章目录
一、typeof
二.instanceof 操作符
instanceof 操作符实现原理
原型链相关知识
一、typeof
typeof 操作符的唯一目的就是检查数据类型，我们可以利用 typeof 来判断number, string, boolean, function, undefined, symbol

var str="string";
console.log(typeof str); //string
var num=1;
console.log(typeof num); //number
var bn=false;
console.log(typeof bn); //boolean
var a;
console.log(typeof a); //undfined
var bigint = BigInt("9007199254740995");
console.log(typeof bigint); //bigint
var syboml = Symbol("syboml");
console.log(typeof syboml); //syboml  
 var fn = function(){};
 console.log(typeof fn); //function  

如果我们希望检查任何从 Object 派生出来的结构类型，使用 typeof 是不起作用的，都会是"object"。检查 Object 种类的合适方式是使用 instanceof 关键字。但即使这样也存在误差。后面instanceof部分进行叙述。

var obj = null;
console.log(typeof obj); //object
var doc = document;
console.log(typeof doc);//object
var arr = [];
console.log(typeof arr); //object
var map = new Map();
console.log(typeof map); //object
var set = new Set();
console.log(typeof set); //object
var weakmap = new WeakMap();
console.log(typeof weakmap); //object
var weakset = new WeakSet();
console.log(typeof weakset); //object
var date = new Date();
console.log(typeof date); //object

二.instanceof 操作符

前面提到了 instanceof 来判断对象的具体类型，其实 instanceof 主要的作用就是判断一个实例是否属于某种类型

var date = new Date();
console.log(date instanceof Date)//true
console.log(date instanceof Set)//false

但是

 console.log(date instanceof Object)//true

为什么会出现这种情况呢，接下来我们看看instanceof 操作符的实现原理，就可以从中找到答案。

instanceof 操作符实现原理

function my_instanceof(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，告诉我们左边变量并非是右边变量的实例。

来看例子：

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

原型链相关知识
原型链相关文章:https://blog.csdn.net/qq_39903567/article/details/115049474

每个 JavaScript 对象均有一个隐式的 proto 原型属性，而显式的原型属性是 prototype，只有 Object.prototype.proto 属性在未修改的情况下为 null 值。

假如我们从一个对象中去找一个属性name，如果在当前对象中没有找到，那么会通过__proto__属性一直往上找，直到找到Object对象还没有找到name属性，才证明这个属性name是不存在，否则只要找到了，那么这个属性就是存在的，从这里可以看出JS对象和上级的关系就像一条链条一样，这个称之为原型链；

如图：

所以这根由__proto__连接起来的原型链，都会指向Object，再往上就是null了。
所以就会出现以下情况

function Foo() {
}
Object instanceof Object // true
Function instanceof Object // true
Foo instanceof Object // true

原型链相关文章:https://blog.csdn.net/qq_39903567/article/details/115049474