js原型，原型链，instanceof

最新推荐文章于 2023-04-07 17:41:22 发布
最新推荐文章于 2023-04-07 17:41:22 发布
阅读量182 收藏 1
点赞数
分类专栏： # javascript基础知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25503949/article/details/107141783
版权
本文详细探讨了JavaScript中的原型、原型链以及instanceof操作符的工作原理。通过实例解析，阐述了如何判断一个对象是否属于某个类的实例，并解释了在继承关系中，对象如何查找和调用方法。内容包括类型判断、原型和原型链的概念，以及它们在JavaScript继承中的作用。
摘要由CSDN通过智能技术生成

js原型，原型链，instanceof

一.类型判断 instanceof

上一篇文章讲的继承

（把上一篇文章的zby都看成xialuo）

在这里插入图片描述
xialuo（zby）是Student 类的一个实例
Student继承People
People默认继承Object

若是不明白原理，可以继续往下看，其实与原型原型链有关

二.原型

在这里插入图片描述
xialuo__proto__为隐式原型
Student. prototype 为显式原型

在这里插入图片描述
原型关系
在这里插入图片描述
基于原型的执行规则
在这里插入图片描述
三.原型链

在这里插入图片描述
在这里插入图片描述
Student类继承People类，可以理解为student=new people，所以student的隐式原型指向people的显式原型

当执行代码xialuo.eat()时，会先在自己的方法里找，没有的话，顺着xialuo.__proto__指向Student.prototype，若还是没有则继续向上找，指向People.prototype。

-------------------------------------------------------------------------------------------
在这里插入图片描述
sayHi不是xialuo自身的方法，是Student的方法，所以false
这时候就能理解为什么手写深拷贝的时候，要用到hasOwnProperty()

在这里插入图片描述
在这里插入图片描述
上理解上面图的条件下，重新理解instanceof

xialuo.instanceof.xxxx（student，people，object）

student，people，object的原型都在那摆着，xialuo的隐式原型向上寻找连接到了谁，xialuo与谁instanceof就为true。

-------------------------------------------------------------------------------------------

四.重要提示：
在这里插入图片描述

啵雨的博客
关注
专栏目录
javascript之原型与原型链
zhao97的博客
03-06 1013
借鉴原文原型与原型链 一、prototype 在javascript除外，每一个函数都有一个prototype属性，这个属性指向函数的原型 function Person(age) { this.age = age } Person.prototype.name = 'kavin' var person1 = new Person() var person2 = new Person() console.log(person1.name) //kavin console.log(per
Javascript之原型与原型链
cjhxydream的博客
05-23 436
原型与原型链原型（prototype）每个函数都有一个prototype属性，且默认指向一个空的Object对象原型对象中有一个属性constructor，它指向函数对象给原型对象添加属性显式原型与隐式原型原型链 原型（prototype） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" co
JS原型链与instanceof底层原理
鸡血博客
09-29 149
https://www.jianshu.com/p/6c99d3678283 instanceof底层原理： 查看某对象的prototype属性指向的原型对象是否在另一对象的原型链上，如果在就返回true，如果不在返回false https://blog.csdn.net/Picking_up_stones/article/details/70050086 ...
原型、原型链、instanceof、isprototypeof详解
a519991963的专栏
07-11 392
原型： 原型链： instanceof： isprototypeof：
深入理解JS—instanceof和原型链
Cecilia
05-04 1万+
又介绍一个老朋友——instanceof。对于值类型，你可以通过typeof判断，string/number/boolean都很清楚，但是typeof在判断到引用类型的时候，返回值只有object/function，你不知道它到底是一个object对象，还是数组，还是new Number等等。这个时候就需要用到instanceof。例如：function Foo(){} var f1=new Foo
JS：原型和原型链
elevenhope的博客
02-11 4596
一、原型 原型：每当定义一个对象（函数也是对象）时，就会生成一个__proto__属性，被称为隐式原型；这个__proto__属性指向的是这个对象的构造函数的prototype，被称为显式原型。每一个对象都会从原型中“继承”属性。 首先看一个例子，创建一个Student类，并创建类的实例对象student： class Student{ constructor(name, score) { this.name = name; this.score = score;
JS原型和原型链详解
最新发布
Zhang_wang_yun的博客
04-07 1575
原型是Javascript中的继承的基础，JavaScript的继承就是基于原型的继承。说到原型会涉及两个概念：构造函数、原型对象。
深入理解javascript原型和原型链
猫老板的豆
03-11 1619
prototype（原型）下面的就是原型（也叫显式原型），它是一个对象，我们也称它为原型对象。Person.prototype.say = function () { // 通过原型添加方法// 原型对象say: ƒ(), // 原型上共享的方法，不会反复开辟存储空间，减少内存浪费。上面这个对象，就是大家常说的原型对象。
原型和原型链和instanceof
weixin_43613849的博客
05-16 474
一、prototype 在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。 function Person(age) { this.age = age } Person.prototype.name = 'kavin' var person1 = new Person() var person2 = new Person() console.log(person1.name) //kavin console.log(person2.
Javascript原型链及instanceof原理详解
10-15
综上所述，原型链和instanceof是JavaScript中实现继承和类型判断的重要概念。掌握这些概念对于编写高质量、高效能的JavaScript代码是非常必要的。由于原型链是动态的，开发者可以灵活地改变对象的原型，实现更加丰富...
分析javascript原型及原型链
10-18
在JavaScript中，原型（Prototype）和原型链（Prototype Chain）是核心概念之一，它们是实现继承的关键，对于理解JavaScript的面向对象编程至关重要。 一、原型对象的理解 当我们用JavaScript创建一个函数时，这个...
JavaScript — 显式原型和隐式原型、原型链、探索instanceof
m0_59897687的博客
02-21 524
目录 一、原型（prototype） 1.函数的prototype属性 2.给原型对象添加一个属性（一般是方法） 二、显式原型和隐式原型 三、原型链 1.原型链 2.构造函数/原型/实体对象的关系 3.属性问题 四、探索instanceof 一、原型（prototype） 1.函数的prototype属性 每个函数都有一个prototype属性，它默认指向一个Object空对象（即成为：原型对象） 原型对象中有一个属性constructor，它指向函数对象 ...
js闭包及常见的应用场景
热门推荐
qq_25503949的博客
07-08 9万+
js闭包 这两个例子返回值都是100 因为 所有的（闭包）自由变量的查找，是在函数定义的地方，向上级作用域查找 不是在执行的地方！！！
js异步和同步的区别
qq_25503949的博客
07-09 3016
js异步和同步的区别 一.单线程和异步： dom渲染中js必须停止，js进行过程中dom渲染必须停止 单线程是异步出现的一个背景 二.异步和同步： 异步的例子，在定时器1s内，会输出300 而在同步中，200的警示框必须点击确定后才能输出300 ...
js异步常见的使用场景
qq_25503949的博客
07-09 2887
js异步常见的使用场景 （onload事件，在图片加载完成后执行） 因为setTimeout是在载入后延迟指定时间后,去执行一次表达zhi式,记住,次数是一次 而setInterval则不一样,它从载入后,每隔指定的时间就执行一次表达式 ...
js小练习：js实现button点击之后60秒后才可以再次点击
qq_25503949的博客
07-09 775
js小练习：js实现button点击之后60秒后才可以再次点击（验证码） html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
js变量计算---类型转换
qq_25503949的博客
07-05 326
js变量计算（一）类型转换 一.字符串拼接 其它值类型与字符串相加，会将其自动转换成字符串的格式后，再相加 二. ==运算符 会将等式两边的类型自动转换成同类的格式再比较 在日常进行判断中 三. if语句和逻辑运算 （一）truly变量和falsely变量 经过两次非运行得到true值的是 truly变量，得到false值得是falsely变量 （二）if语句 js的if语句（）中判断是不是truly和falsely变量 若是truly变量最运行if包含的语句 与c语言if语句（）判断true和f
js手写bind,apply,call
qq_25503949的博客
07-09 258
js手写bind,apply,call 一.手写bind // 模拟 bind Function.prototype.bind1 = function() { //不知道bind传了多少个参数 // 将参数拆解为数组 const args = Array.prototype.slice.call(arguments) //相当于arguments.toArray().slice() // 获取 this（数组第一项：{x:100}），并改变原数组 const t =
js--用class类手写简易jquery考虑插件和扩展性
qq_25503949的博客
07-07 257
js–用class类手写简易jquery考虑插件和扩展性 class jQuery { constructor(selector) { const result = document.querySelectorAll(selector) const length = result.length for (let i = 0; i < length; i++) { this[i] = result[i] }
JavaScript原型与原型链深度解析
7. **instanceof**：运算符用于检测一个对象是否在一个类或其原型链中。 理解并熟练运用原型和原型链是JavaScript高级编程的基础，它们是实现面向对象编程的关键工具，尤其是在处理继承和共享行为时。通过实例化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值