創建型-原型模式

来源:https://www.cnblogs.com/longbensong/archive/2023/03/09/17198551.html
-Advertisement-
Play Games

定義 使用原型實例指定創建對象的種類,並且通過拷貝這些原型創建新的對象。原型模式是一種對象創建型模式 百科。 通俗的說就是原型模式是一種創建型設計模式,指定某個對象(通過某種方式)得到一個新的對象,在記憶體中擁有新的地址,得到的對象與原對象是是相互獨立的,即得到跟原對象一樣的對象 當我們需要兩個一模一 ...


定義

 使用原型實例指定創建對象的種類,並且通過拷貝這些原型創建新的對象。原型模式是一種對象創建型模式---百科。

 通俗的說就是原型模式是一種創建型設計模式,指定某個對象(通過某種方式)得到一個新的對象,在記憶體中擁有新的地址,得到的對象與原對象是是相互獨立的,即得到跟原對象一樣的對象

 當我們需要兩個一模一樣的實例時,使用原型模式非常方便,如果不使用原型模式,按照構造函數的方式初始化對象,我們需要傳兩次一模一樣的參數如:

const dog = new BydCard('byd', '漢', '30w', '2023款')
const dog_copy = new BydCard('byd', '漢', '30w', '2023款')
// 使用原型模式
const dog_copy1 = Object.create(dog)

實現思路

  通過目標對象得到一個全新的新對象,使新對象也具備跟目標對象一樣的能力,這種一般思路有兩種

  1. 深拷貝
  2. 指針引用:自身對象找不到,通過內部屬性引用到目標對象上去找類似鏈表結構的next 指針

其中大多數後臺語言如java 有相關克隆介面規範,javaScript 是通過第二種方式來實現的。

javaScript 中的原型模式

  在原型模式下,當我們想要創建一個對象時,會先找到一個對象作為原型,然後通過克隆原型的方式來創建出一個與原型一樣(共用一套數據/方法)的對象。在 JavaScript 里,Object.create方法就是原型模式的天然實現——準確地說,只要我們還在藉助Prototype來實現對象的創建和原型的繼承,那麼我們就是在應用原型模式

  有的設計模式資料中會強調,原型模式就是拷貝出一個新對象,認為在 JavaScript 類里實現了深拷貝方法才算是應用了原型模式。事實上在 JavaScript 中,通過指針的方式也可以得到目標對象、屬性、方法的共用。克隆(深度拷貝)是實現這個目的的方法,但不是唯一的方法,也不是javaScript 的目的。

通過指針來引用,然後動態執行的時候綁定上下文 this,這樣就不會造成實例之間的錯亂,我覺得這也是this 被設計成動態綁定的原因之一。

原型模式-編程範式

  原型模式不僅是一種設計模式,它還是一種編程範式(programming paradigm),是 JavaScript 面向對象系統實現的根基,原型編程範式的體現就是基於原型鏈的繼承。即便現在es6+ 推出了class 關鍵字,支持了類的寫法。引入的 JavaScript 類本質上還是基於原型的繼承的語法糖(class 只是一個語法糖)。類語法不會為 JavaScript 引入新的面向對象的繼承模型。 當我們嘗試用 class 去定義一個 Dog 類時:

class Dog {
  constructor(name ,age) {
   this.name = name
   this.age = age
  }
  
  eat() {
    console.log('肉骨頭真好吃')
  }
}

其實完全等價於寫了這麼一個構造函數:

function Dog(name, age) {
  this.name = name
  this.age = age
}
Dog.prototype.eat = function() {
  console.log('肉骨頭真好吃')
}

原型鏈核心點

  每個構造函數都擁有一個prototype屬性,它指向構造函數的原型對象,這個原型對象中有一個 constructor 屬性指回構造函數;每個實例都有一個內部屬性__proto__屬性,當我們使用構造函數去創建實例時,實例的__proto__屬性就會指向構造函數的原型對象。

// 輸出"肉骨頭真好吃"
dog.eat()
// 輸出"[object Object]"
dog.toString()

明明沒有在 dog 實例里手動定義 eat 方法和 toString 方法,它們還是被成功地調用了。這是因為當我試圖訪問一個 JavaScript 實例的屬性、方法時,它首先搜索這個實例本身;當發現實例沒有定義對應的屬性、方法時,它會轉而去搜索實例的原型對象;如果原型對象中也搜索不到,它就去搜索原型對象的原型對象,這個搜索的鏈表就叫做原型鏈

Object 是所有的基類,其中Object.prototype指向null,這樣原型鏈就有終點了,而不是無腦的一直下去。

原型鏈其他關鍵點:

  1. 所有函數(普通函數,構造函數,內置的函數)都是內置函數(類)Function 的實例,所以存在函數.__proto__ === Function.prototype 所有函數都可以直接調用Function原型上的方法(call / apply /bind)
  2. Function 確實很厲害,他不僅是函數的類,還是自己的類。函數是Function 的實例,Function 也是Function 的實例 Object.__proto__ === Function.prototypeFunction.__proto__===Function.prototype
  3. 對象的原型鏈最終指向Object.prototype, object.prototype._proto_ 指向null

如下代碼驗證了這些結論:

function sayHi () {
    // console.log('hello joel')
}

// 所有函數都是Function 的實例即函數也是對象,
// 所以存在函數.__proto__ === Function.prototype
console.log(sayHi.__proto__ === Function.prototype) // true
console.log(Object.__proto__ === Function.prototype) // true
console.log(String.__proto__ === Function.prototype) // true
console.log(Array.__proto__ === Function.prototype) // true
console.log(Number.__proto__ === Function.prototype) // true
console.log(Symbol.__proto__ === Function.prototype) // true

// Function.prototype 內部屬性又指向Object的原型對象
console.log(Function.prototype.__proto__ === Object.prototype) // true
//  Function 也是Function 的實例
console.log(Function.__proto__ === Function.prototype)
// 對象最終指向object的原型
console.log(new sayHi().__proto__ instanceof Object) // true
console.log(new sayHi().__proto__ === sayHi.prototype) // true
console.log(Array.prototype.__proto__ === Object.prototype) // true
console.log(Object.__proto__.__proto__ === Object.prototype) // true

// 內置的array,string,number,object 等都是構造函數,同時也是對象
console.log(typeof Array) // function
console.log(typeof Object) // function

// 通過原型鏈找到object.prototype 上的方法
sayHi.valueOf() 

小結

  1. 原型是 JavaScript 面向對象系統實現的根基,在這裡更像是一種編程範式
  2. 在JavaScript 中原型模式無處不在,只要使用原型的模型創建對象就是在使用原型模式
Object.__proto__ === Function.prototype
Function.__proto__=== Function.prototype
Function.prototype.__proto__ === Object.prototype
Object.prototype.__prto__ === null

 


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

-Advertisement-
Play Games
更多相關文章
  • 摘要:其實游戲客戶對資料庫的訴求是很明確的,資料庫應當“放心存放心用”。 本文分享自華為雲社區《華為雲GaussDB(for Redis)揭秘第27期:聊聊游戲業務怎麼用高斯Redis》,作者:高斯Redis官方博客。 華為雲資料庫團隊是比較重視技術洞察的,對客戶真實的業務場景也比較看重。年初出差了 ...
  • GreatSQL社區原創內容未經授權不得隨意使用,轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本,使用上與MySQL一致。 作者: 花家舍 文章來源:GreatSQL社區原創 前文回顧 實現一個簡單的Database系列 譯註:cstack在github維護了一個簡單的、類似 ...
  • 生活中存在同時使用兩個微信的情況,一個工作一個生活,這時希望同時在電腦上登錄兩個賬號。如何做到呢?步驟如下: 右鍵單擊“微信”圖標,選擇屬性,目標框內的路徑就是微信安裝路徑,複製目標框里的內容。 將如下命令複製到 TXT 文件保存,再將該文件重命名,主要是將尾碼名改成“.bat”文件。 @echo ...
  • 好家伙,本篇為做題思考 書接上文 題目如下: 1.請給出下列代碼的輸出結果,並配合"消息隊列"寫出相關解釋 async function foo() { console.log(2); console.log(await Promise.resolve(8)); console.log(9); } ...
  • 一般來說,項目由子模塊組成,拿到後端提供過來的介面,一般也是按照子模塊來分類提供的.請教一下各位,你們前端項目是如何管理api的? 希望各位貼點你們的優秀代碼段上來學習學習. 常見: 各個模塊的api存放到單獨的js文件里,返回一個請求實例promise對象 使用的時候根據需求引入相應的請求方法 / ...
  • 其他章節請看: webgl 系列 變換矩陣和動畫 動畫就是不停地將某個東西變換(transform)。例如將三角形不停地旋轉就是一個動畫 和 CSS transform 類似,變換有三種形式:平移、縮放和旋轉。 簡單的變換用普通表達式容易實現,如果事情複雜,比如旋轉後平移,這時就可以使用變換矩陣。 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 網站效果演示:ashuai.work:8888/#/myLoad GitHub倉庫地址代碼:github.com/shuirongshu… 載入中思路分析 實現載入中效果,一般有兩種方式: 第一種是:搞一個load組件,然後使用Vue.e ...
  • <!-- * @description 表格組件 * @fileName TableList.vue * @authorQ * @date 2021/05/15 15:13:45 --> <template> <div class="table-container"> <el-table v-if= ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...