前端知识速记--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的情况。

相关推荐
秋天的一阵风5 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-上)
前端·vue.js·面试
秋天的一阵风6 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-下)
前端·vue.js·面试
Doker 多克24 分钟前
Python-Django系列—部件
开发语言·python
海底火旺25 分钟前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺26 分钟前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试
天天扭码27 分钟前
一文吃透 ES6新特性——解构语法
前端·javascript·面试
Kagerou28 分钟前
组件测试
前端
JustHappy30 分钟前
啥是Hooks?为啥要用Hooks?Hooks该怎么用?像是Vue中的什么?React Hooks的使用姿势(上)
前端·vue.js·react.js
江沉晚呤时39 分钟前
深入解析 ASP.NET Core 中的 ResourceFilter
开发语言·c#·.net·lucene
huangyuchi.42 分钟前
【C++11】Lambda表达式
开发语言·c++·笔记·c++11·lambda·lambda表达式·捕捉列表