instanceof 和 prototype 关系

最新推荐文章于 2022-09-02 21:03:23 发布
最新推荐文章于 2022-09-02 21:03:23 发布
阅读量221 收藏
点赞数
分类专栏： javascript 文章标签： instanceof prototype js继承

    一直想知道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;

 

yxc_gdut
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript instanceof 的使用方法示例介绍
10-26
总的来说，`instanceof` 是一个强大的工具，能够帮助开发者检查对象的类型和继承关系，尤其是在涉及原型链和继承的场景下。在编写 JavaScript 代码时，合理使用 `instanceof` 可以提高代码的健壮性和可维护性。然而...
关于JavaScript的prototype和instanceof
nksongzz的专栏
06-25 1425
在javascript里，每个function都有一个prototype属性，这个属性的用途是实现继承机制。必如下面定义的function class1：      function class1(){}       class1.prototype = {a:10,b:100};则class1的每个实例都会从prototype继承a和b这两个属性。同时，每个对象都会有一个内部的属性_proto
instanceof实例和prototype
weixin_33786077的博客
04-19 73
var arr=[1,3,2];alert(arr instanceof Array); 返回true； 对于继承譬如一个Drag（）拖拽的继承，我想加一个限制范围的拖拽 我需要写一个新的函数 function LimitDrag（'id'） { 　　Drag（this，id）;这样就继承看了Drag的属性 } for（var i in Drag.prototype） { Li...
instanceof与typeof（写一个方法判断数据类型）,prototype与_proto_
Prince_fmx的博客
09-01 852
typeof operand operand 是一个表达式，表示对象或原始值，其类型将被返回 下表总结了 typeof 可能的返回值。有关类型和原语的更多信息，可查看 JavaScript数据结构 页面。 类型 结果 Undefined "undefined" Null "object" (见下方)
一道关于instance、prototype相关的前端面试题
guyue_01的博客
04-09 214
今天突然看到一道题， var A = function() {}; A.prototype = {};// 这里的空对象为对象1 var a = new A(); A.prototype = {};// 这里的空对象为对象2 var b = new A(); console.log(a instanceof A);//false console.log(b instanceof A);//...
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
10-29
总结一下，`constructor` 和 `instanceof` 在JavaScript的面向对象编程中分别代表了对象的构造函数引用和实例关系检查。理解这两者的工作原理对于编写高效、易于维护的JavaScript代码至关重要。在处理继承和扩展时，...
javascript之typeof、instanceof操作符使用探讨
10-27
然而，`instanceof`也有局限性，比如在跨作用域或框架的情况下，由于原型链的关系，它可能无法正确识别对象的类型。此外，`instanceof`无法检测基本类型，因为它们不是通过构造函数创建的。 总结来说，虽然`typeof`...
JavaScript中Object和Function的关系小结
01-19
Function instanceof Object 和 Object instanceof Function 都是 true 1。我们可以认为 Object 是一个特殊的“类”，而这里的“类”即：Function 于是便可以理解为： Object = Function () {} 或 Object = new ...
instanceof、isPrototype、Object.create的区别
weixin_30952535的博客
06-28 612
1、isPrototypeOf()用于测试一个对象是否存在于另一个对象的原型链上。 　　prototypeObj.isPrototypeOf(object) 2、isPrototypeOf()与instanceof运算符不同。在表达式“object instanceof AFunction”中，object的原型链是针对 AFunction.prototype进行检查的，而不是AFunc...
对prototype,instanceof和constrctor的理解
dayanwu2842的博客
04-16 83
<!DOCTYPE html> <html> <head> <script> function Cat(name,color){ this.name=name; this.color=color; this.eat=function(){console.log('eat fish');} } var ...
Object.prototype成员及instanceOf
19年的墨先生的博客
10-15 264
1、Object.prototype成员介绍 1.1 hasOwnProperty() 判断一个成员(属性/方法)是否是属于对象自己的，返回一个布尔值 let obj = { name:'素素', age:19 } obj.__proto__.type = '人'; console.log(obj.hasOwnProperty('name'));//true console.log(obj.hasOwnProperty('age'));//true console.log(obj.hasO
instanceof 与 isPrototypeOf 的区别
又一个四季在轮回
09-13 485
原博客：jianshu.com/p/31b09a13f212 和 https://www.cnblogs.com/ArthurXml/p/6555509.html 判断A构造函数的prototype对象是否在B的原型链上: B instanceof A： 语法： prototypeObj.isPrototypeOf(object) 参数： object 在该对象的原型链上搜寻 返回值： Boolean，表示调用对象是否在另一个对象的原型链上。 描述：isPrototypeOf 方法允许你检查
如何判断js中的数据类型
weixin_30485379的博客
02-28 508
typeof、instanceof、 constructor、 prototype方法比较 1. 使用typeof操作符。 　　对一个值使用 typeof 操作符可能返回下列某个字符串，返回的类型都是字符串形式。 　　(1) undefined：如果这个值未定义 　　(2) boolean：如果这个值是布尔值 　　(3) string：如果这个值是字符串 　　(4) numb...
判断js中的类型：typeof / instanceof / constructor / prototype
zls_12的专栏
08-14 4572
判断js中的类型：typeof / instanceof / constructor / prototype对比总结
js的各种数据类型判断（typeof、instanceof、Object.prototype.toString.call()、constructor、in、hasOwnProperty）
muzidigbig的博客
11-06 5443
1.typeof Object.prototype.toString.call() constructor in hasOwnProperty() 基础类型: String、Number、Boolean、null、undefined、Symbol 存储在栈中，赋值变量和比较均为数据本身。 引用类型：Object、Array、Map、Function 存储在堆中，使用new创建，赋值变量和比较均是内存地址。
js中的原型prototype的理解+实例
Azbtt的博客
09-02 677
js中的原型prototype的理解+实例
js判断一个变量是否为数组
lily
09-13 2167
var arr = []; console.log(arr instanceof(Array)); console.log(arr.constructor === Array); console.log(Array.prototype.isPrototype(arr)); console.log(Object.getPrototypeOf(arr) === Array.prototype); Obj
typeof 和instanceof Object.prototype.toString.call()
最新发布
04-04
typeof用于获取一个值的数据类型，返回一个字符串。 例如： typeof 123 // "number" typeof "hello" // "string" typeof true // "boolean" ...Object.prototype.toString.call(new Date()) // "[object Date]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值