JS手写instanceof(内含源码与详解)

前言

本文主要讲解JavaScript如何手写一个简易的instanceof,从而实现数据类型判断的作用.那么好,本文正式开始.

instanceof作用

instanceOf的作用就是用来判断JavaScript中的数据类型是否是开发所输入的那种,
语法格式:obj instanceof objtype
左侧就是要判断的数据,而右侧就是开发输入的它的数据类型,instanceof就是判断它输入的这两个数据类型是否相同.它只能判断复杂类型,因为它是通过对象的原型和右侧的原型是否相等来判断,而基本数据类型没有原型所以只能返回false,它的返回值是true或者false.我们通过一段代码实例来更好的理解instanceOf的作用及其返回值.

let arr=[1,2,3]
let person='123'
console.log(arr instanceof Array);
console.log(person instanceof String);

作用一共就两点:

1. 可以判断该数据是复杂数据类型还是基本数据类型,通过右侧值为Object来进行判断
2. 判断某个复杂数据类型是否是开发所输入的那种对象.

手写思路

1. 创建一个函数
2. 这个函数有两个参数,第一个为想要判断的那个实例,另一个为被判断的对象
3. 因为它对于所有简单数据类型都返回false,但是string/boolean/number都有包装对象类型,可以被认为它们也有原型,但它们本身仍然不被instanceof所认可,那么需要用typeof对左侧实例对象是否为上述三个类型进行判断,如果是,直接返回false
4. 如果不是它们,则创建两个变量,分别用getPrototypeOf来获取它们的原型,因为它们的原型有一个原型链,所以需要用while循环,当不成功且没有追溯到实例的最上层原型时,则继续向上追溯.比如,一个person class中有一个person对象.

全部源码

function Handle(obj, type) {
			// 因为string、number、boolean可以new一个包装对象，作为基本数据类型，它们也有原型链，为了避免这种情况，typeof
			// 检查出是它们，则直接出局，如果不是则需要调用getPrototypeOf方法来进行原型链的获取，判断这个实参是否有原型
			if(typeof(obj)!='string'&&typeof(obj)!='boolean'&&typeof(obj)!='number'&&Object.getPrototypeOf(obj))
			{
				// 如果有则赋值给objLeft
				let objLeft = Object.getPrototypeOf(obj);	
				// 调用type构造函数中的原型赋值给typeRight
				let typeRight=Object.getPrototypeOf(type);
				// 条件循环，当满足下述两个条件之一跳出循环
				// 不满足，则不断调用objLeft上层的原型，直至是null或和类原型一致。因为原型的尽头是null。
				while(true){
				if (objLeft === null) return false;
				if (typeRight === objLeft) return true;
				// 不断向上追溯对象的原型链，直到为null或匹配
					objLeft=Object.getPrototypeOf(objLeft)
				}
			}else{
				return false;
			}
		}