第一百一十七篇: JavaScript 工廠模式和原型模式

来源:https://www.cnblogs.com/FatTiger4399/archive/2022/12/24/17001733.html
-Advertisement-
Play Games

好家伙，本篇為《JS高級程式設計》第八章“對象、類與面向對象編程”學習筆記 1.工廠模式 工廠模式是另外一種關註對象創建概念的創建模式。 它的領域中同其它模式的不同之處在於它並沒有明確要求我們使用一個構造器。 取而代之，一個工廠能提供一個創建對象的公共介面，我們可以在其中指定我們希望被創建的工廠對象 ...


好家伙，本篇為《JS高級程式設計》第八章“對象、類與面向對象編程”學習筆記

 

1.工廠模式

工廠模式是另外一種關註對象創建概念的創建模式。

它的領域中同其它模式的不同之處在於它並沒有明確要求我們使用一個構造器。

取而代之，一個工廠能提供一個創建對象的公共介面，我們可以在其中指定我們希望被創建的工廠對象的類型。

function createPerson(name,age,job){
    let person =new Object();
    person.name= name;
    person.age =age;
    person.job =job;
    person.getName = function(){
        console.log(this.name);
    }
    return person;
}
let person_1 = createPerson("panghu","20","student")
person_1.getName();
console.log(person_1);

 

 

 

（看上去沒什麼問題，但怎麼總覺得怪怪的）

let person =new Object();

/...
...
...
../

return person;

 

 

2.構造函數模式

前面幾章提到過，ECMAScript中的構造函數是用於創建特定類型對象的。

像Object和Array這樣的原生構造函數，運行時可以直接在執行環境中使用。

當然也可以自定義構造函數，以函數的形式為自己的對象類型定義屬性和方法。

 

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.getName = function () {
        console.log(this.name);
    };
}
let person_1 = new Person("panghu", "20", "student");
person_1.getName();
console.log(person_1);

 

 

在這個例子中，Person（）構造函數代替了 createPerson（）工廠函數。

實際上，Person（）內部的代碼跟createPerson（）基本是一樣的，只是有如下區別。
□沒有顯式地創建對象。
□屬性和方法直接賦值給了this。
□沒有return。
另外，要註意函數名Person的首字母大寫了。

按照慣例，構造函數名稱的首字母都是要大寫的，非構造函數則以小寫字母開頭。

這是從面向對象編程語言那裡借鑒的( 是的,非常好的借鑒 )，有助於在ECMAScript中區分構造函數和普通函數。

畢竟ECMAScript的構造函數就是能創建對象的函數。
要創建Person的實例，應使用new操作符。以這種方式調用構造函數會執行如下操作。

（1）在記憶體中創建一個新對象。
（2）這個新對象內部的[[Prototype]]特性被賦值為構造函數的prototype屬性。

（3）構造函數內部的this被賦值為這個新對象（即this指向新對象）。
（4）執行構造函數內部的代碼（給新對象添加屬性）。
（5）如果構造函數返回非空對象，則返回該對象；否則，返回剛創建的新對象。

 

2.1．構造函數也是函數
構造函數與普通函數唯一的區別就是調用方式不同。除此之外，構造函數也是函數。

並沒有把某個函數定義為構造函數的特殊語法。

任何函數只要使用new操作符調用就是構造函數，而不使用new操作符調用的函數就是普通函數。

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.getName = function () {
        console.log(this.name);
    };
}
let person_1 = new Person("panghu", "20", "student");
person_1.getName();
//作為函數調用,添加到window對象
Person("xiaofu","20","student")
window.getName();

 

 

 

此處如果將Person當做普通函數來調用,那麼this指向的就是全局作用域,數據會被添加到window對象 

 

 

2.2. 構造函數的問題

構造函數雖然有用，但也不是沒有問題。

構造函數的主要問題在於，其定義的方法會在每個實例上都創建一遍。

因此對前面的例子而言，person1和person2都有名為sayName（）的方法，但這兩個方法不是同一個Function 實例。

我們知道，ECMAScript中的函數是對象，因此每次定義函數時，都會初始化一個對象。

如果把方法分離出來,在全局作用域中進行定義,在當前對象需要多個方法,那麼就要在全局作用域中定義多個函數.

這個問題可以通過原型模式解決

 

3.原型模式

(他來了,被營銷號譽為Js三大難點的"原型"他來了)

 理解複雜概念之前我們先從簡單的地方入手(比如新華字典)

 

 

 

然後我們知道,原型指的是原來的模型

 

每個函數都會創建一個prototype屬性，這個屬性是一個對象，包含應該由特定引用類型的實例共用的屬性和方法。

實際上，這個對象就是通過調用構造函數創建的對象的原型。

使用原型對象的好處是，在它上面定義的屬性和方法可以被對象實例共用。

原來在構造函數中直接賦給對象實例的值，可以直接賦值給它們的原型，

 

3.1.實例共用原型模式的屬性和方法

function Person(){};

Person.prototype.name = "panghu";
Person.prototype.age = "20";
Person.prototype.job = "student";
Person.prototype.getName =function(){
    console.log(this.name);
}

let person_1 = new Person();
person_1.getName();
let person_2 = new Person();
person_2.getName();

 

 

 

 

然後,我們來理解一下這段代碼,

首先,我們要把Person的原型當成一個對象來看待,

於是我們現在有了三方勢力,Person構造函數,Person原型對象,person_1和person_2兩個實例對象

 

 

 

看看這幅圖,

Person構造函數Person.prototype指向原型對象,而Person原型對象的constructor指向Person構造函數,

兩個實例都只有唯一屬性[[Prototype]]指向Person.prototype

 

3.2.原型層級

在通過對象訪問屬性時,會按照這個屬性的名稱開始搜索,搜索開始於對象實例本身

如果在對象實例上找到了,則返回對應的值,如果沒找到,則搜索會沿著指針進入原型對象,然後在原型對象上找到屬性後,再返回對應的值

function Person(){};

Person.prototype.name = "panghu";
Person.prototype.age = "20";
Person.prototype.job = "student";
Person.prototype.getName =function(){
    console.log(this.name);
}

let person_1 = new Person();
person_1.getName();

person_1.name ="xiaofu";
person_1.getName();

delete person_1.name
person_1.getName();

 

 

 

 

只要給對象實例添加一個屬性,這個屬性就會遮蔽原型對象上的同名屬性,雖然不會修改,但會屏蔽對它的訪問

 

 

 

 

3.3.原型的動態性

因為從原型上搜索值的過程是動態的，所以即使實例在修改原型之前已經存在，任何時候對原型對象所做的修改也會在實例上反映出來

function Person(){};

Person.prototype.saysomething =function(){
    console.log("yes,we can");
}

let person_1 = new Person();

person_1.saysomething();

 

 

 

 

但重寫原型又是另一碼事了

function Person() {};

let person_1 = new Person();

Person.prototype = {
    constructor: Person,
    name: "panghu",
    age: "20",
    job: "student",
    saySomething() {
        console.log("yes,we can");
    }
}
person_1.saySomething();

 

 

 

 

雖然隨時能給原型添加屬性和方法，並能夠立即反映在所有對象實例上、但這跟重寫整個原型是兩回事。

實例的[[Prototype]]指針是在調用構造函數時自動賦值的，這個指針即使把原型修改為不同的對象也不會變。

重寫整個原型會切斷最初原型與構造函數的聯繫，但實例引用的仍然是最初的原型。記住，實例只有指向原型的指針，沒有指向構造函數的指針。

 

Person的新實例是在重寫原型對象之前創建的。在調用person_1.saySomething()的時候，會導致錯誤。

這是因為person_1指向的原型還是最初的原型，而這個原型上並沒有saySomething屬性。

 

 

 

 

That's all


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

-Advertisement-
Play Games
更多相關文章
  • #PHP #MySQL數據操作 #線上聊天 PHP實現線上聊天與MySQL的“增查刪改”
    目錄 1.目標圖 2.項目簡介 3.目錄結構 4.建立MySQL表 5.實現過程 5.1 index.php 5.2 data.php 5.2 method.php 5.3 case.php 5.4 main.js 5.5 css/style.css 5.6 img\icon01.png 5.7 j ...
  • 每日演算法之二叉搜索樹的第k個節點
    JZ54二叉搜索樹的第k個節點 題目 給定一棵結點數為n 二叉搜索樹，請找出其中的第 k 小的TreeNode結點值。 返回第k小的節點值即可 不能查找的情況，如二叉樹為空，則返回-1，或者k大於n等等，也返回-1 保證n個節點的值不一樣 思路 演算法實現 根據二叉搜索樹的性質，左子樹的元素都小於根節 ...
  • 紅袖添香,絕代妖嬈,Ruby語言基礎入門教程之Ruby3基礎語法,第一次親密接觸EP01
    書接上回，前一篇我們在全平臺構建好了Ruby3的開發環境，現在，可以和Ruby3第一次親密接觸了。 Ruby是一門在面向對象層面無所不用其極的解釋型編程語言。 我們可以把編寫Ruby代碼看作是一場行為上的藝術，編碼就像跳舞一樣，Ruby的每一步都很優雅，幾乎沒有一步是多餘的。 第一行代碼 進入系統的 ...
  • 學習.NET MAUI Blazor（一）、Blazor是個啥？
    這是我大約半年前就想寫的隨筆。 功能很簡單。 就是基於Geometry的畫布，記錄滑鼠軌跡生成PathGeometry。再就是添加刪除Path的功能也就是path筆跡刪除。 目前是實現了兩種方式。 1 基於預覽擦除 2 實時擦除 兩者在具體技術上沒有任何的區別都是依靠Geometry.Combine ...
  • 以小博大外小內大,Db資料庫SQL優化之小數據驅動大數據
    SQL優化中，有一條放之四海而皆準的既定方針，那就是：永遠以小數據驅動大數據。其本質其實就是以小的數據樣本作為驅動查詢能夠優化查詢效率，在SQL中，涉及到不同表數據的連接、轉移、或者合併，這些操作必須得有個數據集作為“帶頭”大哥，即驅動數據，而這個驅動數據最好是數據量最小的那一個。 內大外小 在討論 ...
  • 深入理解 MySQL 索引底層原理
    Mysql 作為互聯網中非常熱門的資料庫，其底層的存儲引擎和數據檢索引擎的設計非常重要，尤其是 Mysql 數據的存儲形式以及索引的設計，決定了 Mysql 整體的數據檢索性能。 ...
  • Web 標準 & W3C 規範
    Web 標準 & W3C 規範 引用 最全面的前端筆記來啦，包含了入門到入行的筆記，還支持實時效果預覽。小伙伴們不需要在花時間去寫筆記，或者是去網上找筆記了。面試高頻提問和你想要的筆記都幫你寫好了。支持移動端和PC端閱讀，深色和淺色模式。 原文鏈接：https://note.noxussj.top/ ...
  • JavaScript：類(class)
    在JS中，類是後來才出的概念，早期創造對象的方式是new Function()調用構造函數創建函數對象； 而現在，可以使用new className()構造方法來創建類對象了； 所以在很多方面，類的使用方式，很像函數的使用方式： 但是類跟函數，還是有本質區別的，這在原型那裡已經說過，不再贅述； 如何 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類