追求JS小姊姊系列 Day19 -- 工具力，原来如此：原型与原型链。

前情提要：

建构式模式加上new是很擅长创造的能力。

我：这能力也太强了吧，所以new是只有你才会吗？

（传出熟悉的声音）

阿物件：在讨论这件事，还记得在前面有说过，不论是郑列的那些能力，或是我还没展现的能力，背後都是有血继限界这件事？
我：所以你会什麽？ 血轮眼？

该来说明的能力触发方式

你各位还记得郑列之前使用各种的工具力吗？

忘了工具力可看：追求JS小姊姊系列 Day6 -- 郑列展现的工具力（上）

现在我们要来说明他是如何启动能力的

let x  = ["tool"]; // 假设他是郑列喔

//能力触发方式： .

//以快速整理杂物的方法为例：
x.sort();

看到这里，如果之前有认真看的读者应该会说：
不是啊那个时候明明是写Array.prototype.sort();

你的能力是不是你的能力？hasOwnProperty()

变数本身是否具有这个能力，可透过hasOwnProperty来检查：true代表有，false则代表没有。

let x  = ["tool"]; // 假设他是郑列喔

//帮郑列增加一个属性：工具人的自我宣告
x.isTool = "对啊，我是工具人";
//检查这个能力是不是它的
x.hasOwnProperty("isTool");

那sort呢？

let x  = ["tool"]; // 假设他是郑列喔

//检查这个能力是不是它的
x.hasOwnProperty("sort");

什麽？！那他怎麽这麽会收东西呢？

血继限界的源头 -- 物件原型 prototype

我们平常使用的许多属性与方法
其实是由原型prototype提供，像是Array的各种方法就是由Array.prototype提供（如图）

不论你是用下面任一种方法建立阵列：

1. 建构式 + new
2. 字面值[]

都是原型(prototype)的实例(instance)，所以都会从对应的原型(prototype) 取用方法。

那要怎麽取用呢？

想知更多字面值知识，可参考队友所写:初学者跪着学JavaScript Day9:让我困惑的Literals

血继限界的牵绊 --原型链 prototype chain

这些自己没有的能力，事实上都是透过所谓的原型链 prototype chain ，去往物件原型prototype 去找，怎麽做呢？

用proto找
也就是当我们使用一个方法时，背後实际长得跟我们所见的不太一样。

以sort()方法为例：

let a = [3,1,2]
a.sort()

在JS引擎看来实际是这样 (但平常不会这样写)。

Array.prototype.sort.call(a,undefined);

原型链到底多长？

以下以Array为例

[] 
[].__proto__ //Array 的 prototype
[].__proto__.__proto__ //object 的 prototype
[].__proto__.__proto__.__proto__ //null

有错的话，欢迎交流！我会很感谢
-- to be continued --

那今天就到这边搂！
每天的休息，是为了後面的追求，明天见。

reference:

你懂 JavaScript 吗？#19 原型（Prototype）
[笔记] 了解JavaScript中原型(prototype)、原型链（prototype chain）和继承(inheritance)的概念