`
yxc_gdut
  • 浏览: 95965 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

instanceof 和 prototype 关系

阅读更多

    一直想知道js的 instanceof 是根据什么来判断两个对象的继承关系? 会不会跟prototype有关,然后就试试了

    如果觉得下面的代码比较长,请先看注释

 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>intanceof.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <script type="text/javascript">
    	/*
    		A instanceof B 
    		如果A.__proto__ === B.prototype 则返回true
    	*/
    	var proto = {
    		say:function(){
    			alert("my name is "+this.name);
    		}
    	}
    	var Parent = function(name){
    		this.name = name||"yan";
    	}
    	Parent.prototype = proto;
    	
    	var Child = function(age){
    		this.age = age;
    	}
    	Child.prototype = proto;
    	var child = new Child(11);
	var parent = new Parent();
    	//测试    	
    	console.group("instanceof是根据prototype来判断两个对象的继承关系");
    	console.log("parent instanceof Parent :"+(parent instanceof Parent));//true;
    	console.log("child instanceof Parent :"+(child instanceof Parent));//true;
    	console.log("parent instanceof Child :"+(parent instanceof Child));//true;
    	console.log("Child instanceof Parent :"+(Child instanceof Parent));//false;
    	console.groupEnd();
	/*
    		A instanceof B 
    		沿着A的原型链查找 如果有一个原型和B.prototype相等 则返回true 
    			如:A.__proto__.__proto__ === B.prototype 则返回true
    	*/
    	var Fn = function(){}
    	Fn.prototype = new Parent("a");
    	Child.prototype = new Fn();
    	var fn = new Fn();
    	child = new Child();
	console.group("沿着原型链查找 如A instanceof B ,沿着A原型链查找直到找到跟B.prototype相等的原型");
    	console.log("child instanceof Parent :"+(child instanceof Parent));//true;
    	console.log("child instanceof Fn :"+(child instanceof Fn));//true;
    	console.log("fn instanceof Parent :"+(fn instanceof Parent));//true;
    	console.log("fn instanceof Child :"+(fn instanceof Child));//false;
    	console.groupEnd();
    	/*
    		进一步确定 instanceof 是检查原型的引用 而不是深入原型去检测他们的内容是否一样
    	*/
    	var proto2 = {
    		say:function(){
    			alert("my name is "+this.name);
    		}
    	}
    	Child = function(){}
    	Child.prototype = proto2;
    	child = new Child();
    	console.group(" instanceof 是检查原型的引用 而不是深入比较原型的内容");
    	console.log("child instanceof Parent :"+(child instanceof Parent));//false;
    	console.groupEnd();
    </script>
  </body>
</html>

 

 firefox执行结果如图

 

       

 

总结:

        js的instanceof是根据prototype来判断两个对象是否存在继承关系,

        A instanceof B

        js会沿着A的原型链查找 直到找到A.__proto__ === B.prototype 返回true

 

期待你们的意见,谢谢。 

 

注:__proto__属性指向prototype对象,对开发者不可见,例如var a = new A(), a.__proto__ = A.prototype;

 

  • 大小: 25.6 KB
分享到:
评论

相关推荐

    JS 面向对象之神奇的prototype

    JavaScript中对象的... 前面我们说,对象的类(Class)和对象实例(Instance)之间是一种“创建”关系,因此我们把“类”看作是对象特征的模型化,而对象看作是类特征的具体化,或者说,类(Class)是对象的一个类型

    前端Javascript相关面试基础问答整理md

    2. 判断数据类型typeof、instanceof、Object.prototype.toString.call()、constructor 2.1 判断数组的几种方式 2.2 判断NaN的几种方式 2.3 实现一个函数clone 3. 类数组与数组的区别与转换 4. 数组的常见API 5. bind...

    不是原型继承那么简单!!prototype的深度探索

    前面我们说,对象的类(Class)和对象实例(Instance)之间是一种“创建”关系,因此我们把“类”看作是对象特征的模型化,而对象看作是类特征的具体化,或者说,类(Class)是对象的一个类型(Type)。例如,在前面的...

    JavaScript中Object和Function的关系小结

    Function instanceof Object 和 Object instanceof Function 都是 true 1。我们可以认为 Object 是一个特殊的“类”,而这里的“类”即:Function 于是便可以理解为: Object = Function () {} 或 Object = new ...

    javascript prototype的深度探索不是原型继承那么简单第1/3页

    前面我们说,对象的类(Class)和对象实例(Instance)之间是一种“创建”关系,因此我们把“类”看作是对象特征的模型化,而对象看作是类特征的具体化,或者说,类(Class)是对象的一个类型(Type)。例如,在前面的...

    JavaScript原型链示例分享

    –/* 每个对象实例都有个属性成员用于指向到它的instanceof 对象(暂称为父对象)的原型(prototype) 我们把这种层层指向父原型的关系称为[原型链 prototype chian] 原型也具有父原型,因为它往往也是一个对象实例,...

    javascript的几种继承方法介绍

    确认原型和实例之间的关系用instanceof。 原型链继承缺点:字面量重写原型会中断关系,使用引用类型的原型,并且子类型还无法给超类型传递参数 function Parent(){ this.name='mike'; } function Child(){ ...

    简单谈谈Javascript中类型的判断

    2、关系运算符 instanceof 3、constructor 属性 4、prototype属性 一、typeof typeof的返回值有以下几种 类型 结构 Undefined "undefined" Null "object" (见下方) 布尔值 "boolean" 数值 "number" ...

    Javascript数组操作高级心得整理

    (4) 关系运算(&lt;、&gt;、、&gt;=、==、!=) 6 (5) 等性运算符(==、===、!=、!==) 6 (6) 条件运算符 7 (7) 其他运算符 7  赋值运算符 7  逗号运算符 7  typeof运算符 7  delete运算符 7  instanceof运算符 7 4. ...

    java面试800题

    do, double, else, extends, final, finally, float, for, goto, if, implements, import, instanceof, int, interface, long, native, new, package, private, protected, public, return, short, static, strictfp...

    详解Javascript继承的实现

    我最早掌握的在js中实现继承的方法是在xx学到的混合原型链和对象冒充的方法,在工作中,只要用到继承的时候,我都是用这个方法实现。它的实现简单,思路清晰:用对象冒充继承父类构造函数的属性,用原型链继承父类...

    java 面试题 总结

    引用可以转换到接口类型或从接口类型转换,instanceof 运算符可以用来决定某对象的类是否实现了接口。 18、heap和stack有什么区别。 栈是一种线形集合,其添加和删除元素的操作应在同一段完成。栈按照后进先出的方式...

    超级有影响力霸气的Java面试题大全文档

    引用可以转换到接口类型或从接口类型转换,instanceof 运算符可以用来决定某对象的类是否实现了接口。 21、heap和stack有什么区别。  栈是一种线形集合,其添加和删除元素的操作应在同一段完成。栈按照后进先出的...

Global site tag (gtag.js) - Google Analytics