---
# System prepended metadata

title: JavaScript 的原型鍊
tags: [javaScript]

---

# JavaScript 的原型鍊
https://www.youtube.com/watch?v=napDjGFjHR0

簡單好懂
https://www.youtube.com/watch?v=k05GmmWV35A
## create 原型鍊傳遞
![](https://i.imgur.com/TIWgyF0.png)
這樣log
會沒有
還要再進去一層
![](https://i.imgur.com/kAdG658.png)
他是把obj傳遞
他是會在obj上面有一個不能看見的屬性
如何看見呢?

使用getPrototypeOf
![](https://i.imgur.com/7QgBX3v.png)

## defineProperty
![](https://i.imgur.com/EgEcLIO.png)

## 持續調用obj的方法 要返回this
![](https://i.imgur.com/lXwMPkP.png)





## 介紹
原型鍊可以被繼承
 const a = new apple;
 const b  = new apple
 都是繼承apple的原型鍊
 
 所以當你把apple._proto_加上function
 a.b都能用
 你改_proto_.construtor
 兩個也都會改到
 
 要記住每個物件都有原型鍊
 就算string也是
 js中所有東西都是物件
 
 
 只是string那些原型鍊construtor就等於自己
 ex
 
 const arr = new Array();
 
 第一
 arr._proto_ === Array.prototype;
 第二
 Array.prototype.construtor === Array;
 第三
 arr._prototype_.construtor == Array;
 



## prototype  _proto_
prototype是原型
所以是這個的圓形

_proto_是往父層找的
![](https://i.imgur.com/xbtBQc1.png)
## prototype
 裡面有甚麼
 我們所有的能用的function都在裡面
 ![](https://i.imgur.com/mFSSvzy.png)

所以每個array之類都能共用function
而不是每次都new 這樣等於會浪費內存

 ## prototype的_proto_呢(prototype chain)
原生array裡面_proto_是object 因為js一切都是object就是這個道理
![](https://i.imgur.com/5RgKZPz.jpg)

如果object.prototype呢
會null 因為他就是底層


 
 
答案都是true
## 結論
prototype是原型
_proto_往父找
建構子是把原型建構出來
所以你每次都new不同是因為
依照同一個原型 去用建構子建立不同的

Ex

string 的_proto_是 string的prototype

所以當你調用function
順序是
先自己找
找不到去找父層的建構子
再找父層的prototype
然後一直往上到null為止


![](https://i.imgur.com/BREXhMJ.png)

## 繼承
如果是new的
class person{

}

person.prototype 就是自己建立的
但person.prototype._proto_ 是指向object

如果繼承
他的prototype會是父
除非你prototype._proto_才會
![](https://i.imgur.com/joUBBLq.png)


###### tags: `javaScript`