instanceof 是如何工作的
来源:互联网 发布:软件测试和软件开发 编辑:程序博客网 时间:2024/05/20 15:36
知其然
JavaScript 提供 instanceof 关键字判断一个对象所属的构造函数。在 js 高级编程中讲到 instanceof 的作用:
instanceof 操作符,用来测试实例与原型链中出现过的构造函数,只要出现过就会返回 true。
个人对这句话不是很理解,看下面例子:
function Person(){ this.name="tjm";}function Student(){ Person.call(this); this.grade = 1;}Student.prototype = new Person();var stu = new Student();console.log(stu instanceof Student); //trueconsole.log(stu instanceof Person); //true
首先要知道,每个构造函数在没显示指定原型的情况下,会默认分配一个原型对象,该原型对象中包含 constructor 属性指向构造函数,以及 prototype 属性指向 Object 的原型。但通过原型继承,显示指定 Student.prototype = new Person() , 那么构造函数 Student 的原型是 Person 对象,而该原型有一个 prototype 属性指向 Person 构造函数的原型,一个name 等于 tjm 的属性。因此,可以看出,stu 实例的原型链中并没有出现 Student 构造函数,但是stu instanceof Student
依然返回 true,这就让我感到疑惑了。下图展示了 Student 的构造函数的原型链。
知其所以然
发现了不解的地方,一个很好的办法就是通过实践来进行检验,多做几次实验测试,就能够发现规律。看下面这段代码。
function Person(){ //(Object|obj) this.name="tjm";}function Student(){ s1 Person.call(this); this.grade = 1;}Student.prototype = new Person(); // p1var stu = new Student();Student.prototype = new Person(); // p2 console.log(stu instanceof Student); // falseconsole.log(stu instanceof Person); // true
上面代码在 stu 实例化之后,再更改 Student 构造函数的原型实例,虽然原型实例还是一个 Person 对象,但是 stu instanceof Student
却为 false 了。下面通过原型对象来分析 instanceof 来判断的值。stu 在实例化时,内部 【prototype】 属性指向的是当时 Student 构造函数所指向的对象,那么 stu 原型对象是 p1 (Person 对象), 但是在 stu 对象实例化之后,Student 构造函数的原型更改为 p2 , 也是一个 Person 对象。虽然 p1,p2 都是 Person 的对象,但是他们却是不同的,拥有不同的内存地址,使用 == 操作符,结果是 false 。通过对上面代码进行分析,可以得出这样的结果:
obj instanceof Construcotr
—> instanceof 操作符是判断 Constructor 构造函数的原型对象是否存在实例 obj 的原型链中,如果存在,那么返回true,否则返回 false。
根据上面总结再来分析一下代码,stu 实例的原型链中的对象为 p1,p0,Object, 而 Student 的原型对象为 p2 ,因此 stu instanceof Student
当然返回 false。 Student 的原型对象没有在 stu 实例的原型链中。明白了instanceof 操作符真的工作原理,下面我们很容更改 stu 原型链中的对象,使得 stu instancecof Student 返回 true。好在 es5 提供了 __proto__
属性访问实例的原型。
function Person(){ this.name="tjm";}function Student(){ Person.call(this); this.grade = 1;}var p1 = new Person();Student.prototype = p1;var stu = new Student();var p2= new Person();Student.prototype = p2;stu.__proto__ = p2; //通过更改 stu 原型为 p2console.log(stu instanceof Student); // trueconsole.log(stu instanceof Person); // true
通过 stu.__proto__ = p2;
语句,将 stu 的原型更改为与 Student 构造函数一样的原型对象 p2, 这下 stu instanceof Studetn 结果返回 true。
- instanceof 是如何工作的
- instanceof 是如何工作的
- Java instanceof 关键字是如何实现的?
- Java instanceof 关键字是如何实现的?
- Java instanceof 关键字是如何实现的?
- typeof + instanceof+toString+constructor是如何判断javascript数据类型的
- oracle是如何工作的
- Oracle是如何工作的
- Oracle是如何工作的
- Oracle是如何工作的
- Oracle是如何工作的
- SSL是如何工作的?
- 杀毒软件是如何工作的
- SSL是如何工作的?
- Flex是如何工作的
- Oracle是如何工作的
- HttpModule是如何工作的
- SSL是如何工作的
- php 5.3新增的闭包语法介绍function() use() {}
- 我们都说java是面向对象的编程语言,那什么是面向对象呢?什么是类呢?什么是方法呢?
- AM335x U-boot d代码分析过程3
- Java命名规则_Java_OOP(2)
- jsp之Include动态指令和静态指令的区别
- instanceof 是如何工作的
- 自动控制----学习笔记
- Python初学——pickle & set
- 1311:区间质数统计
- hexo d后 ERROR Deployer not found: git
- 用jq设置web端浏览器自适应效果(兼容IE7以上)
- vue.js 设置默认图片
- SVG基本形状及样式设置
- Spring 的表头