为什么面试官要我写 instanceof

在前端面试中,instanceof 是一个常见的问题。面试官通常会要求面试者手写 instanceof 的实现,以测试他们对 JavaScript 类型系统和原型链的理解。


类型判断

在 JavaScript 中数据分为基本类型和引用类型。

  • 基本类型
    • Number
    • String
    • Boolean
    • undefined
    • null
    • Symbol
    • BigInt
  • 引用类型
    • Object
    • Array
    • Function
    • Date:日期对象
    • RegExp:正则表达式对象
    • MapSet
    • Promise
    • ...

在实际工作中,我们常常需要判断一个变量的类型。对于基本类型(null 除外) 和 Function 我们可以使用 typeof 进行判断。对于引用类型我们则需要使用 instanceof 进行判断。

js 复制代码
// 基本数据类型
let numberExample = 123;
let stringExample = "hello";
let booleanExample = true;
let nullExample = null;
let undefinedExample = undefined;
let symbolExample = Symbol("example");
let bigIntExample = BigInt(10);

// 引用类型
let objectExample = {};
let arrayExample = [];
let functionExample = function () {};
let dateExample = new Date();
let regExpExample = /abc/;
let mapExample = new Map();
let setExample = new Set();
let promiseExample = new Promise(() => {});

// typeof 适用范围
console.log(typeof numberExample); // number
console.log(typeof stringExample); // string
console.log(typeof booleanExample); // boolean
console.log(typeof undefinedExample); // undefined
console.log(typeof symbolExample); // symbol
console.log(typeof bigIntExample); // bigint
console.log(typeof functionExample); // function

// typeof 对 null 和于其他引用类型无法判断
console.log(typeof nullExample); // object。这是一个历史遗留问题,实际上 null 是基本数据类型
console.log(typeof objectExample); // object
console.log(typeof arrayExample); // object
console.log(typeof dateExample); // object
console.log(typeof regExpExample); // object
console.log(typeof mapExample); // object
console.log(typeof setExample); // object
console.log(typeof promiseExample); // object

// instanceof 判断对象具体是哪种类型的对象
console.log(objectExample instanceof Object); // true
console.log(arrayExample instanceof Array); // true
console.log(functionExample instanceof Function); // true
console.log(dateExample instanceof Date); // true
console.log(regExpExample instanceof RegExp); // true
console.log(mapExample instanceof Map); // true
console.log(setExample instanceof Set); // true
console.log(promiseExample instanceof Promise); // true

instanceof 是什么

MDN 定义: instanceof 是 JavaScript 的一个二元操作符,用于测试构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。换句话说,instanceof 可以用于判断一个对象是否由某个构造函数创建的。

js 复制代码
function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

const auto = new Car("Honda", "Accord", 1998);
console.log(auto instanceof Car); // true

在这个例子中,auto 是 Car 的一个实例,所以 auto instanceof Car 返回 true

注意:左侧可以是任意类型,而右侧必须是一个函数的实例。参数错误时会报错。


instanceof 原理

每个对象都有一个 __proto__ 属性。在对象创建的时候会将 __proto__ 属性指向它的构造函数的 prototype 属性上。并且构造函数的 prototype 属性本身也是一个对象。它也有自己的 __proto__ 属性。通过 __proto__ -> prototype 这样串联形成一个链条,这个链条就是原型链。原型链的终点是 ObjectObject.prototype.__proto__ 的值为 null

每个对象的构造函数都可以在原型链上找到,因此 instanceof 通过原型链可以判断对象是否由某个构造函数创建。


实现一个 instanceof

手写 instanceof

手写 instanceof 的实现可以帮助我们更深入地理解 JavaScript 的原型链。下面是一个简易的 instanceof 实现:

  1. 参数校验
  2. 比较 obj.__proto === constructor.prototype
    1. 找到就立即返回 true
    2. 遍历到原型链终点 constructor.prototype === null 时,返回 false
js 复制代码
function myInstanceof(obj, constructor) {
	const BASIC_TYPE = [
		"[object Undefined]",
		"[object Null]",
		"[object Number]",
		"[object String]",
		"[object Boolean]",
		"[object Symbol]",
		"[object BigInt]",
	];

	const objType = Object.prototype.toString.call(obj);
	const constructorType = Object.prototype.toString.call(constructor);

	if (BASIC_TYPE.includes(constructorType)) {
		throw TypeError("Right-hand side of 'instanceof' is not an object");
	}
	if (typeof constructor !== "function") {
		throw TypeError("Right-hand side of 'instanceof' is not callable");
	}
	if (BASIC_TYPE.includes(objType)) {
		return false;
	}

	let objProto = Reflect.getPrototypeOf(obj);
	while (objProto !== null) {
		if (Object.is(objProto, constructor.prototype)) {
			return true;
		}
		objProto = Reflect.getPrototypeOf(obj);
	}
	return false;
}

当传入的参数是对象时,如果操作成功 Reflect.getPrototypeOf(target) 返回对象的原型,如果操作失败(比如,目标不是对象)则返回 false

测试结果


总结

本文介绍了 JavaScript 类型判断的方法。对 instanceof 的概念、用法和实现进行了说明。

资料

相关推荐
开开心心就好33 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
yanlele9 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
烛阴9 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子10 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead10 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
前端世界11 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
@Dream_Chaser11 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app