js instanceof 的工作原理细解

最新推荐文章于 2023-02-16 12:46:14 发布
最新推荐文章于 2023-02-16 12:46:14 发布
阅读量5.1k 收藏 3
点赞数 2
分类专栏： 实际应用 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013970232/article/details/109405118
版权

根据 MDN 的解释

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。


s instanceof F 用递归函数来表达, 流程大致如下:

function _instanceof(s, F) {
	if(s.__proto__ === F.prototype) {
		// 找到目标
		return true
	} else if("__proto__" in F) {
		// 存在上一层原型1
		_instanceof(s, F.__proto__)
	} else {
		// 穷尽原型链仍找不到目标
		return false
	}
}
_instanceof(s, F)

instanceof 的工作原理就是将 s 每一层的 __proto__ 与 F.prototype 做比较
找到相同返回 true
至最后一层仍没有找到返回 false




因为构造函数的 prototype 可以修改(一般不建议这么做), 所以 instanceof 返回的结果并不是固定的, 甚至是错误的
我们通过下例理解其原因

<html>

<head>
	<title>instanceof 的工作原理</title>
</head>

<body>

	<script type="text/javascript">
		function section1() {
			function F1() { }

			function F2() { }

			// F1.prototype 的粗略结构
			// F1_prototype = {
			// 	constructor: F1,
			// 	__proto__: {
			// 		constructor: Object
			// 	}
			// }

			// F2.prototype 的粗略结构
			// F2_prototype = {
			// 	constructor: F2,
			// 	__proto__: {
			// 		constructor: Object
			// 	}
			// }

			var s = new F1();

			// 根据实例化原理可知 s.__proto__ === F1.prototype
			console.log(s.__proto__ === F1.prototype) // true
			// 所以得以下结果
			console.log(s instanceof F1) // true

			// 根据 F2_prototype 显示的结构, s 整个原型链都没有 F2.prototype
			// 所以得以下结果
			console.log(s instanceof F2) // false

		}

		function section2() {
			function F1() { }

			// F1.prototype 的粗略结构
			// F1_prototype = {
			// 	constructor: F1,
			// 	__proto__: {
			// 		constructor: Object
			// 	}
			// }

			var s = new F1();
			// s 的粗略结构
			// _s = {
			// 	__proto__: {
			// 		constructor: F1,
			// 		__proto__: {
			// 			constructor: Object
			// 		}
			// 	}
			// }

			// *提示: {} 相当于新建一个对象, 与其它对象都不相等, 类似于 {} !== {}
			F1.prototype = {};

			// F1.prototype 的粗略结构
			// F1_prototype = {
			// 	__proto__: {
			// 		constructor: Object
			// 	}
			// }

			var s2 = new F1();

			// s2 的粗略结构
			// _s2 = {
			// 	__proto__: {
			// 		__proto__: {
			// 			constructor: Object
			// 		}
			// 	}
			// }

			// F1.prototype 重写后, F1.prototype 是一个新的对象, 不存在于 s 的原型链上
			// 所以得以下结果
			console.log(s instanceof F1) // false

			// 根据 F1_prototype, _s2 显示的结构
			console.log(s2.__proto__ === F1.prototype) // false
			// 所以得以下结果
			console.log(s2 instanceof F1) // true

		}

		function section3() {
			function F1() { }

			function F2() { }

			// F2.prototype 的粗略结构
			// F2_prototype = {
			// 	constructor: F2,
			// 	__proto__: {
			// 		constructor: Object
			// 	}
			// }

			var s = new F2();

			// 根据实例化原理可知 s.__proto__ === F2.prototype
			console.log(s.__proto__ === F2.prototype) // true
			// 所以得以下结果
			console.log(s instanceof F2) // true

			// 根据 F2_prototype 显示的结构, s 整个原型链都没有 F1.prototype
			// 所以得以下结果
			console.log(s instanceof F1) // false

		}

		function section4() {
			function F1() { }

			function F2() { }

			F2.prototype = new F1(); // 继承

			// F1.prototype 的粗略结构
			// F1_prototype = {
			// 	constructor: F1,
			// 	__proto__: {
			// 		constructor: Object
			// 	}
			// }

			// F2.prototype 的粗略结构
			// *提示: F2.prototype.__proto__ === F1.prototype
			// F2_prototype = {
			// 	constructor: undefined,
			// 	__proto__: {
			// 		constructor: F1,
			// 		__proto__: {
			// 			constructor: Object
			// 		}
			// 	}
			// }

			var s = new F2();

			// 根据实例化原理可知 s.__proto__ === F2.prototype
			console.log(s.__proto__ === F2.prototype) // true
			// 所以得以下结果
			console.log(s instanceof F2) // true

			// 根据 F2_prototype 显示的结构, 推理可得
			console.log(s.__proto__.__proto__ === F1.prototype)
			// 所以得以下结果
			console.log(s instanceof F1) // true

		}

		function section5() {
			function F1() { }

			function F2() { }

			F2.prototype = F1.prototype; // 继承

			// F1.prototype 的粗略结构
			// F1_prototype = {
			// 	constructor: F1,
			// 	__proto__: {
			// 		constructor: Object
			// 	}
			// }

			// F2.prototype 的粗略结构
			// F2_prototype = {
			// 	constructor: F1,
			// 	__proto__: {
			// 		constructor: Object
			// 	}
			// }

			var s = new F2();

			// 根据实例化原理可知 s.__proto__ === F2.prototype
			console.log(s.__proto__ === F2.prototype) // true
			// 所以得以下结果
			console.log(s instanceof F2) // true

			// 因为 F2.prototype 重写后就是 F1.prototype
			console.log(s.__proto__ === F1.prototype)
			// 所以得以下结果
			console.log(s instanceof F1) // true

		}

		section1()
		section2()
		section3()
		section4()
		section5()
	</script>
</body>

</html>

因为 instanceof 是通过构造函数的原型(prototype) 计算结果的, 所以当 prototype 被修改后, instanceof 的结果也将受到影响

//end

352328759
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js中的instanceof原理
分享学习成果，希望可以帮助到你。
01-10 1275
instanceof是用来检测构造函数的属性是否出现在某个实例对象的原型链上。但是也存在缺陷，就是它不能精确的判断 Object 类的具体数据类型。如何实现instanceof？
JS Instanceof 原理
反省
11-03 112
【代码】JS Instanceof 原理。
js中instanceof原理
wyw223的博客
03-04 2149
instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置 function Car(make, model, year) { this.make = make; this.model = model; this.year = year; } var auto = new Car('Honda', 'Accord', 1998); conso...
JavaScript中的instanceof
subsistent的博客
02-16 839
JavaScript中变量的类型判断常常使用typeof运算符，但使用typeof时存在一个缺陷，就是判断引用类型存储值时，无论引用的是什么类型的对象，它都返回 object。instanceof 运算符与 typeof 运算符相似，用于识别正在处理的对象的类型。尽管不像 typeof 方法那样灵活，但是在 typeof 方法返回 “object” 的情况下，instanceof 方法就很有用。该代码中是判断了一层继承关系中的父类，在多层继承关系中，instanceof 运算符同样适用。
Javascript原型链及instanceof原理详解
11-20
instanceof:用来判断实例是否是属于某个对象，这个判断依据是什么呢？ 首先，了解一下javascript中的原型继承的基础知识： javascript中的对象都有一个__proto__属性，这个是对象的隐式原型，指向该对象的父对象的原型（prototype）。显式的原型对象使用prototype，但是Object.prototype.proto=null; 判断某个对象a是否属于某个类A的实例，可以通过搜索原型链。 实例对象属性查找顺序是：实例对象内部—->构造函数原型链—->实例对象父对象的原型链。 //继承机制 function A(){ } A.prototype.
理解Javascript_07_理解instanceof实现原理
12-01
总结`instanceof`的工作原理，它通过遍历对象的`[[Prototype]]`链，查找是否存在与给定构造函数的`prototype`属性相匹配的对象。如果找到，返回`true`；否则，返回`false`。当构造函数的`prototype`为`null`时，如果...
JavaScript instanceof 的使用方法示例介绍
10-26
理解 `instanceof` 的工作原理，需要深入理解 JavaScript 的原型链和继承机制。在原型链中，每个对象都可以通过其 `prototype` 属性链接到另一个对象，形成一个链式结构。当查找某个属性时，JavaScript 会沿着这个链...
javascript instanceof 与typeof使用说明
12-08
typeof用以获取一个变量的类型，typeof一般只能返回如下几个结果... 如果我们希望获取一个对象是否是数组，或判断某个变量是否是某个对象的实例则要选择使用instanceof。instanceof用于判断一个变量是否某个对象的实例
JavaScript中instanceof运算符的使用示例
10-22
主要介绍了JavaScript中instanceof运算符的使用示例,instanceof的使用是JavaScript入门学习中的基础知识,需要的朋友可以参考下
理解Javascriptinstanceof实现原理
10-03
理解Javascript理解instanceof实现原理
简说JS中的instanceof
qq_44169219的博客
11-13 3075
instanceof操作符在MDN上的解释为：定义instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链的任何位置。 1、作用：判断一个引用是否属于某构造函数或在继承关系中判断一个实例是否属于他的父类型。 2、判断逻辑：从当前引用的proto一层一层顺着原型链往上找，看能否找到对应的prototype。 3、使用方法：object instanceof co...
javascript 中关于 instanceof 的深度剖析及原理
qq_35173602的博客
07-04 704
网上有很多类似文章，本篇文章主要是进一步分析 instanceof 的原理，并模拟其原理的实现，适合对其有一定了解的同学阅读。 附代码： function A(){}; //创建一个A类 var a = new A(); //实例化 a instanceof A; // true 上述是一个基础的例子。我们继续看： function B(){}; //创建一个B类 B.prototype ...
浅谈 instanceof 和 typeof 的实现原理
热门推荐
qq_38722097的博客
06-17 1万+
typeof 实现原理 typeof 一般被用于判断一个变量的类型，我们可以利用 typeof 来判断number, string, object, boolean, function, undefined, symbol 这七种类型，这种判断能帮助我们搞定一些问题，比如在判断不是 object 类型的数据的时候，typeof能比较清楚的告诉我们具体是哪一类的类型。但是，很遗憾的一点是...
浅谈js的 instanceof 和 typeof 的实现原理
树上骑个猴的博客
02-18 531
typeof 实现原理 我们可以先想一个很有意思的问题，js 在底层是怎么存储数据的类型信息呢？或者说，一个 js 的变量，在它的底层实现中，它的类型信息是怎么实现的呢？ 其实，js 在底层存储变量的时候，会在变量的机器码的低位1-3位存储其类型信息 000：对象 010：浮点数 100：字符串 110：布尔 1：整数 but, 对于 undefined 和 null 来说，这两个值的信息存储是有点特殊的。 null：所有机器码均为0 undefined：用 −2^30 整数来表示 所以，typeof
js运算符instanceof的工作原理
技进乎道
07-05 3195
        结论： 判断类的prototype对象是否存在于实例对象的原型链上。是则返回true。         例如obj instanceof Fn 。                 1，objProto = obj.__proto__ 。(__proto__指对象 内部隐式的[[Prototype]] ，在FF、chrome下可用__proto__访问，其他浏览器
js instanceof原理
qq_26889291的博客
08-30 228
检查实例化对象的原型链是否出现在构造函数的prototype上 class Person { constructor(name, age) { this.name = name; this.age = age; } } class Child extends Person { constructor(parentName, parentAge) { super(); this.parentName = parentNam
实现js中的instanceof以及instanceof实现原理
chenyuhua08042的博客
05-02 835
js中instanceof的实现
instanceof 实现原理
前端大菜鸟的博客
03-26 520
instanceof 方法说明 判断指定构造函数的原型对象是否出现在指定对象的原型链上 示例 function Test (name) { this.name = name this.log = function () { console.log(this.name) } } const t = new Test() // 判断对象t是否是另一个对象（Test）的实例 /...
js instanceof
最新发布
04-29
js instanceof是一种用于检测对象类型的运算符。它用于检查一个对象是否属于某个特定的类型，返回的结果是一个布尔值（true或false）。 具体来说，instanceof需要两个操作数：对象和构造函数。当一个对象是一个类的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值