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

比眉伴天荒 2022-11-11 14:59 239阅读 0赞

### 文章目录 ###

*  一、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 操作符实现原理 ##

其实 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][https_blog.csdn.net_qq_39903567_article_details_115049474]

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

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

如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70]

所以这根由\_\_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][https_blog.csdn.net_qq_39903567_article_details_115049474]

[本文链接:https://blog.csdn.net/qq\_39903567/article/details/115048977][https_blog.csdn.net_qq_39903567_article_details_115048977]

[https_blog.csdn.net_qq_39903567_article_details_115049474]: https://blog.csdn.net/qq_39903567/article/details/115049474
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70]: /images/20221022/09351b8407ba44219f2b9a3914625435.png
[https_blog.csdn.net_qq_39903567_article_details_115048977]: https://blog.csdn.net/qq_39903567/article/details/115048977