Skip to content

[js] 第76天 说说instanceof和typeof的实现原理并自己模拟实现一个instanceof #528

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第76天 说说instanceof和typeof的实现原理并自己模拟实现一个instanceof

Activity

ghost
xxf1996

xxf1996 commented on Jul 1, 2019

@xxf1996
  • instanceof:利用原型链判断“父级”的原型(prototype)对象是否在“实例”的原型链上;
  • typeof:直接根据变量值得内存标识符进行判断;
yxkhaha

yxkhaha commented on Jul 1, 2019

@yxkhaha
  • typeof 一般用来判断 number、string、boolean、undefined、object、function、symbol这七中类型。
    js 在底层存储变量的时候,会在变量的机器码的低位1-3位存储其类型信息:

  • 000:对象

  • 010:浮点数

  • 100:字符串

  • 110:布尔

  • 1:整数

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

function new_instance_of(leftVaule, rightVaule) { 
    let rightProto = rightVaule.prototype; // 取右表达式的 prototype 值
    leftVaule = leftVaule.__proto__; // 取左表达式的__proto__值
    while (true) {
    	if (leftVaule === null) {
            return false;	
        }
        if (leftVaule === rightProto) {
            return true;	
        } 
        leftVaule = leftVaule.__proto__ 
    }
}
ooo1l

ooo1l commented on Dec 6, 2019

@ooo1l
  else if (typeof cls === 'function') {
      if (isObject(cls.prototype))
        return cls.prototype.isPrototypeOf(obj)
      else return false
    }

@t532 请问能举个命中这个 if 的例子么

ZindexYG

ZindexYG commented on Dec 20, 2019

@ZindexYG

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

function instance_of(left, right) {
  const RP = right.prototype; // 构造函数的原型
  while(true) {
    if (left === null) {
      return false;
    }
    if (left === RP) { // 一定要严格比较
      return true;
    }
    left = left.__proto__; // 沿着原型链重新赋值
  }
}
smile-2008

smile-2008 commented on Jan 26, 2021

@smile-2008
  • typeof 一般用来判断 number、string、boolean、undefined、object、function、symbol这七中类型。
    js 在底层存储变量的时候,会在变量的机器码的低位1-3位存储其类型信息:
  • 000:对象
  • 010:浮点数
  • 100:字符串
  • 110:布尔
  • 1:整数
  • instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置
function new_instance_of(leftVaule, rightVaule) { 
    let rightProto = rightVaule.prototype; // 取右表达式的 prototype 值
    leftVaule = leftVaule.__proto__; // 取左表达式的__proto__值
    while (true) {
    	if (leftVaule === null) {
            return false;	
        }
        if (leftVaule === rightProto) {
            return true;	
        } 
        leftVaule = leftVaule.__proto__ 
    }
}
xiaoqiangz

xiaoqiangz commented on Jun 21, 2022

@xiaoqiangz

typeof: 一般用来判断基本类型数据类型
instanceof: 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上
function new_instanceof(oldP, newP) {
let protype = newP.prototype
let left = oldP.proto
while(left) {
if (left === protype) {
return true
} else {
left = left.proto
}
}
return false
}

mohaixiao

mohaixiao commented on Jun 21, 2022

@mohaixiao

instanceof原理
1.instanceof作用
instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。是就返回true,不是就返回false。
2.实现原理
当使用instanceof时,如果class上有静态方法 Symbol.hasInstance,那就直接调用这个方法,如果没有就使用 obj instanceOf Class 检查 Class.prototype 是否等于 obj 的原型链中的原型之一。
手写instanceof

function instanceOf(object, constructor) {
  let curProto = Object.getPrototypeOf(object);

  // 每一层原型区检查,若相等就直接返回 true,退出
  while(curProto) {
    if(curProto === constructor.prototype) return true; 
    curProto = Object.getPrototypeOf(curProto);
  }

  // 没有退出,坚持到这的就是 false 了
  return false;
}

typeof原理
js 在底层存储变量的时候,会在变量的机器码的低位1-3位存储其类型信息: 对象:000 浮点数:010 字符串:100 布尔:110 ”。typeof直接根据变量值得内存标识符进行判断并返回的是对应字符串形式的值。

ytdxxt10

ytdxxt10 commented on Nov 3, 2022

@ytdxxt10

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

function intanceof(A,B){
     let p = A
     while(p){
          if(p === B.prototype){ 
               return true
          }
          p = p.__proto__
    }
    retrun false 
}

panpanxuebing

panpanxuebing commented on Dec 16, 2024

@panpanxuebing
function myIntanceof (obj, fn) {
  if (obj === null) return false
  let proto = Object.getPrototypeOf(obj)
  if (proto === fn.prototype) {
    return true
  }
  return myIntanceof(proto, fn)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    jsJavaScript

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@ytdxxt10@xiaoqiangz@xxf1996

        Issue actions

          [js] 第76天 说说instanceof和typeof的实现原理并自己模拟实现一个instanceof · Issue #528 · haizlin/fe-interview