Iwen's blog Iwen's blog
首页
  • 前端文章

    • JavaScript
    • Vue
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • 小程序笔记
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • Linux
  • 学习
  • 面试
  • 心情杂货
  • 友情链接
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
复盘
关于

Iwen

不摸鱼的哥哥
首页
  • 前端文章

    • JavaScript
    • Vue
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • 小程序笔记
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • Linux
  • 学习
  • 面试
  • 心情杂货
  • 友情链接
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
复盘
关于
  • Vue

  • Vue进阶

  • CSS

  • ES6

  • Base

  • Core

  • Array

  • Object

  • String

  • Async

  • Browser

  • Http

  • 性能优化

  • 正则

  • 经典总结

  • 设计模式

  • 数据结构

  • 算法

  • 手写

    • call、apply
    • 实现bind函数
    • instanceOf
      • 定义
      • 实现
    • new 原理及模拟实现
    • 防抖、节流
    • 发布订阅模式
    • 深拷贝
    • Promise A+
    • Promise 进阶
    • Array-prototype-map
    • Array-prototype-filter
    • Array-prototype-reduce
    • 并发请求
    • 继承
    • JSON 字符串
  • TypeScript

  • 复盘
  • 手写
Mr.w
2020-11-29

instanceOf

# instanceOf

# 定义

instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置。 —— MDN

简单理解为:instanceof可以检测一个实例是否属于某种类型。

function Foo(){}
const a = new Foo()

a instanceof Foo       // true
a instanceof Object    // true
1
2
3
4
5

还可以在继承关系中用来判断一个实例是否属于它的父类型。

function Foo(){}
function Child(){}
function Other(){}
Child.prototype = new Foo     // 继承原型

const b = new Child()
b instanceof Foo       // true
b instanceof Child     // true
b instanceof Other     // false
b instanceof Object    // true
1
2
3
4
5
6
7
8
9
10

# 实现

查看对象B的prototype指向的对象是否在对象A的[[prototype]]链上。

如果在,则返回true,如果不在则返回false。不过有一个特殊的情况,当对象B的prototype为null将会报错(类似于空指针异常)。

函数模拟 A instanceof B:

/**
* @param obj{Object} 测试对象
* @param fun{Function} 构造函数
*/
function instanceOf(A, B) {
    let obj = A.__proto__
    let fn = B.prototype
    while (true) {
        if (obj === null) return false
        // 这里重点:当 fn 严格等于 obj 时,则返回 true
        if (fn === obj) return true
        obj = obj.__proto__
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
实现bind函数
new 原理及模拟实现

← 实现bind函数 new 原理及模拟实现→

最近更新
01
flex布局页面自适应滚动条问题
12-28
02
前后端分离开发请求接口跨域如何携带cookie的问题
12-28
03
怎么实现div长宽比固定width-height4比3
12-28
更多文章>
Theme by Vdoing | Copyright © 2017-2022 Iwen | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式