原理面试题_面试题 | 手撕instanceof原理

▲ 点击上方蓝字关注我 ▲

文 / 景朝霞

来源公号 / 朝霞的光影笔记

ID / zhaoxiajingjing

目录：0 / 检测数据类型1 / 手写instanceof原理(1)简单实现(2)考虑多一些

0 / 检测数据类型

【链接：JS的检测数据类型】

1、typeof可以检测大部分的数据类型，但是null和对象数据类型值返回的都是"object"

数据值按照二进制存储的：整数1，浮点数010，字符串100，布尔值110，null000000，对象000等等，这样typeof把null判断成了对象

2、Object.prototype.toString 得到的结果"[object 构造函数的信息]"

一般是根据Symbol.toStringTag来得到构造函数的信息，如果没有，则有浏览器自己计算得到

3、obj instanceof Ctor：检测构造函数的prototype原型是否出现在obj实例对象的原型链上

被临时拉来当“壮丁”：原型和原型链都可以手动修改的，而且只要出现就是true，所有的对象都会指向Object的原型

4、constructor 也是临时拉来当“壮丁”的，因为它也是可以被手动修改的

1 / 手写instanceof原理

(1)简单实现

 function instance_of(obj, Ctor){     // CODE } let arr = [{id:'zhaoxiajingjing'}, 100]; console.log(instance_of(arr, Array)); //=> true console.log(instance_of(arr, Object)); //=> true

obj instanceof Ctor 检测构造函数的原型是否出现在实例对象的原型链上

1、 只要出现了，结果就是true

2、所有对象数据类型的原型链都可以通过原型链找到Object.prototype上

3、Object.prototype.__proto__ 的值是null

 /**  * 简单实现instanceof的原理  *  * @param {*} Ctor 构造函数  * @param {*} obj 实例对象  * @returns  */ function instance_of(obj, Ctor) {     var proto = Object.getPrototypeOf(obj);      while (proto) {         if (Ctor.prototype === proto) {             return true;         }         proto = Object.getPrototypeOf(proto);     }      return false; }

△ 简单实现instanceof

(2)考虑多一些

instanceof 检测的原理：

1、构造函数 Symbol.hasInstance 属性方法

2、检测构造函数的prototype原型是否出现在实例的__proto__原型链上

3、不能检测基本数据类型，检测的实例必须都是对象

△ 图1_instanceof检测基本数据类型

 /**  * 实现instanceof的原理  *  * @param {*} Ctor 构造函数  * @param {*} obj 实例对象  * @returns  */ function instance_of(obj, Ctor) {     // 容错     if(typeof Ctor !== "function") throw new TypeError("Uncaught TypeError: Right-hand side of 'instanceof' is not callable");      if(obj == null) return false;      // 支持Symbol并且拥有Symbol.hasInstance的     if(typeof Symbol !== "undefined"){         var hasInstance = Ctor[Symbol.hasInstance];         if(typeof hasInstance === "function"){             return hasInstance.call(Ctor, obj);         }     }      // 不支持Symbol的就继续原型链查找来实现     var prototype = Ctor.prototype,         proto = Object.getPrototypeOf(obj);          // 没有原型的直接返回false就好了，例如箭头函数     if(!prototype) return false;      while(proto){         if(proto === prototype){             return true;         }         proto = Object.getPrototypeOf(proto);     }      return false; }

△ 实现instanceof

instanceof：

1、容错Ctor

2、对于有Symbol.hasInstance进行检测

3、没有的，通过构造函数的原型是否在实例对象的原型链上

① 构造函数的原型没有的，是不能new出来实例的，直接返回false

② while循环来验证构造函数的原型在实例对象的原型链上出现，则返回true，没有则返回false

 class Fn {     static[Symbol.hasInstance]() {         console.log('===Symbol.hasInstance');         return false;     } } let f = new Fn; console.log(f instanceof Fn); console.log(instance_of(f, Fn));

△ Symbol.hasInstance

- end -

从"你"到"更好的你"，有无限可能~