【JavaScript】【表达式和运算符】instanceof

前言

在JavaScript中,判断变量的类型,常常使用的是typeof运算符

typeof的痛点

  • 所有的引用类型结果都是 Object
  • 空值null的结果也是Object

为此,引入 instanceof

一、instanceof

1.1 作用

  • 用于判断某个实例是否属于某构造函数
  • 在继承关系中,用来判断一个实例是否属于它的父类型或祖先类型的实例

1.2 使用

  • 语法object instanceof constructor

  • 参数

    • object:某个实例对象
    • constructor:某个构造函数
  • 示例:

js 复制代码
// 类
class Maomi {} // 定义类
let fuLai = new Maomi() // fuLai是Maomi类的实例对象
fuLai instanceof Maomi // true

// 时间
new Date() instanceof Date // true

// 构造函数
function SetMaomi() {}
let fulai = new SetMaomi();
fulai instanceof SetMaomi // true

// 函数
function getMaomi() {}
getMaomi instanceof Function  // true

1.3 涉及的构造函数

  • 基础类型:String、Number、 Boolean、 Undefind、Null、Symbol
  • 引用类型:Object(Array、RegExp、Date、Function...)

1.3 实现原理

instanceof 的内部实现机制是:通过判断对象的原型链上是否能找到对象的 prototype,来确定 instanceof 返回值。

js 复制代码
function instance_of(L, R) {
    var O = R.prototype; 
    L = L.__proto__;
    while (true) {    
        if (L === null)      
             return false;   
        if (O === L) 
             return true;   
        L = L.__proto__;  
    }
}

代码释义

① L表示对象实例,R表示构造函数或者父类型实例

② 取R的显式原型,取L的隐式原型

③ 循环遍历,进行判断②中的两个值是否相等,相等返回true,不相等继续查找L的原型链

instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。

  • 示例:
js 复制代码
function SetMaomi() {}
let fulai = new SetMaomi();
fulai instanceof SetMaomi

观察fulai.__proto__SetMaomi.prototype的结构:

注意点fulai instanceof SetMaomi 返回 true,则并不意味着该表达式会永远返回 trueSetMaomi.prototype 属性的值有可能会改变,改变之后的值很有可能不存在于 fulai 的原型链上,这时原表达式的值就会成为 false

二、instanceof产生继承关系

typescript 复制代码
function Cat(name,age,type){
    this.name = name;
    this.age = age;
    this.type = type;
}
function YingDuan(name,age,type,sex){
    Cat.call(this,name,age,type);  
    this.sex = sex;
}
YingDuan.prototype = new Cat();  // 这里改变了原型指向,实现继承
var yd = new YingDuan("有鱼",2,"金渐层","男"); //创建了英短对象yd
console.log(yd instanceof YingDuan);    // true
console.log(yd instanceof Cat);    // true
console.log(yd instanceof Object);    // true

下面为了直观的观察,我就不采用循环的方式,直接一个一个的打印出来:

  • yd instanceof YingDuan:
  • yd instanceof Cat:
  • yd instanceof Object:

三、注意问题

  1. fulai instanceof SetMaomi 返回 true,则并不意味着该表达式会永远返回 trueSetMaomi.prototype 属性的值有可能会改变,改变之后的值很有可能不存在于 fulai 的原型链上,这时原表达式的值就会成为 false
  2. instanceof 用于判断对象类型,但以下情况的结果都为false,请注意。
js 复制代码
console.log(Number instanceof Number)  // false
console.log(String instanceof String)  // false
console.log(null instanceof Object)   // false,null不具有任何对象的特性,也没有__proto__属性

参考

相关推荐
Lee川6 小时前
面试通关:JWT 认证与双 Token 机制深度解析
后端·面试
kyriewen8 小时前
百度用6%成本碾压硅谷?中国AI把性价比玩明白了
前端·百度·ai编程
kyriewen8 小时前
你还在手动敲命令部署?GitHub Actions 让你 push 即上线,摸鱼时间翻倍
前端·面试·github
怕浪猫8 小时前
荒岛原始无工业、无电力、无设备,从零搭建最基础计算机体系
人工智能·设计模式·面试
Csvn10 小时前
Pinia 状态管理
前端
不减20斤不改头像10 小时前
手机一句话开发贪吃蛇!TRAE SOLO 移动端 AI 编程实测
前端·后端
xuankuxiaoyao10 小时前
Vue.js实践-组件基础下
前端·javascript·vue.js
小白学大数据10 小时前
JS 混淆加密下的 Python 爬虫解决方案
javascript·爬虫·python
一棵白菜11 小时前
Claude Code + Amazon Bedrock 使用指南
前端
大家的林语冰11 小时前
前端周刊:axios 疑遭朝鲜黑客“钓鱼“;CSS 新函数上线;npm 上线深色主题;Oxlint 兼容表;ESLint 支持 Temporal......
前端·javascript·css