創建型-原型模式

来源: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
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...