前端知识速记--JS篇:instanceof

前端知识速记--JS篇:instanceof

在JavaScript中,instanceof运算符用于检测一个对象是否是另一个对象的实例。它的基本语法为:obj instanceof Constructor。如果objConstructor的实例,它将返回true,否则返回false。这是一个判断对象的原型链上是否存在构造函数的prototype属性的简单方法。

1. instanceof的基本用法

示例

javascript 复制代码
function Animal() {}
function Dog() {}

Dog.prototype = Object.create(Animal.prototype);

const dog = new Dog();

console.log(dog instanceof Dog);       // true
console.log(dog instanceof Animal);    // true
console.log(dog instanceof Object);     // true
console.log(dog instanceof Array);      // false

在上述代码中:

  • dog instanceof Dog 返回true,因为dogDog的实例。
  • dog instanceof Animal 也返回true,因为Dog继承自Animaldog通过原型链链接到Animal
  • dog instanceof Object 返回true,因为所有对象都是Object的实例。
  • dog instanceof Array 返回false,因为dog并非Array的实例。

2. instanceoftypeof的比较

typeof的特点

typeof运算符用于获取变量的数据类型,它的语法为:typeof variable。返回的结果是一个字符串,表示变量的数据类型。它有局限性,尤其在判断null时:

javascript 复制代码
console.log(typeof null);  // "object"

为什么typeof null返回"object"

这是JavaScript语言设计中的一个历史遗留问题。在最初的JavaScript版本中,所有对象的类型都被定义为对象,并且在内存中null的表示方式也是以对象的形式。因此,当typeof检查到null时,它看到了对象的表示,返回了"object"。这个行为虽然被广泛认为是一个 bug,但在后续版本中为了兼容性并未被更改。

instanceof对比

  • instanceof专注于对象的类型(即原型链),能够准确判断对象是否为某个构造函数的实例。
  • typeof适用于 primitive value 和一些非对象类型,但因为历史原因对null处理不当,使其在类型判断上显得薄弱。
javascript 复制代码
const value = null;
console.log(typeof value);               // "object"
console.log(value instanceof Object);     // false

在这个例子中,虽然typeof null返回object,但是instanceof运算符却正确地反映出null并不是一个对象实例,因为它没有原型链。

3. 经典问题

经典问题:如何判断一个变量既不是null也不是数组?

使用instanceoftypeof结合的方式,可以有效判断:

javascript 复制代码
function isObject(value) {
    return value !== null && typeof value === 'object';
}

console.log(isObject([]));       // true
console.log(isObject({}));       // true
console.log(isObject(null));     // false
console.log(isObject(42));       // false

该函数定义了在判断对象之前,先排除了null的情况。

相关推荐
励志要当大牛的小白菜33 分钟前
ART配对软件使用
开发语言·c++·qt·算法
灵感__idea2 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴3 小时前
Mix
前端·webgl
爱装代码的小瓶子3 小时前
数据结构之队列(C语言)
c语言·开发语言·数据结构
代码续发3 小时前
前端组件梳理
前端
试图让你心动4 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码4 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记4 小时前
sass中@mixin与 @include
前端·sass
Maybe_ch4 小时前
.NET-键控服务依赖注入
开发语言·c#·.net
陈琦鹏4 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket