Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
haizhilin2013 opened this issue Jun 30, 2019 · 10 comments
Labels
js JavaScript

Comments

@haizhilin2013
Copy link
Collaborator

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

@haizhilin2013 haizhilin2013 added the js JavaScript label Jun 30, 2019
@ghost
Copy link

ghost commented Jul 1, 2019

  • instanceof
    • 返回 boolean
    • 通过调用 class 的 [Symbol.hasInstance] static method 来判断一个 object 是否是一个 class 的 instance
    • 缺省行为:判断 object 的 prototype chain 中是否有任意一个 prototype 与 class 的 prototype 相等
    • polyfill:
      interface IConstructor<T> {
        new(...args: any[]): T
      }
      
      function isObject(o: any) {
        return (typeof o === 'object' || typeof o === 'function') && o !== null
      }
      
      function instanceOf<T>(obj: any, cls: IConstructor<T>): obj is T {
        if (isObject(cls)) {
          if (typeof cls[Symbol.hasInstance] === 'function')
            return cls[Symbol.hasInstance](obj)
          else if (typeof cls === 'function') {
            if (isObject(cls.prototype))
              return cls.prototype.isPrototypeOf(obj)
            else return false
          } else throw new TypeError('cls is not callable')
        } else throw new TypeError('cls is not an object')
      }
  • typeof
    • 返回 'string', 'number', 'undefined', 'boolean', 'object', 'function', 'symbol'
    • 获取数据底层的类型标签。

@xxf1996
Copy link

xxf1996 commented Jul 1, 2019

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

@yxkhaha
Copy link

yxkhaha commented Jul 1, 2019

  • 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
Copy link

ooo1l commented Dec 6, 2019

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

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

@ZindexYG
Copy link

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
Copy link

  • 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
Copy link

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
Copy link

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
Copy link

ytdxxt10 commented Nov 3, 2022

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

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

@panpanxuebing
Copy link

panpanxuebing commented Dec 16, 2024

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
Labels
js JavaScript
Projects
None yet
Development

No branches or pull requests

10 participants