ECMAScript原型
原型、构造函数、new、class 之间关系的导航笔记。
#type / synthesis
#status / growing
#resource / javascript
#resource / ecmascript
[!info] related notes
- 所属 MOC: ecmascript-moc, ecmascript-object-oriented
- 原子概念: js原型和原型链, js构造函数, js-new, proto-prototype-constructor, js-class, this-keyword
- 认知纠偏: 为什么说-js-是基于原型而不是基于类
ECMAScript原型
这篇笔记只保留原型主题的关系入口,不再和原子笔记重复展开定义。
建议阅读顺序
这组概念的关系
- js对象 解释对象和属性访问
- js原型和原型链 解释属性如何沿原型链查找与共享
- js构造函数 解释如何批量创建对象
- js-new 解释实例如何接到构造函数的
prototype - proto-prototype-constructor 单独拆清三个常混淆名词
- js-class 说明
class是原型机制的语法层
一句话结论
JavaScript 的对象系统底层仍然是原型链,class 只是更易读的写法。
面试要点
来自 javascript-prototype-chain-interview-question 的面试视角整理。
一句话回答
原型链是对象属性查找时沿原型逐级向上查找的机制,而 new 的核心作用是创建实例对象,并把实例连接到构造函数的 prototype 上。
回答原型链时最稳的说法
- 对象访问属性时,先看自己有没有
- 没有就沿着内部原型继续往上找
- 一直找到
Object.prototype或null
回答 new 时最稳的说法
可以按步骤讲:
- 创建一个新对象
- 让新对象的原型指向构造函数的
prototype - 用新对象作为
this执行构造函数 - 返回这个对象(除非构造函数显式返回对象)
面试里的常见误区
把 __proto__ 当成原型本身
更准确地说,它只是实例和原型对象之间的连接表现。
把 class 当成完全不同的对象模型
JavaScript 底层仍然是原型机制,class 只是更现代的写法。
最短记忆方式
原型链解决“属性怎么找”,new 解决“实例怎么接到原型上”。