一张图撸明白prototype原型链

先撸下类型判断运算符instanceof:

instanceof 运算符与 typeof 运算符相似,用于识别正在处理的对象的类型。与 typeof 方法不同的是,instanceof 方法要求开发者明确地确认对象为某特定类型。尽管它的用法不如typeof灵活,但是当typeof返回值是Object时,instanceof还是挺有用的,常用来判断继承关系。

说明

是一个二元运算符,返回的是一个Boolean值,指出对象是否是特定类的一个实例。

expression instanceof class expression和class都是必选项。

注意

关于function的arguments,一开始以为它是一个数组,因为它可以通过索引arguments[i],来访问参数列表,后来在使用push等方法时发现报错,

VM1621:3 Uncaught TypeError: arguments.push is not a function

arguments instanceof Array,返回值是false 这时得知arguments是一个Array-like对象,并不是真的数组。

另外

class应该是js语法层面的bject,不应该是Dom对象,然而亲自尝试得

console.log(typeof window); //Objectconsole.log(window instanceof Object); //true

网上很多文章都说window instanceof Object返回是false,不知为啥。

常规用法

通常用来判断一个实例是否属于某种类型。

function Foo(){}var foo = new Foo(); console.log(foo instanceof Foo) //true

更重要的是用来判断继承关系。

function A() {}function B() {}B.prototype = new A(); //原型继承var b = new B();console.log(b instanceof B); //trueconsole.log(b instanceof A); //true

多层继承关系依然适用。

复杂用法

console.log(Object instanceof Object); //trueconsole.log(Function instanceof Function); //trueconsole.log(Number instanceof Number); //falseconsole.log(String instanceof String); //falseconsole.log(Function instanceof Object); //trueconsole.log(Foo instanceof Function); //trueconsole.log(Foo instanceof Foo); //false

参考网上的文章,就是这一篇,得知要从两个方面着手:

---- 选择性屏蔽线 ----

  • 语言规范是怎么定义instanceof的。
  • Javascript原型继承机制。 ECMAScript-262 edition 3 中 instanceof 运算符的定义 定义如下: The instanceof operator The production RelationalExpression: RelationalExpression instanceof ShiftExpression is evaluated as follows: 1. Evaluate RelationalExpression. 2. Call GetValue(Result(1)).// 调用 GetValue 方法得到 Result(1) 的值,设为 Result(2) 3. Evaluate ShiftExpression. 4. Call GetValue(Result(3)).// 同理,这里设为 Result(4) 5. If Result(4) is not an object, throw a TypeError exception.// 如果 Result(4) 不是 object, //抛出异常 /* 如果 Result(4) 没有 [[HasInstance]] 方法,抛出异常。规范中的所有 [[...]] 方法或者属性都是内部的, 在 JavaScript 中不能直接使用。并且规范中说明,只有 Function 对象实现了 [[HasInstance]] 方法。 所以这里可以简单的理解为:如果 Result(4) 不是 Function 对象,抛出异常 */ 6. If Result(4) does not have a [[HasInstance]] method, throw a TypeError exception. // 相当于这样调用:Result(4).[[HasInstance]](Result(2)) 7. Call the [[HasInstance]] method of Result(4) with parameter Result(2). 8. Return Result(7). // 相关的 HasInstance 方法定义 15.3.5.3 [[HasInstance]] (V) Assume F is a Function object.// 这里 F 就是上面的 Result(4),V 是 Result(2) 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.// 如果 V 不是 object,直接返回 false 2. Call the [[Get]] method of F with property name "prototype".// 用 [[Get]] 方法取 // F 的 prototype 属性 3. Let O be Result(2).//O = F.[[Get]]("prototype") 4. If O is not an object, throw a TypeError exception. 5. Let V be the value of the [[Prototype]] property of V.//V = V.[[Prototype]] 6. If V is null, return false. // 这里是关键,如果 O 和 V 引用的是同一个对象,则返回 true;否则,到 Step 8 返回 Step 5 继续循环 7. If O and V refer to the same object or if they refer to objects joined to each other (section 13.1.2), return true. 8. Go to step 5.

---- 选择性屏蔽线 ----

上面的规范定义很晦涩,而且看起来比较复杂,涉及到很多概念,但把这段规范翻译成 JavaScript 代码却很简单,如下:

function instance_of(L, R) {//L 表示左表达式,R 表示右表达式 var O = R.prototype;// 取 R 的显示原型 L = L.__proto__;// 取 L 的隐式原型 while (true) { if (L === null) return false; if (O === L)// 这里重点:当 O 严格等于 L 时,返回 true return true; L = L.__proto__; }}

当当当当,BB一大片,这才是精华。其实判断继承关系,搞懂下面这张图就ok。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java帮帮-微信公众号-技术文章全总结

JAVA面试题解惑——final、finally和finalize的区别

final、finally和finalize的区别是什么? 这是一道再经典不过的面试题了,我们在各个公司的面试题中几乎都能看到它的身影。final、final...

3556
来自专栏java工会

Java基础第一阶段知识点,招实习的面试官都在问这些

2199
来自专栏Java 源码分析

Java面向对象基础

     面向对象一直是一种很流行的思想,他的精髓也就在于他的三大特性:封装,继承和多态。本文就在这三个方面简单的谈一谈Java的面向对象基础。 1.封装:  ...

3425
来自专栏C/C++基础

如何禁止函数的传值调用

按照参数形式的不同,C++应该有三种函数调用方式:传值调用、引用调用和指针调用。对于基本数据类型的变量作为实参进行参数传递时,采用传值调用与引用调用和指针调用的...

701
来自专栏从流域到海域

Python函数参数总结(位置参数、默认参数、可变参数、关键字参数和命名关键字参数)

Python函数的参数多达5种,不像Java那样参数只有一种,而是像C++那样提供默认参数,除此之外,还提供可变参数、关键字参数、命名关键字参数,这样就使...

35310
来自专栏源哥的专栏

BASE64编码

附录:BASE64编码的原理(节选自http://www.vbzx.net/ArticleView/vbzx_Article_View_1199.asp)

964
来自专栏塔奇克马敲代码

第 12 章 动态内存

1704
来自专栏代码世界

Python之匿名函数

匿名函数 匿名函数:为了解决那些功能很简单的需求而设计的一句话函数。 #这段代码 def calc(n): return n**n print(calc...

3469
来自专栏java工会

Java基础第一阶段知识点,招实习的面试官都在问这些

a) 答:Java源文件被编译成字节码的形式,无论在什么系统环境下,只要有java虚

1331
来自专栏程序员互动联盟

【编程基础】如何赢得C++面试

1.new、delete、malloc、free关系 delete会调用对象的析构函数,和new对应的是free,free只会释放内存,new调用构造函数。m...

3907

扫码关注云+社区

领取腾讯云代金券