JS | 知识点总结 - 原型链

省流,总结图:


原型链

原型链: 通过 proto 进行连接
每个对象都有一个内部属性 \[ Prototype ],在浏览器中可以通过 proto 访问,现代浏览器中推荐用 Object.getPrototypeOf()
在 JS 中, 每个函数都有一个默认的 prototype 属性,这个属性会在该函数被 new 调用时成为新创建实例对象的 proto (即 原型)。
修改 构造函数.prototype <==> 修改 将来通过 new 构造函数() 创建的对象的原型链。

关键公式:

指向构造函数的 prototype:p.proto === Person.prototype

默认指回构造函数本身:Person.prototype.constructor === Person

标准方式:Object.getPrototypeOf(p) === Person.prototype;

p.constructor = p.proto.constructor

(注: p为实例,Person构造函数,Person.prototype为构造函数的原型。)

(注:图中应为 Object.getPrototypeOf() )


原型链继承

Object.create( 新对象的原型对象, 新对象定义属性 ):用现有对象 来作为 新对象的原型(即 proto

const 新对象 = Object.create(现有对象)

等价于

新对象.proto === 现有对象

------》 例子:即 类似于 新对象=实例,对象=原型对象------》实例.proto = 原型对象

例子------ 原型链的总结

Chinese.prototype**.proto** = Human.prototype;

等价于 Chinese.prototype = Object.create (Human.prototype)

等价于 Chinese.prototype = new Human(); 【存在变量同享的污染可能。】


为什么是修改 Chinese 的原型对象 prototype 呢?

修改 构造函数.prototype

<==> 修改 将来通过 new 构造函数() 创建的对象的原型链。

② 让返回的 新函数的原型对象 继承 来自 原函数的原型对象(通过原型链)。


Object.create(proto) 用来创建一个继承自 proto 的新对象

语法 Object.create(prototype, [propertiesObject])

  • prototype :新对象的原型对象(可以为 null

  • propertiesObject (可选):为新对象定义的自身属性(类似于 Object.defineProperties


其他知识点------ 继承:

知识点 说明
构造函数继承 Parent.call(this, args...)
原型链继承 Child.prototype = Object.create(Parent.prototype)
原型方法添加 Constructor.prototype.methodName= function() {}
修正 constructor 否则 子类实例的 constructor 会指向父类. 即 Constructor**.prototype.constructor** = Constructor
prototype vs proto prototype 是构造函数的原型对象,__proto__实例指向原型的属性

原型方法定义 不能带括号,也不要用箭头函数。------》 ✅ xxx**.prototype.** 方法 = function() {...}

(箭头函数,this是外部上下文;方法的不能带括号。X Number.prototype._isPrime**( )** {})


其他知识点

对象属性的遍历(es6中对象新增的总结)

Object.keys(obj):返回一个数组,包含对象自身可枚举的属性名(不含原型链上的属性)

Object.getOwnPropertyNames():返回一个数组,包含指定对象自身 所有的属性(含可枚举和不可枚举的属性)


Object.getPrototypeOf(obj) :获取对象的原型(即 父对象)。------》获取原型链的属性const protoProps = Object.getOwnPropertyNames(Object.getPrototypeOf(obj));


对象的原型 :①隐式原型, \[Prototype]属性 ②显式原型 prototype属性 (图片知识点链接

相关推荐
神仙别闹13 小时前
基于 C++ 实现(控制台)学生成绩管理系统
开发语言·c++
伞伞悦读13 小时前
【第36期】Python 目录与路径详解:pathlib、文件遍历、创建、复制、移动和删除风险
开发语言·python
2601_9669496516 小时前
只拿到股票代码还不够:量化程序到底还需要哪些标的信息?——从数据建模开始理解股票元数据
开发语言·python·数据分析·pandas·量化交易·股票数据·quantdash
m0_7345717617 小时前
深入理解5g <十八>传输块tbsize的计算
开发语言·5g
RAN114267600818 小时前
1.3第一个程序的介绍
开发语言·qt
blue_ice .19 小时前
Verilog DDS 数字信号发生器:DAC 输出模拟波形与 ADC 回采观测
开发语言·单片机·嵌入式硬件·fpga开发
远翔调光芯片^1382879887219 小时前
ECP5702能芯科技PD取电芯片在市场上的优势有哪些?
开发语言·人工智能·单片机·嵌入式硬件·智能家居
高级程序源20 小时前
django大学生创新创业项目管理系统94923-计算机课程设计、毕业设计
javascript·vue.js·spring boot·后端·python·django·课程设计
泡海椒20 小时前
规则引擎对比:JQuick-Java vs Drools 轻量场景选型对比
java·开发语言
泡泡鱼(敲代码中)20 小时前
Python 容器类型学习笔记:列表、元组、字典、集合
开发语言·笔记·python·pycharm