[JS]原型的基本概念

来源:https://www.cnblogs.com/feixianxing/archive/2022/09/18/javascript-prototype.html
-Advertisement-
Play Games

原型(prototype)是函數特有的屬性。只要創建了一個函數,這個函數就會自動創建一個prototype屬性(顯式原型),並指向該函數的原型對象。原型對象上都有一個constructor屬性,指向prototype屬性所在的函數(即函數本身)。而對於每一個構造函數創建出的實例對象,內部都會有一個[... ...


目錄

原型系統

原型

基本概念

  • 原型(prototype)是函數特有的屬性。

  • 只要創建了一個函數,這個函數就會自動創建一個prototype屬性(顯式原型),並指向該函數的原型對象。

  • 原型對象上都有一個constructor屬性,指向prototype屬性所在的函數(即函數本身)。

  • 而對於每一個構造函數創建出的實例對象,內部都會有一個[[Prototype]]屬性(隱式原型),同樣指向函數的原型對象。

    • 在Firefox、Safari和Chrome瀏覽器中,每個對象都可以通過__proto__屬性訪問到它們的[[Prototype]]屬性。

    • 對其他瀏覽器而言,這個屬性對腳本是不可見的(使用getPrototypeOf()方法獲取類的原型)。

示例

// 創建一個函數
function Person(){};

// 檢查其是否有prototype這個屬性
console.log(Person.hasOwnProperty('prototype'));
// 查看Person.prototype的內容
console.log(Person.prototype);

從輸出結果可以看出,Person函數確實擁有prototype這個屬性,並且Person.prototype這個原型對象包含了一個constructor屬性,指向了一個函數,這個函數就是構造函數Person()

// 補充上面Person()構造函數的原型
Person.prototype.name = '張三';
Person.prototype.age = 20;
Person.prototype.sayName = function(){
    console.log(this.name);
}

// 創建對象
const person = new Person();
// 輸出對象
console.log(person);

從輸出結果可以看出,由於將屬性和方法都放到了prototype上,輸出person這個實例對象的時候是找不到nameagesayName()方法的,只有一個隱式原型對象[[Prototype]],在這個隱式原型對象上才能找到nameagesayName()方法,以及指向構造函數Person()constructor屬性。

使用原型的好處就是可以共用屬性和方法。

// 創建兩個對象
const person1 = new Person();
const person2 = new Person();

console.log(person1 === person2);    // false
console.log(person1.sayName === person2.sayName);    // true
  • person1 === person2會返回false,因為它們是兩個不同的對象。

  • person1.sayName === person2.sayName會返回true,因為這兩個不同的對象共用這同一個sayName()方法。

關係

構造函數原型對象實例對象三個的關係如下圖:

改進創建對象的模式

單純使用原型模式創建對象

這種模式將所有的屬性和方法都進行共用。

function Person(){};

// 將屬性添加到原型上
Person.prototype.name = '張三';
Person.prototype.age = 20;
Person.prototype.sayName = function(){
    console.log(this.name);
}


const person1 = new Person();
const person2 = new Person();

確實,方法共用後,節省了記憶體,但是缺點是屬性也隨之共用了。

例如上面這個例子,person1person2這兩個對象創建後的nameage都是張三20

可以再手動修改對象的屬性:

person2.name = '李四';
person2.age = 18;

綜合構造函數和原型模式創建對象

不需要共用的屬性放在構造函數上,將共用的屬性和方法放在原型對象上。

同時,可以使用預設值來改進構造函數。

function Person(name='張三', age=20){
    this.name = name;
    this.age = age; 
}

Person.prototype.sayName = function(){
    console.log(this.name);
}

const person1 = new Person();
const person2 = new Person('李四',18);

console.log(person1);
console.log(person2); 
  • Person()構造函數的參數列表:name='張三',age=20表示name的預設值是'張三'age的預設值是20

另一種設置預設值的方式是:

function Person(name,age){
    this.name = name || '張三';
    this.age = age || 20;
}

如果nameage沒有傳入參數,則為undefined,在運算符中會被轉為false,最終賦值給nameage的是運算符右邊的數據。

  • 由於person1在創建的時候沒有傳入參數,所以預設是張三,20;而person2在創建的時候傳入了參數,所以屬性是李四,18

  • 輸出兩個對象,發現它們只有nameage兩個私有屬性sayName()方法在原型對象上,是共用的。


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

-Advertisement-
Play Games
更多相關文章
  • 想要提升你的打字速度?打字大師3中文版是一款運行在Mac端的觸摸打字軟體,很多現代人幾乎生活離不開電腦。這就是為什麼快速打字很重要。Master of Typing 3是為那些想學習打字的人而設計。這是一個用你的十個手指不看鍵盤打字的方法,快速打字,下載列印可以節省時間,打字大師3中文版能夠有效的幫 ...
  • 內核是如何處理系統調用 每個系統調用被賦予了一個系統調用號 在i386平臺上,執行一個系統調用是通過int 0X80指令完成的 eax存放系統的調用號 ebx,ecx,edx,esi,edi存儲系統調用的參數,對於超過5個參數的系統調用,用一個寄存器指向用戶空間存儲所有的系統調用的參數 錯誤的處理 ...
  • By:授客 QQ:1033553122 刪除表數據操作 清空所有表記錄 TRUNCATE TABLE your_table_name; 或者批量刪除滿足條件的表記錄 BEGIN LOOP DELETE FROM your_table_name WHERE rownum <= 50000; EXIT ...
  • 成本核算程式執行某個存儲過程一直阻塞,排查發現類似以下語句阻塞: select tbl1.product_id,sum(isnull(tbl1.qty,0) * isnull(tbl2.unit_other_cost,0)) as other_cost from tbl1.p_id=@pId and ...
  • MySQL的通用日誌: 用來記錄對資料庫的通用操作,包括錯誤的sql語句等信息。 通用日誌可以保存在:file(預設值)或 table(mysql.general_log表) mysql通用日誌的設置: general_log=ON|OFF 是否啟用通用日誌 general_log_file=HOS ...
  • 1 - 編程語言 1.1 編程 編程: 就是讓電腦為解決某個問題而使用某種程式設計語言編寫程式代碼,並最終得到結果的過程。 電腦程式: 就是電腦所執行的一系列的指令集合,而程式全部都是用我們所掌握的語言來編寫的,所以人們要控制電腦一定要通過電腦語言向電腦發出命令。 1.2 電腦語言 計 ...
  • 移動web開發之rem佈局 rem基礎 rem單位 rem (root em)是一個相對單位,類似於em,em是父元素字體大小。 不同的是rem的基準是相對於html元素的字體大小。 比如,根元素(html)設置font-size=12px; 非根元素設置width:2rem; 則換成px表示就是2 ...
  • 這個系列的目的是通過使用 JS 實現“乞丐版”的 React,讓讀者瞭解 React 的基本工作原理,體會 React 帶來的構建應用的優勢 1 HTML 構建靜態頁面 使用 HTML 和 CSS,我們很容易可以構建出上圖中的頁面 <!DOCTYPE html> <html lang="en"> < ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...