【笔记】原型和原型链(持续完善)

概念

  1. 原型:函数都具有 prototype 属性,称之为原型,也称之为原型对象
    1.1 原型可以放一些属性和方法,共享给实例对象使用(也就是原生方法)。
    1.2 原型可以做继承
  2. 原型链:对象都有 __proto__ 属性,这个属性指向它的原型对象,原型对象也是对象,也有 __proto__ 属性,指向原型对象的原型对象,这样的链式结构称为原型链,最顶层找不到则返回 null.
  • 显式原型(prototype)是每个函数都有的一个属性,它指向一个对象,该对象包含可以由该函数的实例共享的属性和方法。当我们创建一个函数时,JavaScript 会自动为该函数创建一个 prototype 对象,并将其赋值给函数的 prototype 属性。
  • 隐式原型(__proto__)是每个对象都有的一个属性,它指向该对象的构造函数的原型对象。当我们创建一个对象时,JavaScript 会自动为该对象创建一个 __proto__ 属性,并将其指向创建该对象的构造函数的 prototype 属性。

区别

  1. prototype 是函数对象特有的属性,而 __proto__ 是对象特有的属性;
  2. prototype 用于实现继承,它包含了可以由该函数的实例共享的属性和方法。而 __proto__ 用于查找原型链,它指向该对象的构造函数的原型对象;
  3. prototype 可以通过函数名访问到它(显式原型),而 __proto__ 是隐式原型,可以通过对象的实例来访问它。
javascript 复制代码
// 1. 声明一个构造函数 Person
function Person(name) {
  this.name = name;
}

// 2. 为构造函数的原型增加 sayHello 方法
Person.prototype.sayHello = function() {
  console.log('Hello, ' + this.name);
};

// 3. person1 为构造函数 Person 的实例对象
const person1 = new Person('Alice');

// 4. 实例对象的隐式原型指向构造函数的原型
console.log(person1.__proto__ === Person.prototype); // true

// 5. 构造函数的原型上的构造函数指向构造函数本身
console.log(Person.prototype.constructor === Person); // true

person1.sayHello(); // 输出:Hello, Alice
  • 由 5 可得:

  • 原型链:

第一个是 fun 是实例对象 proto 等价于 \[prototype],

第二个是 \[prototype] 的 proto 是 Person 这个对象(注意不是函数/类)他的另一个身份是函数)

第三个是 Person 的 proto 是 Object,是由 Object.create 或 {} 或 new Object() 产生的

相关推荐
FTS苏州运营部-富港包装检测技术1 小时前
YY/T 0681.3‑2010 无约束包装抗内压破坏试验 技术笔记
笔记·yy/t 0681.2·yy/t 0681.3·yy/t 0681.9·astm f1140·无约束包装·astm f2054
_Narcissus_2 小时前
B树概念及操作笔记(含完整代码实现)
c语言·数据结构·数据库·c++·笔记·b树·算法
sunoo-2292 小时前
【C 语言标准 IO 入门】第二天学习笔记:文件操作核心函数 + 实战案例 + 踩坑合集
linux·笔记·vscode·学习
疯狂打码的少年2 小时前
【数据结构】图的应用:最短路径(Dijkstra / Floyd)
数据结构·笔记·算法
Wang's Blog2 小时前
PostgreSQL笔记29:事务隔离级别深度解析——从MVCC快照到SSI可串行化
数据库·笔记·postgresql
Fa_Mian_Tuan2 小时前
图论基础 | 邻接多重表原理剖析 + 完整可运行C语言代码(插边/删边/释放)
c语言·数据结构·笔记·算法·图论
Eloudy2 小时前
Ubuntu 22.04 从源码编译安装 ROS 2 Jazzy 笔记
linux·笔记·ubuntu
_Narcissus_3 小时前
B+树的概念和操作笔记(含完整代码实现)
c语言·数据结构·数据库·c++·笔记·b树·算法
Wang's Blog3 小时前
PostgreSQL笔记33: 索引底层原理、扫描类型与属性体系深度解析
数据库·笔记·postgresql
是上好佳佳佳呀3 小时前
【深度学习|DAY05】卷积神经网络深度学习笔记
笔记·深度学习·cnn