理解JavaScript原型和原型鏈

理解JavaScript原型和原型鏈 （資料整理，個人學習）

（原文鏈接https://www.cnblogs.com/piaobodewu/p/13795077.html）

精典圖

 注意：

（prototype-原型, _proto_-繼承）

1：只有Functions集合中的function有prototype屬性，

2：function的prototype指向Prototypes集合中的實體，

3：Prototypes集合中的實體constructior屬性指向Functions集合中的function，

4：（new xx()）物件中有_proto_屬性，

5：（new xx()）物件_proto_指向Prototypes集合中的實體

6：Functions集合中的function在new 的同時都繼承（_proto_）同一個Prototypes集合中的function的實體，

一切起源于null

 機器1號可不得了，它是JS世界的第一個物件，它是真正的萬物始祖，它擁有的性質，是所有的物件都有的，
__proto__是什么呢？是“生”的意思，或者換成專業點的叫法“繼承”.

有中生有

一生二，二生三，三生萬物

 通過object創造物件，Object制造物件時候，需要有一個模版，現在只有機器1號，它就取了機器1號當模版，圖中的prototype就代表模板物件，

通過new命令，按下“new”按鈕，新的物件就造出來了，var obj = new Object();

 Object通過（prototype）模板創造new物件，物件通過（_proto_）繼承模板，

 有生萬物

（注：__proto__用[p]來代替）

 Object也指向了機器2號，這是因為機器2號是負責造物件的，當然也負責造Object物件

Object有自己的模板：機器1號，而String、Number、Boolean、Array它們有模板嗎？

其實機器2號在創建它們的時候并不是直接創建它們的，而是先創建了對應物件的機器作為模板，然后再由各自的機器來創建它們，

機器2號總體負責制造所有的物件，包含Object、String、Number、Boolean、Array，甚至還有之后的Function，當然它只是負責制造，并不一定會親手去制造物件，可以通過制造對應的機器來幫助它制造物件

• 機器1號制造了機器2號，機器2號總體負責各種物件的制造
• 但是機器2號并不是直接造各種物件，而是通過先建造對應的機器（模板），再由對應的機器來制造物件（繼承），如：對于String，機器2號先制造了機器String號，然后由機器String號來制造String，機器2號只負責總體控制
• 雖然機器2號制造了各種各樣的機器，但是因為機器2號是由機器1號制造的，所以這些被制造的機器所屬權還是歸于機器1號的，畢竟機器1號是始祖級的，
• 物件和對應的機器，通過prototype來連接，如：對于String，機器2號和String通過prototype連接
• 每個機器都有且只有一個的物件，每個物件也都有且只有一個機器作為模板

萬物缺活力-Function的制造

• 它是由機器2號親手制造的，所以它們之間有prototype相連
• 而機器2號又是制造所有物件的負責者，所以它們之間有__proto__相連
• Function.__proto__ === Function.prototype

• 機器1號 = Object.prototype（機器1號是Object的模板）
• 機器2號 = Function.prototype(機器2號是Function的模板)
• 機器String號 = String.prototype(機器String是String的模板)
• Function物件作為一個函式，就會有prototype屬性，該屬性將對應”function () {}”物件，
  Function物件作為一個物件，就有__proto__屬性，該屬性對應”Function.prototype”，
• 也就是說，”Function._proto_ === Function.prototype”，

世界動起來

剛造出來的Function機器很難用，用法就像下面這個

let Foo = new Function("name", "console.log(name)");

Foo('dellyoung'); // 控制臺列印出：dellyoung

語法糖

function Foo(name) { console.log(name); }

Foo('dellyoung'); // 控制臺列印出：dellyoung

以造Foo()為例，于是JavaScript的世界的變成了下面的樣子：

• 機器Foo()號 = Foo.prototype
• [p] = __proto_

Function這個物件比較特殊，它new出來后，就是一個全新的物件了，function Foo()(注意：它等價于 let Foo = new Function())和Object、String、Number等這些物件一樣，都是物件，

既然都是物件，當然function Foo()也是由機器2號來控制制造的，但是機器2號很忙，它沒有精力直接制造function Foo()，機器2號是通過制造出一個制造function Foo()的機器來制造function Foo()，

咱們稱制造function Foo()的機器為機器Foo()號

當然既然是機器，所以機器Foo()號也是由機器1號控制的

回到現實

 可以被用來new的物件或函式，我們都可以稱之為建構式，每個建構式都和它的機器(也就是XXX.prototype)通過constructor相連,我們來畫出建構式和它們的constructor

正式的語言總結一下就是：？

• 子類的__proto__屬性，表示建構式的繼承，總是指向父類，
• 子類prototype屬性的__proto__屬性，表示方法的繼承，總是指向父類的prototype屬性，
• 原型也是一個物件，通過原型可以實作物件的屬性繼承
• 對于所有的物件，都有__proto__屬性，這個屬性對應該物件的原型.

var p = new Person('張三',20);

1. var p={}; 初始化一個物件p，
2. p._proto_=Person.prototype;，將物件p的 __proto__ 屬性設定為 Person.prototype
3. Person.call(p,”張三”,20);呼叫建構式Person來初始化p，關于call/apply使用

總結：

1. 所有的物件都有__proto__屬性，該屬性對應該物件的原型.
2. 所有的函式物件都有prototype屬性，該屬性的值會被賦值給該函式創建的物件的_proto_屬性.
3. 所有的原型物件都有constructor屬性，該屬性對應創建所有指向該原型的實體的建構式.
4. 函式物件和原型物件通過prototype和constructor屬性進行相互關聯.

(原文地址：https://zhuanlan.zhihu.com/p/23026595)

<什么是原型>

JavaScript 中，萬物皆物件！但物件也是有區別的，分為普通物件和函式物件，Object ，Function 是JS自帶的函式物件，

每個物件都有原型（null和undefined除外），你可以把它理解為物件的默認屬性和方法，

 Object：Object是一個函式物件，Object的原型就是一個Object物件，它里面存在著一些物件的方法和屬性，例如最常見的toString方法，

新建物件：用new Object或者{}建的物件是普通物件，它沒有prototype屬性，只有__proto__屬性，它指向Object.prototype，

Array：Array也是一個函式物件，它的原型就是Array.prototype，它里面存在著一些陣列的方法和屬性，例如常見的push，pop等方法，

Function：Function也是一個函式物件，但它有點特殊，它的原型就是一個function空函式，

自定義函式：它的原型就是你給它指定的那個東西，如果你不指定，那它的原型就是一個Object.prototype，

<什么是原型鏈>

在JavaScript 中，每個物件都有一個指向它的原型（prototype）物件的內部鏈接，這個原型物件又有自己的原型，直到某個物件的原型為 null 為止（也就是不再有原型指向），組成這條鏈的最后一環，這種一級一級的鏈結構就稱為原型鏈（prototype chain），

JavaScript 物件是動態的屬性“包”（指其自己的屬性），JavaScript 物件有一個指向一個原型物件的鏈，

當試圖訪問一個物件的屬性時，它不僅僅在該物件上搜尋，還會搜尋該物件的原型，以及該物件的原型的原型，依此層層向上搜索，直到找到一個名字匹配的屬性或到達原型鏈的末尾，

 當你用new Object或者直接定義一個物件時，它的原型鏈就是：

o ==》 Object.prototype ==》 null;o._proto_==Object.prototype
訪問o上沒有的屬性或方法時，JS會往Object.prototype上尋找該屬性和方法，
如果有則直接回傳，如果沒有，方法則報錯，這個方法未定義，屬性則回傳undefined

o.__proto_指向原型物件，原型物件被賦值給創建的物件_proto_屬性中.o物件沒有prototype

 Person所有物件都有公共屬性-Person.prototype = {age:24};

Person是建構式，tsrot函式物件(構造物件)，用建構式（建構式我們一般首字母大寫）建立一個物件時，它的原型鏈就是 

 tsrot ==》 Person.prototype ==》 Object.prototype ==》 null

 tsrot.__proto__=Person.prototype;

Person.prototype.__proto__=Object.prototype;

Parent和child都是建構式，

fun是一個函式物件，它是由Function建構式new的

<prototype與__proto__>

在Javascript中，每個函式都有一個原型屬性prototype指向自身的原型，而由這個函式創建的物件也有一個__proto__屬性指向這個原型，

而函式的原型是一個物件（函式點prototype也是一個普通物件，Function.prototype除外,它是函式物件，但它很特殊，他沒有prototype屬性），

所以這個物件也會有一個__proto__指向自己的原型，這樣逐層深入直到Object物件的原型，這樣就形成了原型鏈，

普通物件沒有prototype，但有__proto__屬性，

(原文地址https://www.cnblogs.com/tg666/p/12059205.html)

Person 就是一個建構式，使用 new 創建了一個實體物件 person

prototype

　　每個函式都有一個 prototype 屬性

proto

　　每一個 javaScript 物件（null除外）都具有的一個屬性叫 proto ,這個屬性會指向該物件的原型

constructor

　　每一個原型都有一個 constructor 屬性指向關聯的建構式，實體原型指向建構式

 實體與原型

 原型與原型

Person.prototype也是一個物件，具有_proto_屬性指向Object的原型

 原型鏈

標籤：其他

上一篇：css3 貝塞爾曲線理解

下一篇：SessionStorage、LocalStorage詳解