什么?你说你还不懂instanceof?

忘记原文是哪一篇,讲的很不错,有点长,这里大概提取改动了一些,适合学习复习看看。

instanceof 的由来

在 JavaScript 中,判断一个变量的类型常常会用 typeof 运算符,但是在使用 typeof 运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它都返回 “object”。因此引入了instanceof,它也用来识别对象的类型,但是与 typeof 方法不同的是,instanceof 方法要求开发者明确地确认对象为某特定类型

instanceof的使用场景

  1. 判断基本类型:
var str = new String("hello world");
 console.log(str instanceof String);      
// "true"
  1. 判断 foo 是否是 Foo 类的实例
 // 判断 foo 是否是 Foo 类的实例
 function Foo(){}
 var foo = new Foo();
 console.log(foo instanceof Foo)//true
  1. 判断继承
// 判断 foo 是否是 Foo 类的实例 , 并且是否是其父类型的实例
 function Aoo(){}
 function Foo(){}
 Foo.prototype = new Aoo();//JavaScript 原型继承

 var foo = new Foo();
 console.log(foo instanceof Foo)//true
 console.log(foo instanceof Aoo)//true

复杂用法

到这里或许看起来很简单,答案几乎脱口而出了吧,来看一些复杂的:

// 复杂用法
 console.log(Object instanceof Object);//true
 console.log(Function instanceof Function);//true
 console.log(Number instanceof Number);//false
 console.log(String instanceof String);//false

 console.log(Function instanceof Object);//true

 console.log(Foo instanceof Function);//true
 console.log(Foo instanceof Foo);//false

看了上面的代码是不是又晕头转向了?为什么 Object 和 Function instanceof 自己等于 true,而其他类 instanceof 自己却又不等于 true 呢?
要想从根本上了解 instanceof 的奥秘,需要从两个方面着手:

  1. 语言规范中是如何定义这个运算符的
  2. JavaScript 原型继承机制。
instanceof运算符是如何实现的

下面是将规范中 instanceof 运算符定义用js“翻译”过来,非常简单,一看就懂:

// foo instanceof Foo ===>  instance_of(foo, Foo)
function instance_of(L, R) {//L 表示左表达式,R 表示右表达式
  var O = R.prototype;// 取 R 的显示原型
  L = L.__proto__;// 取 L 的隐式原型
  // 循环取L的__proto__和O做严格相等
  // 直到相等 或者 L的__proto__取为null(到终点后结束)
  while (true) {
    if (L === null)
      return false;
    if (O === L)// 这里重点:当 O 严格等于 L 时,返回 true
      return true;
    L = L.__proto__;
  }
 }
JavaScript 原型继承机制

下图详细描述了 JavaScript 各种对象的显示和隐式原型链结构。圈起来的部分要认真看下:
在这里插入图片描述

有了上面 instanceof 运算符的 JavaScript 代码和原型继承图,再来理解下 Object instanceof Object,Function instanceof Function 和 Foo instanceof Foo 三个示例,其它均可类推。

Object instanceof Object

// 为了方便表述,首先区分左侧表达式和右侧表达式
 ObjectL = Object, ObjectR = Object;
 // 下面根据规范逐步推演
 O = ObjectR.prototype = Object.prototype
 L = ObjectL.__proto__ = Function.prototype
 // 第一次判断
 O != L
 // 循环查找 L 是否还有 __proto__
 L = Function.prototype.__proto__ = Object.prototype
 // 第二次判断
 O == L
 // 返回 true

Function instanceof Function

// 为了方便表述,首先区分左侧表达式和右侧表达式
 FunctionL = Function, FunctionR = Function;
 // 下面根据规范逐步推演
 O = FunctionR.prototype = Function.prototype
 L = FunctionL.__proto__ = Function.prototype
 // 第一次判断
 O == L
 // 返回 true

Foo instanceof Foo

// 为了方便表述,首先区分左侧表达式和右侧表达式
 FooL = Foo, FooR = Foo;
 // 下面根据规范逐步推演
 O = FooR.prototype = Foo.prototype
 L = FooL.__proto__ = Function.prototype
 // 第一次判断
 O != L
 // 循环再次查找 L 是否还有 __proto__
 L = Function.prototype.__proto__ = Object.prototype
 // 第二次判断
 O != L
 // 再次循环查找 L 是否还有 __proto__
 L = Object.prototype.__proto__ = null
 // 第三次判断
 L == null
 // 返回 false
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值