|
|
|
|
>原型 (prototype)：为其他对象提供共享属性的对象。
|
|
|
|
|
|
|
|
|
|
JavaScript 是一门基于原型的语言，它靠着原型这一个特殊的概念实现了面对对象，在一众基于“类”的面对对象语言中脱颖而出，可以说原型就是 JavaScript 语言的基石。
|
|
|
|
|
|
|
|
|
|
那么原型是什么？开头那句话是 ECMAScript 5.1 中对原型做出的概述，但是深入到 JavaScript 的学习中会看到关于原型总会有不同的样子出现例如 `prototype`、`__proto__` ，它们分别代表着什么？在 JavaScript 中又有着怎样的作用？
|
|
|
|
|
|
|
|
|
|
## `prototype`、`[[prototype]]` 和 `__proto__` 都是什么？
|
|
|
|
|
|
|
|
|
|
`[[prototype]]` 是所有对象都具有的私有属性，这个属性的实现方式取决于各个平台，而对于浏览器环境而言，以 Chrome 为例，定义了 `__proto__` 访问器属性(getter、setter) 指向 `[[prototype]]`，也就是说在对象中，通过 `__proto__` 访问到的就是 `[[prototype]]` 私有属性
|
|
|
|
|
|
|
|
|
|
**注意： 这个属性由浏览器实现，且在 Web 标准中被删除，为保证 Web 浏览器的兼容性，建议使用 `Object.getPrototypeOf()` 替代**
|
|
|
|
|
|
|
|
|
|
`prototype` 是函数独有的属性，无论什么时候只要创建了新的函数，就会根据特定的规则为该函数创建一个 `prototype` 属性，这个属性指向一个私有的对象，这个对象也有着一个 `constructor` 属性指回该函数，同时这个对象也具有 `__proto__` 属性指向 `Object.prototype`
|
|
|
|
|
|
|
|
|
|
当一个对象通过 new 被实例化出来，那么这个对象的 `[[prototype]]` 属性也就是 `__proto__` 会被指向该函数的 `prototype` 属性，这是 JavaScript 实现面对对象的基石
|
|
|
|
|
|
|
|
|
|
>ECMAScript 5.1:
|
|
|
|
|
>当构造函数创建一个对象后，该对象隐式引用构造函数的 `prototype` 属性用以解决对象的属性引用。构造函数的 `prototype` 属性可以通过 `constructor.prototype` 表达式来访问，同时添加在该对象的原型里的属性会通过继承的方式与所有继承此原型的对象共享。或者，可以使用内置函数 `Object.create()` 明确指定原型来创建一个新对象
|
|
|
|
|
|
|
|
|
|
补充：并非所有对象都会具有 `[[prototype]]` 属性，你可以用 Object.create(null) 方法创建出一个没有原型的对象
|
|
|
|
|
|
|
|
|
|
![[深入 JavaScript 原型思考.png]]
|
|
|
|
|
参考文档：
|
|
|
|
|
- [\_\_proto\_\_ 和 prototype 到底有什么区别](https://juejin.cn/post/6844903869428793358)
|
|
|
|
|
- [所有javascript对象都有prototype还是仅仅函数对象有prototype？](https://segmentfault.com/q/1010000007980024)
|
|
|
|
|
- [ECMAScript5.1中文版](http://yanhaijing.com/es5/#book)
|
|
|
|
|
- [MDN Object.prototype.\_\_proto\_\_](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/proto)
|
