美文网首页前端开发那些事儿
模拟实现 instanceof 效果

模拟实现 instanceof 效果

作者: 弱冠而不立 | 来源:发表于2021-03-18 22:42 被阅读0次

instanceof 运算符的定义

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

因为原型链是层层递进的,所以我们可能需要进行迭代地访问实例对象的原型链

具体实现:

/**
 * 模拟实现 instanceof 
 * instanceof: 检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
 * @param {object} obj 实例对象
 * @param {function} cst 构造函数
 */
function foo(obj, cst) {

    // 如果传入的实例不是对象,则直接返回 false
    if(typeof obj !== "object") {
        return false;
    }

    // 获取构造函数上原型
    const cstPrototpe = cst.prototype;
    // __proto__ 已经是不标准的获取对象原型的方法,遵守最新ES的规范还是使用 getPrototypeO
    let objProto = Object.getPrototypeOf(obj);

    while(true) {
        // 死循环的出口
        //因为原型链顶端是 null, 如果到这了还在循环,则证明构造函数的原型并没有出现在实例的原型链上
        if(objProto === null) {
            return false;
        }

        // 如果原型链上存在该构造函数的原型,则返回 true
        if(objProto === cstPrototpe) {
            return true;
        // 否则,进入原型链的下一层
        } else {
            objProto = Object.getPrototypeOf(objProto);
        }
    }
}

// 使用一下
console.log("" instanceof String);
console.log(foo("", String));

console.log({} instanceof Object);
console.log(foo({}, Object));

function Person(name) {
    this.name = name;
}
const p1 = new Person("kiana");
console.log(p1 instanceof Person);
console.log(foo(p1, Person));

console.log({name: "hutao"} instanceof Person);
console.log(foo({name: "hutao"}, Person));

相关文章

  • 模拟实现 instanceof 效果

    instanceof 运算符的定义 instanceof 运算符用于检测构造函数的 prototype 属性是否出...

  • JavaScript中instanceof的模拟实现

    一、前言  instanceof 运算符用来检测 constructor.prototype 是否存在于参数 ob...

  • 模拟水纹波动效果

    功能 模拟水纹波动效果 实现双层水纹一起运动效果 实现增长的效果 展示 效果展示 代码戳这里

  • 2019-05-03

    instanceof的实现 function instanceOf(a,b) { //a是否是b的实例?判断b.p...

  • instanceof 实现

    // 实现一个instanceof/*** 先说一下instenceOf是干什么的* 用法 leftValue i...

  • element表格添加必选值

    公司要求实现这个效果,自己看来很多关于element的资料,发现好像实现不了这样的效果,所以自己模拟实现,ok,话...

  • JS手动实现instanceof

    1.instanceof实现原理 2、解释说明 示例: a instanceof B 检测a的原型链(proto)...

  • iOS 根据音乐来变动闪光灯和闪屏

    前段时间一朋友需要实现该功能,其实实现起来不难,下面是实现效果 提示:模拟器看不到效果,需要真机才能看到效果 de...

  • Android刮刮乐效果-proterDuffXfermode

    Android刮刮乐效果-proterDuffXfermode 先看看实现的效果 这个场景主要是模拟我们有些app...

  • vue学习笔记-模拟数据应用到表格

    目标:实现将模拟的数据显示在表格内准备:模拟数据的.json文件一份具体实现效果: 分析:首先表格由表头和每行的内...

网友评论

    本文标题:模拟实现 instanceof 效果

    本文链接:https://www.haomeiwen.com/subject/tsdycltx.html