理解js中instanceof运算操作符

　

instance

什么是instanceof

在js代码中，我们经常使用 instanceof 就是判断一个实例是否属于某种类型，instanceof 可以在继承关系中用来判断一个实例是否属于它的父类型

简单实例：

function Foo(){}
function Bar(){}
Bar.prototype = new Foo()
let obj = new Bar()
obj instanceof Bar //true
obj instanceof Foo //true

复杂实例：

Number instanceof Number //false
String instanceof String //false
Object instanceof Object //true
Function instanceof Function //true
Function instanceof Object //true

function Foo(){};
Foo instanceof Function //true
Foo instanceof Foo //false

怎么实现instanceof

function _instanceof(L, R) { //L为instanceof左表达式，R为右表达式
  let Ro = R.prototype //原型
  L = L.__proto__ //隐式原型
  while (true) {
    if (L === null) { //当到达L原型链顶端还未匹配，返回false
      return false
    }
    if (L === Ro) { //全等时，返回true
      return true
    }
    L = L.__proto__
  }
}

详细地可以去看ECMAScript中instanceof运算符的定义

原型链

在理解instanceof之前，必须熟悉理解原型链中的prototype与__proto__

每个函数都有 prototype 属性，除了 Function.prototype.bind()，该属性指向原型。

每个对象都有 __proto__ 属性，指向了创建该对象的构造函数的原型。其实这个属性指向了 [[prototype]]，但是 [[prototype]] 是内部属性，我们并不能访问到，所以使用 _proto_ 来访问。

对象可以通过 __proto__ 来寻找不属于该对象的属性，__proto__ 将对象连接起来组成了原型链。

分析

1.    Object instanceof Object

Object instanceof Object //true

Ro = Object.prototype
L = Object.__proto__ = Function.prototype

//第一次比较 
L !== Ro
L = L.__proto__ = Function.prototype.__proto__ = Object.prototype

//第二次比较
L === Ro
true

2.    Function instanceof Function

Function instanceof Function //true

Ro = Function.prototype
L = Function.__proto__ = Function.prototype

//第一次比较 
L === Ro
true

3.    Function instanceof Object

Function instanceof Object //true

Ro = Object.prototype
L = Function.__proto__ = Function.prototype

//第一次比较 
L !== Ro
L = L.__proto__ = Function.prototype.__proto__ = Object.prototype

//第二次比较
L === Ro
true

ES6 ---- [symbol.hasInstance]

在ES6的Symbol类型中，存在一个修改instanceof返回值的API ---- Symbol.hasInstance

简单实例：

class MyClass { 
    static [Symbol.hasInstance](L) { 
        return L % 2 === 0; 
    }
}
console.log( 4 instanceof MyClass );  // true

详情可以点击上面链接，这里就不多说了

相关阅读

js 获取中文的拼音

传送门：https://my.oschina.net/tommyfok/blog/202412 代码：/* --- description: Pinyin, to get chinese pinyin from chinese. l

js 实现html网页简繁体切换

荆轲刺秦王 我们在做网站的时候，有时候会遇到 简繁体切换 或者 中英文切换（英文我还遇到 qaq 吼吼吼）（等我遇到了再更吧。。。） 废话不

json_decode

$json = "{\"errorno\":0,\"errormsg\":\"可以\",\"data\":{\"guid\":\"5762340\",\"username\":\"wiu370468\"}

js上传视频方法及监控进度

之前写过一篇关于图片上传的方法，不过那都是基于上传到本地服务器上的。跟视频有所不同，因为图片比较小并不考虑到并发量，所以性能这

如何在jsp中添加注释?jsp注释的快捷键是什么?

1 如何添加注释?单行注释: //...注释内容....多行注释:/*注释内容*/这种注释在客户端是会显示的(被称为显式注释)这种注释基本不