原型和原型链

原型和原型链

构造函数

js 复制代码
function Fn(){
}

const fn1 = new Fn();
fn1.test = 'hello word!'

其中,fn 就是一个构造函数,fn 就是一个我们使用构造函数fn创建的实例对象; ok,理解了构造函数实例对象以及他们之间的关系。

prototype

js 复制代码
function Fn(){
}

//prototype只有构造函数才会有的属性~
Fn.prototype.test = 'hello word!'

const fn1 = new Fn();
const fn2 = new Fn();
console.info(fn1.test)//hello word
console.info(fn2.test)//hello word

代码中的prototype 添加的属性,就是添加到调用构造函数创建出来的实例对象的原型对象中。也就是🌰中fn1fn2的原型对象。

原型 又是什么呢? 当我们创建一个对象的时候(null除外),他都会关联另外的一个对象这里关联的意思就是所谓的"继承",而所关联的对象就是创建对象的原型。

那我们应该如何表达实例实例的原型的关系呢?

好,继续学习解决这个问题!

proto

每一个js对象都有一个 __proto__属性,用来指向该对象的原型。并且fn1.__proto__ === Fn.prototype

因此,实例和实例原型的关系就是fn1和fn1.__proto__的关系

constructor

当我们想找一个原型的构造函数时要怎么做呢?

js 复制代码
function Fn(){
}
console.info(Fn.prototype.constructor === Fn)//true

经过上面学习我们又知道了

js 复制代码
function Fn(){
}
const fn1 = new Fn();
console.info(Fn.prototype.constructor === Fn)//true
console.info(fn1.__proto__ === Fn.prototype)//true
console.info(Object.getPrototype(fn1) === Fn.prototype)//true

实例与原型

当我们在实例中查找属性查找不到的时候就会自动向原型去找,比如我们在调用对象的方法的时候,这些方法并没有在实例对象中。因此,会向上面的原型中查找。

js 复制代码
function Fn(){
}

//prototype只有构造函数才会有的属性~
Fn.prototype.test = 'hello word!'

const fn1 = new Fn();
const fn2 = new Fn();
console.info(fn1.test)//hello word
console.info(fn2.test)//hello word

这是上面的🌰,我们直接拿过来了。test在我们的实例对象fn1fn2中并没有。那这个属性是从哪里来的呢?就是去上层的原型对象中获取的。

原型的原型

那如果在实例对象的原型中还是没有找到这个属性呢?

当然,会去更上层的原型对象去找,这里的原型的原型对象指Object.prototype。因此,又有了

js 复制代码
Fn.prototype.__proto__===Object.prototype//true

原型链

到现在我们可以引出另一个新的概念了,原型链

原型链是什么意思呢?

就像上面那个例子,当我们去查找一个属性test的时候,实例对象fn1没有就会去原型对象fn1.__proto__(Fn.prototype)上去找,原型对象上没有就会去原型对象的原型对象Object.prototype去找。那如果还找不到呢?那就会继续向原型对象的原型对象的原型对象上去找...

那如果找不到这个属性就不会停下来吗? 当然会啦!当找到null 为止就不会继续向上寻找了。null表示没有对象,此处不应该有值

到此,原型链的意思就是这个查找过程形成的链式路径

扩展

  • 继承 继承意味着复制的操作,然而JavaScript默认并不会复制对象的属性,相反,JavaScript只是在两个对象之间创建一个关联。这样,一个对象就可以通过委托访问另一个对象的属性和函数,所以与其叫继承,委托的说法更为准确些。 ---《你不知道的JavaScript》
  • proto 尽管大多浏览器都支持这种访问原型的方法,但是它并不是一个标准的访问原型的方法。可以通过Object.getPrototype()来访问原型。

学习笔记

不是什么学习文档,就是整理的学习笔记。用来自己学习、梳理思路、查漏补缺。


2023年12月04

相关推荐
百思可瑞教育39 分钟前
在Vue项目中Axios发起请求时的小知识
前端·javascript·vue.js·北京百思教育
患得患失9491 小时前
【个人项目】【前端实用工具】OpenAPI to TypeScript 转换器
前端·javascript·typescript
大前端helloworld1 小时前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·javascript·面试
trsoliu1 小时前
前端基于 TypeScript 使用 Mastra 来开发一个 AI 应用 / AI 代理(Agent)
前端·人工智能
鸡吃丸子1 小时前
前端权限控制:深入理解与实现RBAC模型
前端
Larry_zhang双栖1 小时前
低版本Chrome 内核兼容性问题的优美解决
前端·chrome
良木林1 小时前
浅谈原型。
开发语言·javascript·原型模式
qq_12498707532 小时前
基于node.js+vue的医院陪诊系统的设计与实现(源码+论文+部署+安装)
前端·vue.js·node.js·毕业设计
袁煦丞2 小时前
9.12 Halo的“傻瓜建站魔法”:cpolar内网穿透实验室第637个成功挑战
前端·程序员·远程工作
universe_013 小时前
day27|前端框架学习
前端·笔记