一、Breif                               

大家都知道instanceof一般就是用来检查A对象是否为B类或子类的实例。那问题是JS中没有类的概念更没有类继承的概念(虽然有构造函数),那么instanceof到底是怎样判断A对象是B构造函数的实例呢?本文将对此作分析记录,以便日后查阅。

二、Reference 2 ECMA-262-3 Spec                

http://bclary.com/2004/11/07/#a-11.8.6

The production RelationalExpression: RelationalExpression instanceof ShiftExpression is evaluated as follows:

1. Evaluate RelationalExpression.

2.Call GetValue(Result(1)).

3.Evaluate ShiftExpression.

4.Call GetValue(Result(3)).

5.If Result(4) is not an object, throw a TypeError exception.

6.If Result(4) does not have a [[HasInstance]] method, throw a TypeError exception.

7.Call the [[HasInstance]] method of Result(4) with parameter Result(2).

8.Return Result(7).

从上述的定义我们可以得出以下内容:

1. ShiftExpression的实际值(GetValue(Evaluate(ShiftExpression)))必须为[object Function],否则就抛TypeError异常;

2. instanceof的实际判断则是调用RelationalExpression的Internal Method [[HasInstance]]来处理。

下面我们深入一下[[HasInstance]]的定义

http://bclary.com/2004/11/07/#a-15.3.5.3

Assume F is a Function object.

When the [[HasInstance]] method of F is called with value V, the following steps are taken:

1. If V is not an object, return false.

2. Call the [[Get]] method of F with property name "prototype".

3. Let O be Result(2).

4. If O is not an object, throw a TypeError exception.

5. Let V be the value of the [[Prototype]] property of V.

6. If V is null, return false.

7. If O and V refer to the same object or if they refer to objects joined to each other (13.1.2), return true.

8. Go to step 5.

上面的定义看得不太明白,我们把它翻译成JS的实现吧

// IE5.5~9下,由于无法通过__proto__访问对象的Internal Property [[Prototype]],因此该方法无效
;(function(rNotObj){
Function.prototype['[[HasInstance]]'] = function(value){
// 1. If V is not an object, return false
if (rNotObj.test(typeof value)) return false
// 2. Call the [[Get]] method of F with property name "prototype"
// 4. If O is not an object, throw a TypeError exception
var O = this.prototype
if (rNotObj.test(typeof O)) throw TypeError() // 5. Let V be the value of the [[Prototype]] prototype of V
// 6. If V is null, return false
if (null === (value = value.__proto__)) return false // 7. If O and V refer to the same object
// 8. Go to step 5
return O === value || this['[[HasInstance]]'](value)
}
}(/$[^of]/ /*not begin with o(bject) neither f(unction)*/))

现在稍微总结一下,a instanceof b底层的运算机制关键点如下:

1. b的数据类型必须为[object Function],否则就抛TypeError;

2. 若a为Primitive Value则直接返回false, 若a的数据类型为Object则执行后续运算;

3. 当且仅当b.prototype位于a的prototype chain中时,才返回true(由于Object.prototype.__proto__为null,因此prototype chain是有限链表);

也许大家会对 Function.prototype['[[HasInstance]]'] 的实现为什么能成功感到疑问,我们先看看以下图片

可以知道所有函数的 __proto__ 默认情况下均指向 Function.prototype ,而 Function.__proto__ 则与 Function.prototype 指向同一个对象。

Chrome中两者均指向 function Empty(){} ,因此添加到Function.protoype的属性,也会出现在Function的prototype chain中。

四、About if they refer to objects joined to each other 

Objects Joined其实是Spec建议实现者(如V8、SpiderMonkey)采用的底层优化手段。

function a(){
function b(){}
return b
}
var c = a()
var d = a()
// 假如JavaScript Engine实现了Objects Joined,那么
c === d 返回值为true。因为a中定义b函数啥都一样,所以底层实现可以不再生成一个新的Function object,从而从空间和时间上降低消耗。

五 、Conclusion                        

之前看了很多讲述instanceof的文章但始终对它理解得不透彻,看来还是看Spec比较实在。

尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/4231454.html 肥仔John^_^

六、Thanks                          

http://www.w3cfuns.com/article-5597466-1-1.html

http://dmitrysoshnikov.com/ecmascript/chapter-5-functions/

JS魔法堂:再识instanceof的更多相关文章

  1. JS魔法堂:jsDeferred源码剖析

    一.前言 最近在研究Promises/A+规范及实现,而Promise/A+规范的制定则很大程度地参考了由日本geek cho45发起的jsDeferred项目(<JavaScript框架设计& ...

  2. JS魔法堂:那些困扰你的DOM集合类型

    一.前言 大家先看看下面的js,猜猜结果会怎样吧! 可选答案: ①. 获取id属性值为id的节点元素 ②. 抛namedItem is undefined的异常 var nodes = documen ...

  3. JS魔法堂:追忆那些原始的选择器

    一.前言                                                                                                 ...

  4. JS魔法堂:不完全国际化&本地化手册 之 实战篇

    前言  最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...

  5. JS魔法堂:属性、特性,傻傻分不清楚

    一.前言 或许你和我一样都曾经被下面的代码所困扰 var el = document.getElementById('dummy'); el.hello = "test"; con ...

  6. JS魔法堂:doctype我们应该了解的基础知识

    一.前言 什么是doctype?其实我们一直使用,却很少停下来看清楚它到底是什么,对网页有什么作用.本篇将和大家一起探讨那个默默无闻的doctype吧! 二.什么是doctype doctype或DT ...

  7. JS魔法堂:精确判断IE的文档模式by特征嗅探

    一.前言 苦逼的前端攻城狮都深受浏览器兼容之苦,再完成每一项功能前都要左顾右盼,生怕浏览器不支持某个API,生怕原生API内含臭虫因此判断浏览器类型和版本号成了不可绕过的一道关卡,而特征嗅探是继浏览器 ...

  8. JS魔法堂:不完全国际化&本地化手册 之 理論篇

    前言  最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...

  9. JS魔法堂:判断节点位置关系

    一.前言 在polyfill querySelectorAll 和写弹出窗时都需要判断两个节点间的位置关系,通过jQuery我们可以轻松搞定,但原生JS呢?下面我将整理各种判断方法,以供日后查阅. 二 ...

  10. JS魔法堂:LINK元素深入详解

    一.前言 我们一般使用方式为 <link type="text/css" rel="stylesheet" href="text.css&quo ...

随机推荐

  1. [转]C#调用FFMPEG,并异步读取输出信息的代码

    http://www.cnblogs.com/Leo_wl/archive/2011/12/31/2308841.html

  2. 你眼中的async/await是什么样的?

    又到了周末的code review环节,这次code review发现了一个对async/await的理解问题.让我们直奔主题: var foodsSearch = new FoodSearchSer ...

  3. UWP应用开发系列视频教程简介 - Built for Windows 10

    万分感谢Fdyo同学给我们带来的有中文字幕的系列教程! http://zhuanlan.zhihu.com/MSFaith/20364660 下面是这系列video教程中的一个截图作为示例,有代码,有 ...

  4. 《C#图解教程》读书笔记之二:存储、类型和变量

    本篇已收录至<C#图解教程>读书笔记目录贴,点击访问该目录可获取更多内容. 一.类型初窥:掀起你的盖头来 (1)C程序是一组函数和数据类型,C++程序是一组函数和类,而C#程序是一组类型声 ...

  5. 在GitHub注册账户的过程

    (1)第一步:首先起一个属于自己用户的名字(username),用户名字只能包含字母数字的字符或者单个连字符,不能只用单个连字符开始或者结束(only contain alphanumeric cha ...

  6. 基础调试命令 - wt (watch and trace)

    本文介绍windbg动态调试过程中一个非常有用的命令,wt的用法. wt命令 wt命令之所以称为wt是因为它是watch and trace的简称,即用来观察和跟踪的命令.这个命令一般用在动态调试而不 ...

  7. js模版引擎handlebars.js实用教程——with-终极this应用

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  8. 两个Fragment之间如何传递数据

    FragmentA启动FragmentB,做一些选择操作后,返回FragmentA,需要把FragmentB里面选择的数据传回来.有什么办法? Fragment之间不能直接通信,必须通过Activit ...

  9. 使用IPostBackEventHandler让JavaScript“调用”回传事件

    在由ASP.NET所谓前台调用后台.后台调用前台想到HTTP——实践篇(二)通过自己模拟HTML标签事件与服务器交互,讲了ASP.NET的服务器控件是怎么render成HTML后市怎么“调用”后台方法 ...

  10. XMPie部署与创建过程 - 快速指南

    XMPie部署与创建过程 1PhotoShop.Indesign.VS2013关系.作用.使用 .1.1目的与过程 1. Photoshop负责导出cpkg文件. 1.1 动态性 如果你想要生成动态的 ...