天天看點
傳回

了解JavaScript原型和原型鍊

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

（原文連結https://www.cnblogs.com/piaobodewu/p/13795077.html）

精典圖

了解JavaScript原型和原型鍊

 注意：

（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

了解JavaScript原型和原型鍊
 機器1号可不得了，它是JS世界的第一個對象，它是真正的萬物始祖。它擁有的性質，是所有的對象都有的。

__proto__

是什麼呢？是“生”的意思，或者換成專業點的叫法“繼承”.

有中生有

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

了解JavaScript原型和原型鍊
 通過object創造對象，Object制造對象時候，需要有一個模版，現在隻有機器1号，它就取了機器1号當模版。圖中的

prototype

就代表模闆對象。

通過

new

 指令。按下“new”按鈕，新的對象就造出來了。var obj = new Object();
了解JavaScript原型和原型鍊
 Object通過（

prototype）

模闆創造new對象，對象通過（_proto_）繼承模闆，

 有生萬物

（注：

__proto__

 用

[p]

 來代替）
了解JavaScript原型和原型鍊

Object

 也指向了機器2号，這是因為機器2号是負責造對象的，當然也負責造

Object

對象

Object有自己的模闆：機器1号。而

String、Number、Boolean、Array

它們有模闆嗎？

其實機器2号在建立它們的時候并不是直接建立它們的，而是先建立了對應對象的機器作為模闆，然後再由各自的機器來建立它們。

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

了解JavaScript原型和原型鍊

  • 機器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
了解JavaScript原型和原型鍊
  • 機器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()

為例，于是JavaScript的世界的變成了下面的樣子：

了解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号

控制的

回到現實

了解JavaScript原型和原型鍊

 可以被用來

new

的對象或函數，我們都可以稱之為構造函數，每個構造函數都和它的機器(也就是

XXX.prototype

)通過

constructor

相連,我們來畫出構造函數和它們的

constructor
了解JavaScript原型和原型鍊

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

  • 子類的__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除外），你可以把它了解為對象的預設屬性和方法。

了解JavaScript原型和原型鍊

 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 對象有一個指向一個原型對象的鍊。

當試圖通路一個對象的屬性時，它不僅僅在該對象上搜尋，還會搜尋該對象的原型，以及該對象的原型的原型，依此層層向上搜尋，直到找到一個名字比對的屬性或到達原型鍊的末尾。

了解JavaScript原型和原型鍊

 當你用new Object或者直接定義一個對象時，它的原型鍊就是：

o ==》 Object.prototype ==》 null;o._proto_==Object.prototype
              通路o上沒有的屬性或方法時，JS會往Object.prototype上尋找該屬性和方法。
如果有則直接傳回，如果沒有，方法則報錯，這個方法未定義，屬性則傳回undefined               
o.__proto_指向原型對象，              原型對象              被指派給建立的對象_proto_屬性中.o對象沒有prototype
              
  
了解JavaScript原型和原型鍊
了解JavaScript原型和原型鍊
了解JavaScript原型和原型鍊

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

Person是構造函數，              tsrot函數對象(構造對象)。用構造函數（構造函數我們一般首字母大寫）建立一個對象時，它的原型鍊就是

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

 tsrot.__proto__=Person.prototype;

Person.prototype.__proto__=Object.prototype;

了解JavaScript原型和原型鍊

Parent和child都是構造函數，

了解JavaScript原型和原型鍊
了解JavaScript原型和原型鍊

fun是一個函數對象，它是由Function構造函數new的

<prototype與__proto__>

在Javascript中，每個函數都有一個原型屬性prototype指向自身的原型，而由這個函數建立的對象也有一個__proto__屬性指向這個原型，

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

是以這個對象也會有一個__proto__指向自己的原型，這樣逐層深入直到Object對象的原型，這樣就形成了原型鍊。

普通對象沒有prototype，但有__proto__屬性。

了解JavaScript原型和原型鍊
了解JavaScript原型和原型鍊
了解JavaScript原型和原型鍊

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

Person 就是一個構造函數，使用 new 建立了一個執行個體對象 person

了解JavaScript原型和原型鍊

prototype

　　每個函數都有一個 prototype 屬性

了解JavaScript原型和原型鍊
了解JavaScript原型和原型鍊

proto

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

了解JavaScript原型和原型鍊
了解JavaScript原型和原型鍊

constructor

　　每一個原型都有一個 constructor 屬性指向關聯的構造函數，執行個體原型指向構造函數

了解JavaScript原型和原型鍊
了解JavaScript原型和原型鍊
了解JavaScript原型和原型鍊

 執行個體與原型

了解JavaScript原型和原型鍊

 原型與原型

了解JavaScript原型和原型鍊
Person.prototype也是一個對象，具有_proto_屬性指向Object的原型
了解JavaScript原型和原型鍊

 原型鍊

了解JavaScript原型和原型鍊

出處：轉載請注明 https://www.cnblogs.com/sun-null/

jquery 前端
上一篇: 資料庫設計
下一篇: DevOps概念

繼續閱讀