(Day18) 原型特性与继承

什麽是原型？

JavaScript 这个语言有一个特性，所以资料其实都是以『物件』方式做建立，因此也可以说 JavaScript 所有资料都有原型，而到底什麽是原型？

单纯用文字比喻的话，原型其实像是蓝图，我们可以在原型设定各种属性、方法，用来帮助我们建立实体资料，而实体资料则会带者原型上的属性以及方法，以下面图片为例：

上述图片只是帮助思考『原型的概念』而已，实际程序码来说的话，我们会使用函示建构式、ES6 的 Class 来当作衣服的原型，而实体资料则是：

const blackT = {
	color:'black',
	material:'棉',
	size:'L'
}
const darkBlueT = {
	color:'darkBlue ',
	material:'聚酯纤维',
	size:'XL'
} 

这章节还不会讲到如何建立原型，不过我们先将 blackT 物件丢到 console 并且再次呼叫，会显示刚刚建立的 blackT 物件，不过物件的属性底下还会有 [[Prototype]] 的东西，而这个 [[Prototype]] 其实就是今天介绍的原型。

值得一提的是原型本身还可以再继承原型，因此这样一段一段，因此又被称做原型链，继续使用衣服图做范例：

P.S 过去文章会写做 __proto__ 而不是 [[Prototype]] ，这是因为 JavaScript 这语言本来就有对每笔资料设置 [[prototype]] ，ES5 之前并没有标准方法来查询这个隐藏属性，因此浏览器使用 __proto__ 这个方法来达成相关需求。

现在因为浏览器更新，所以 __proto__ 改为正式的 [[Prototype]] 不过实际上还是可以使用 __proto__ 等等相关方法，以上方 blackT 为例，使用 console.log(blackT.__proto__) 仍可以查到他的相关原型。

原型的特性

以下是原型的特性:

• 一样具有物件的特性
• 向上查找特性
• 原型可共用方法与属性

这边直接使用程序码举例比较好懂

const array = [1,2,3]
console.log(array) 

这边的 array 就是个实体，点开 console 上的 array 里面的 [[Prototype]] 就是原型，这点上面有提到。

而 array 中的 [[Prototype]] 有着许多我们常用的 阵列方法，比如 forEach() 、 filter() ，这些方法正是透过原型继承来的方法，这也提到一个重点：『若实体要取用原型中的方法，便是使用 . 这个运算子来使用』，这个重点也和上面提到的 『一样具有物件的特性』是相同的。

眼尖的朋友就会发现在 forEach、 filter 这些方法底下，还有一层 [[Prototype]] ，这正是上面提到的，原型上还有原型，同时也是『原型向上查找的特性』，同时不管是阵列、还是函示在最上层的原型都会是物件。

接下来可以验证一下「原型的方法与属性是共用的」这一点

const array = [1,2,3]

array.__proto__.dobuleNum= function() {
	return this.map(function(item) {
	return item*2})
}
console.log(array.dobuleNum()) //[2, 4, 6]

范例中使用 __proto__ 来新增 dobuleNum 这个方法，而 dobuleNum 就是将阵列中的值 ＊2 在回传。透过 console.log(array.dobuleNum()) 也会确实看到回传 [2,4,6] 的值。

接者我们在新增一个阵列变数来试试看上面观念是否正确。

const newArray = [55,66,77]
console.log(newArray .dobuleNum()) //[110, 132, 154]

最後这边要提醒一下，实做中是不建议使用 __proto__ 来制作原型方法，主要是这方法会污染所有原型，并让原型来源难以查找、确认，比较实际的方法是使用原型的建构式，这写是下一章节的主题。

参考文献

• JavaScript 核心篇 (六角学院）
• JavaScript 核心观念(48)-继承与原型链 - 原型在哪里？