JS基礎-該如何理解原型、原型鏈？

来源:https://www.cnblogs.com/OBkoro1/archive/2019/08/26/11411227.html
-Advertisement-
Play Games

JS的原型、原型鏈一直是比較難理解的內容，不少初學者甚至有一定經驗的老鳥都不一定能完全說清楚，更多的"很可能"是一知半解，而這部分內容又是JS的核心內容，想要技術進階的話肯定不能對這個概念一知半解，碰到問題靠“猜”，卻不理解它的規則！ prototype 只有函數有prototype屬性 Objec ...


JS的原型、原型鏈一直是比較難理解的內容，不少初學者甚至有一定經驗的老鳥都不一定能完全說清楚，更多的"很可能"是一知半解，而這部分內容又是JS的核心內容，想要技術進階的話肯定不能對這個概念一知半解，碰到問題靠“猜”，卻不理解它的規則！

prototype

只有函數有prototype屬性

let a = {}
let b = function () { }
console.log(a.prototype) // undefined
console.log(b.prototype) // { constructor: function(){...} }

Object.prototype怎麼解釋？

其實Object是一個全局對象，也是一個構造函數，以及其他基本類型的全局對象也都是構造函數：

function outTypeName(data, type) {
    let typeName =  Object.prototype.toString.call(data)
    console.log(typeName)
}
outTypeName(Object) //[object Function]
outTypeName(String) // [object Function]
outTypeName(Number) // [object Function]

為什麼只有函數有prototype屬性

JS通過new來生成對象，但是僅靠構造函數，每次生成的對象都不一樣。

有時候需要在兩個對象之間共用屬性，由於JS在設計之初沒有類的概念，所以JS使用函數的prototype來處理這部分需要被共用的屬性，通過函數的prototype來模擬類：

當創建一個函數時，JS會自動為函數添加prototype屬性，值是一個有constructor的對象。

以下是共用屬性prototype的慄子：

function People(name) {
    this.name = name
}
People.prototype.age = 23 // 歲數
// 創建兩個實例
let People1 = new People('OBKoro1')
let People2 = new People('扣肉')
People.prototype.age = 24 // 長大了一歲
console.log(People1.age, People2.age) // 24 24

為什麼People1和People2可以訪問到People.prototype.age？

原因是：People1和People2的原型是People.prototype，答案在下方的：構造函數是什麼以及它做了什麼。

原型鏈

__proto__和Object.getPrototypeOf(target)： 對象的原型

__proto__是對象實例和它的構造函數之間建立的鏈接，它的值是：構造函數的`prototype。

也就是說：__proto__的值是它所對應的原型對象，是某個函數的prototype

Object.getPrototypeOf(target)全等於__proto__。

它是ES6的標準，相容IE9，主流瀏覽器也都支持，MDN，本文將以Object.getPrototypeOf(target)指代__proto__。

不要再使用__proto__:

本段摘自阮一峰-ES6入門，具體解析請點擊鏈接查看

  1. __proto__屬性沒有寫入 ES6 的正文，而是寫入了附錄。

  2. 原因是它本質上是一個內部屬性，而不是一個正式的對外的 API，只是由於瀏覽器廣泛支持，才被加入了 ES6。

  3. 標準明確規定，只有瀏覽器必須部署這個屬性，其他運行環境不一定需要部署，而且新的代碼最好認為這個屬性是不存在的。

  4. 所以無論從語義的角度，還是從相容性的角度，都不要使用這個屬性，應該使用：Object.getPrototypeOf(target)（讀操作）、Object.setPrototypeOf(target)（寫操作）、Object.create(target)（生成操作）代替

構造函數是什麼、它做了什麼

出自《你不知道的在js》：在js中, 實際上並不存在所謂的'構造函數'，只有對於函數的'構造調用'。

上文一直提到構造函數，所謂的構造函數，實際上就是通過關鍵字new來調用的函數：

let newObj = new someFn() // 構造調用函數

構造/new調用函數的時候做了什麼：

  1. 創建一個全新的對象。
  2. 這個新對象的原型(Object.getPrototypeOf(target))指向構造函數的prototype對象。
  3. 該函數的this會綁定在新創建的對象上。
  4. 如果函數沒有返回其他對象，那麼new表達式中的函數調用會自動返回這個新對象。
  5. 我們稱這個新對象為構造函數的實例。

原型繼承就是利用構造調用函數的特性：

SubType.prototype = new SuperType();  // 原型繼承：SubType繼承SuperType
// 掛載SuperType的this和prototype的屬性和方法到SubType.prototype上
  1. 構造調用的第二點：將新對象的Object.getPrototypeOf(target)指向函數的prototype
  2. 構造調用的第三點：該函數的this會綁定在新創建的對象上。
  3. 新對象賦值給SubType.prototype

原型類型有個缺點：多個實例對引用類型的操作會被篡改。

因為每次實例化引用類型的數據都指向同一個地址，所以它們讀/寫的是同一個數據，當一個實例對其進行操作，其他實例的數據就會一起更改。

原型鏈是什麼

來看個例子：

js function foo() { } const newObj = new foo() // 構造調用foo 返回一個新對象 const newObj__proto__ = Object.getPrototypeOf(newObj) // 獲取newObj的原型對象 newObj__proto__ === foo.prototype // true 驗證newObj的原型指向foo const foo__proto__ = Object.getPrototypeOf(foo.prototype) // 獲取foo.prototype的原型 foo__proto__ === Object.prototype // true foo.prototype的原型是Object.prototype `` 如果用以前的語法，從`newObj`查找`foo`的原型，是這樣的：js
newObj.__proto__.__proto__ // 這種關係就是原型鏈
```

可以用以下三句話來理解原型鏈：

  1. 每個對象都擁有一個原型對象: newObj的原型是foo.prototype。
  2. 對象的原型可能也是繼承其他原型對象的: foo.prototype也有它的原型Object.prototype。
  3. 一層一層的，以此類推，這種關係就是原型鏈。

一個對象是否在另一個對象的原型鏈上

如果一個對象存在另一個對象的原型鏈上，我們可以說：它們是繼承關係。

判斷方式有兩種，但都是根據構造函數的prototype是否在原型鏈上來判斷的：

  1. instanceof: 用於測試構造函數的prototype屬性是否出現在對象的原型鏈中的任何位置

語法：object instanceof constructor

let test = function () { }
let testObject = new test();
testObject instanceof test // true test.prototype在testObject的原型鏈上
 testObject instanceof Function // false Function.prototype 不在testObject的原型鏈上
testObject instanceof Object // true Object.prototype在testObject的原型鏈上
  1. isPrototypeOf：測試一個對象是否存在於另一個對象的原型鏈上

語法：prototypeObj.isPrototypeOf(object)

let test = function () { }
let testObject = new test();
test.prototype.isPrototypeOf(testObject) // true test.prototype在testObject的原型鏈上
Object.prototype.isPrototypeOf(testObject) // true Object.prototype在testObject的原型鏈上

原型鏈的終點: Object.prototype

Object.prototype是原型鏈的終點，所有對象都是從它繼承了方法和屬性。

Object.prototype沒有原型對象：

const proto = Object.getPrototypeOf(Object.prototype) // null

下麵是兩個驗證例子，有疑慮的同學多寫幾個測試用例印證一下。

字元串原型鏈的終點：Object.prototype

let test = '由String函數構造出來的'
let stringPrototype = Object.getPrototypeOf(test) // 字元串的原型
stringPrototype === String.prototype // true 字元串的原型是String對象
Object.getPrototypeOf(stringPrototype) === Object.prototype // true String對象的原型是Object對象

函數原型鏈的終點:Object.prototype

let test = function () { }
let fnPrototype = Object.getPrototypeOf(test)
fnPrototype === Function.prototype // true test的原型是Function.prototype
Object.getPrototypeOf(Function.prototype) === Object.prototype // true

原型鏈用來做什麼？

屬性查找：

如果試圖訪問對象(實例instance)的某個屬性,會首先在對象內部尋找該屬性,直至找不到,然後才在該對象的原型(instance.prototype)里去找這個屬性，以此類推

我們用一個例子來形象說明一下：

let test = '由String函數構造出來的'
let stringPrototype = Object.getPrototypeOf(test) // 字元串的原型
stringPrototype === String.prototype // true 字元串的原型是String對象
Object.getPrototypeOf(stringPrototype) === Object.prototype // true String對象的原型是Object對象

當你訪問test的某個屬性時，瀏覽器會進行以下查找：

  1. 瀏覽器首先查找test 本身
  2. 接著查找它的原型對象：String.prototype
  3. 最後查找String.prototype的原型對象：Object.prototype
  4. 一旦在原型鏈上找到該屬性，就會立即返回該屬性，停止查找。
  5. 原型鏈上的原型都沒有找到的話，返回undefiend

這種查找機制還解釋了字元串為何會有自帶的方法: slice/split/indexOf等。

準確的說：

  • 這些屬性和方法是定義在String這個全局對象/函數上的。
  • 字元串的原型指向了String函數的prototype。
  • 之後通過查找原型鏈，在String函數的prototype中找到這些屬性和方法。

拒絕查找原型鏈：

hasOwnProperty: 指示對象自身屬性中是否具有指定的屬性

語法：obj.hasOwnProperty(prop)

參數: prop 要查找的屬性

返回值: 用來判斷某個對象是否含有指定的屬性的Boolean。

let test ={ 'OBKoro1': '扣肉' }
test.hasOwnProperty('OBKoro1');  // true
test.hasOwnProperty('toString'); // false test本身沒查找到toString

這個API是掛載在object.prototype上，所有對象都可以使用，API會忽略掉那些從原型鏈上繼承到的屬性。

擴展：

實例的屬性

你知道構造函數的實例對象上有哪些屬性嗎？這些屬性分別掛載在哪個地方？原因是什麼？

function foo() {
    this.some = '222'
    let ccc = 'ccc'
    foo.obkoro1 = 'obkoro1'
    foo.prototype.a = 'aaa'
}
foo.koro = '扣肉'
foo.prototype.test = 'test'
let foo1 = new foo() // `foo1`上有哪些屬性,這些屬性分別掛載在哪個地方
foo.prototype.test = 'test2' // 重新賦值

上面這道是考察JS基礎的題，很多人都沒說對，原因是沒有徹底掌握this、原型鏈、函數。

想一下再看解析：

想一下再看解析：

想一下再看解析：

想一下再看解析：

想一下再看解析：

  1. this.some：foo1對象的屬性

通過構造調用foo的this指向foo1，所以this.some掛載在foo1對象下。

屬性查找: foo1.some

foo1.some直接讀取foo1的屬性。

  1. foo1.test、foo1.a：foo1對象的原型

根據上文提到的：構造/new調用函數的時候會創建一個新對象(foo1)，自動將foo1的原型(Object.getPrototypeOf(foo1))指向構造函數的prototype對象。

構造調用會執行函數，所以foo.prototype.a = 'aaaaa'也會執行，單就賦值這個層面來說寫在foo外面和寫在foo裡面是一樣的。

屬性查找：foo1.test、foo1.a

  • foo1本身沒有找到,繼續查找
  • foo1的原型Object.getPrototypeOf(foo1)上找到了a和test，返回它們，停止查找。
  1. foo1.obkoro1和foo1.koro：返回undefined

靜態屬性: foo.obkoro1、foo.koro

函數在JS中是一等公民，它也是一個對象, 用來模擬類。

這兩個屬性跟foo1沒有關係，它是對象foo上的兩個屬性(類似函數的:arguments/prototype/length等屬性)，稱為靜態屬性。

它們只能通過foo.obkoro1和foo.koro來訪問。

原型對象改變，原型鏈下游獲取的值也會改變

上面那個例子中的foo1.test的值是什麼？

foo.prototype.test = 'test'
let foo1 = new foo() // `foo1`上有哪些屬性,這些屬性分別掛載在哪個地方
foo.prototype.test = 'test2' // 重新賦值

foo1.test的值是test2，原因是：foo1的原型對象是Object.getPrototypeOf(foo1)存的指針，指向foo.prototype的記憶體地址，不是拷貝，每次讀取的值都是當前foo.prototype的最新值。

列印foo1：

小結

寫了好幾天，之前網上很多圖文博客，那些線指來指去，就我個人看來還是比較難以理解的，所以本文純文字的形式來描述這些概念，相信認真看完的同學肯定都有所收穫，如果沒看懂的話，建議多看幾遍，這部分概念真的很重要！

PS：實際上還有很多引申出來的東西沒寫全，準備放到其他文章中去寫。

覺得我的博客對你有幫助的話，就給我點個Star吧！

前端進階積累、公眾號、GitHub、wx:OBkoro1、郵箱：[email protected]

以上2019/8/25

作者：OBKoro1

參考資料：

MDN:對象原型

JS原型鏈與繼承別再被問倒了

從__proto__和prototype來深入理解JS對象和原型鏈

前端進階積累、公眾號、GitHub、wx:OBkoro1、郵箱：[email protected]


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • js 設計模式——單例模式
    單例模式 保證一個類僅有一個實例，並提供一個訪問它的全局訪問點。 單例模式是一種常用的模式，有一些對象我們往往只需要一個，比如線程池、全局緩存、瀏覽器中的 window 對象等。 JavaScript 中的單例模式 1. 使用命名空間 在JavaScript里，實現單例的方式有很多種，其中最簡單的一 ...
  • CSS文本超過兩行用省略號代替
    1、只顯示一行，超出部分用省略號 2、只顯示兩行(或多行)，超出部分用省略號 ...
  • BOM之定時器
    JavaScript中的時間是通過定時器控制的，他們分別是window.setInterval和window.setTimeout，我們當然可以省略window，直接使用方法名稱調用。 一 setTimeout 在等待指定的毫秒數後執行函數，語法如下： setTimeout(code/functio ...
  • 前端對base64編碼的理解，原生js實現字元base64編碼
    @ "TOC" 常見對base64的認知(不完全正確) 首先對base64常見的認知，也是須知的必須有以下幾點 base64是一種圖片編碼方式，用一長串超長的字元串表示圖片 在載入的時候會直接以字元串的形式載入出來，減少了圖片載入的http請求 正常載入伺服器靜態資源的時候都應該是通過http請求回 ...
  • 輕鬆pick移動開發第二篇，rem佈局
    一、為什麼要使用rem佈局 前面我寫了flex佈局的優點，分配伸縮盒容器中子盒子占的份數及排列方式，使其不受屏幕縮放的影響，使佈局變得簡單。然而，在有些時候，不可避免要給盒子設置高度的值，怎麼讓高度也隨著屏幕大小變化等比例縮放呢？另外，怎麼讓頁面文字大小也隨著屏幕的大小變化而縮放呢？rem佈局就可以 ...
  • JavaScript數值和字元串、特殊字元
    一、JavaScript數值 1、整數和浮點數 根據國際標準 IEEE 754，64 位浮點數格式的 64 個二進位位中，第0 位到第 51 位儲存有效數字部分，第 52 到第 62 位儲存指數部分，第 63 位是符號位，0 表示正數，1 表示負數。 （圖片：海碼歌） 1)、 JavaScript ...
  • 評論的sql語句實現
    自己評論的信息可以刪除，別人評論的信息不可刪除sql 實現： 主要實現的語句：c.person_id=？ as flag 在前臺進行判斷。 f :不是自己評論的信息 t:是自己評論的信息 顯示的效果如下： ...
  • 測試微信小程式頁面的生命周期
    前言：本人是一個初學者，也是第一次寫博客，敲鍵盤的時候還不知道發佈後是什麼效果，希望內容給其他初學的同學一點幫助，同時加深自己的理解。這篇隨筆講的是Page頁面的生命周期，在開發中是基礎中的基礎，很容易理解。 先給出直達官方的鏈接： 1、小程式頁面生命周期圖：https://developers.w ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類