原型和原型链

原型和原型链

构造函数

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

相关推荐
hj5914_前端新手2 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法2 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku2 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode2 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu2 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu2 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu2 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu2 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu2 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在2 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net