iT邦幫忙

0

JavaScript很難搞懂的底層機制原型鏈的 __proto__ 、prototype

  • 分享至 

  • xImage
  •  

函式(特殊物件)的 __proto__與prototype

在 JavaScript 中,這一切都在函式被定義的那一刻,底層就自動完成「掛載」了。
當你寫下這行程式碼:

function ree() { console.log("a") }

儘管你只寫了一行邏輯,JavaScript 引擎在後台會自動幫你做以下兩件事:

  1. 創建 prototype(給子孫的遺產)
    引擎會自動幫 ree 建立一個 prototype 物件。這個物件預設只有一個屬性叫做 constructor,它會指回 ree 自己。

目的是: 萬一你哪天心血來潮,寫了 new ree(),這個產出的新物件就有原型可以繼承。

  1. 創建 proto(對祖先的連結)
    因為 ree 是一個「函式物件」,它必須繼承函式該有的所有功能(例如 call(), apply(), bind())。

底層操作: 引擎會把 ree 的 proto 指向內建的 Function.prototype。

一般物件的__proto__

無論你用哪種方式定義物件,proto 都會在你寫下的那一刻被「植入」。

情況 A:使用物件字面值(最常見)

const createobj = { name: "Gemini" };

在你寫完 {} 的瞬間,JS 引擎就幫你連好了線: createobj.proto -> Object.prototype (這是所有物件的終極祖先)。

情況 B:使用 new 關鍵字(建構子)

const myRobot = new Robot();

在 new 發生的那一刻,JS 引擎會幫 myRobot 建立 proto: myRobot.proto -> Robot.prototype。

這就是為什麼明明沒寫 hasOwnProperty 這個方法,卻可以執行 createobj.hasOwnProperty('name'),因為它是順著 proto 去跟 Object.prototype 借來的。

在瀏覽器印出Function.prototype,為何看到的是 ƒ () { [native code] }?

你在瀏覽器控制台看到的這行字,代表它是 「由瀏覽器引擎(如 Chrome 的 V8)用 C++ 或其他底層語言實作的內建函式」。

為什麼看到的是 [native code]?
瀏覽器(如 Chrome, Edge)是用 C++ 寫成的。為了追求極致的效能,JavaScript 的核心功能(如 Array 的排序、Function 的 call、Object 的 toString)並不是用 JavaScript 寫的,而是由瀏覽器引擎直接實作好的。

安全與效能: 這些代碼已經被編譯成機器碼,瀏覽器不會把底層的 C++ 原始碼暴露給 JS 環境看。
標記: 當你嘗試打印這些函式時,JS 引擎就會回傳 ƒ () { [native code] },意思就是:「這是在我(瀏覽器)體內直接跑的,你別想看原始碼」。

它的特性:

它本身「是一個函式」,所以顯示 f ()。

它裡面存滿了所有函式通用的方法(如 bind, call, apply)。

它是所有自定義函式(像是你的 ree)的 proto 指向對象。

這部份真的要看很多次才會稍微懂,個人感覺難度勝過物件導向OOP..我至少看了五次以上的相關資料.../images/emoticon/emoticon56.gif


圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言