關于原型和原型鏈的學習和實踐

在前端面試中,原型和原型鏈始終是一個避不開的問題,今天就弄明白!

原型和原型鏈

  • 對象的創建方式
    • 工廠模式
    • 構造函數模式
    • 原型模式
  • 原型和原型鏈
  • 實踐

對象的創建方式

原型和原型鏈都是關于對象的內容,先來看一下JavaScript中對象的構建方式。

工廠模式

function createPerson(name, age, job) { let o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function() { console.log(this.name); }; return o; 
} 
let person1 = createPerson("Nicholas", 29, "Software Engineer"); 
let person2 = createPerson("Greg", 27, "Doctor");

構造函數模式

function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.sayName = function() { console.log(this.name); }; 
} 
let person1 = new Person("Nicholas", 29, "Software Engineer"); 
let person2 = new Person("Greg", 27, "Doctor"); 
person1.sayName(); // Nicholas 
person2.sayName(); // Greg 

要創建 Person 的實例,應使用 new 操作符。以這種方式調用構造函數會執行如下操作。
(1) 在內存中創建一個新對象。
(2) 這個新對象內部的[[Prototype]]特性被賦值為構造函數的 prototype 屬性。
(3) 構造函數內部的 this 被賦值為這個新對象(即 this 指向新對象)。
(4) 執行構造函數內部的代碼(給新對象添加屬性)。
(5) 如果構造函數返回非空對象,則返回該對象;否則,返回剛創建的新對象。

原型模式

function Person() {} 
Person.prototype.name = "Nicholas"; 
Person.prototype.age = 29; 
Person.prototype.job = "Software Engineer"; 
Person.prototype.sayName = function() { console.log(this.name); 
}; 
let person1 = new Person(); 
person1.sayName(); // "Nicholas" 
let person2 = new Person(); 
person2.sayName(); // "Nicholas" 
console.log(person1.sayName == person2.sayName); // true 

無論何時,只要創建一個函數,就會按照特定的規則為這個函數創建一個 prototype 屬性(指向
原型對象)。默認情況下,所有原型對象自動獲得一個名為 constructor 的屬性,指回與之關聯的構
造函數。對前面的例子而言,Person.prototype.constructor 指向 Person。然后,因構造函數而
異,可能會給原型對象添加其他屬性和方法。

原型和原型鏈

  1. Person.prototype.constructor == Person // 準則1:原型對象(即Person.prototype)的constructor指向構造函數本身
  2. person01.proto == Person.prototype // 準則2:實例(即person01)的__proto__和原型對象指向同一個地方

構造函數、原型和實例的關系:每個構造函數都有一個原型對象,原型有一個屬性指回構造函數,而實例有一個內部指針指向原型。如果原型是另一個類型的實例呢?那就意味著這個原型本身有一個內部指針指向另一個原型,相應地另一個原型也有一個指針指向另一個構造函數。這樣就在實例和原型之間構造了一條原型鏈。

實例的隱式原型指向構建該實例的類的顯式原型。
驗證一下這句話:
在這里插入圖片描述
p.proto===person.prototype
person.prototype.proto===Object.prototype
Object.prototype.proto===null

注意有的瀏覽器可能已經廢除了__proto__屬性,改用Object.getPrototypeOf()方法來獲取對象的原型。
在這里插入圖片描述
原型鏈例子:
在這里插入圖片描述
在這里插入圖片描述

示意圖:
在這里插入圖片描述
注意:如果通過對象自變量的方式添加新方法,會導致原型鏈失效
在這里插入圖片描述

實踐

在這里插入圖片描述

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/44333.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/44333.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/44333.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

代碼隨想錄(day3)有序數組的平方

暴力求解法: 注意:需要確定范圍,比如nums.sort()是在for循環之外,根據函數的功能來確定 return返回的是nums,而不是nums[i]因為返回的是整個數組 class Solution(object):def sortedSquares(self, nums):for i in r…

人話學Python-基礎篇-數字計算

一:數字類型 對于最常見的數據類型,數字在Python中分為三類: 整型(int) 表示的是整數類型的所有數字,包括正整數,負整數和0。和C語言不同的是,Python中的int型沒有范圍的限制,理論上可以從無限小的整數取到…

RedHat運維-Ansible自動化運維基礎22-rhel-system-roles

1. system_roles的官方文檔的位置是___________________________________; 2. system_roles的官方文檔的位置是___________________________________; 3. system_roles的官方文檔的位置是___________________________________; 4. 安裝rhel-s…

react基礎語法,模板語法,ui渲染,jsx,useState狀態管理

創建一個react應用 這里使用create-react-app的腳手架構建項目(結構簡潔,基于webpack-cli), npx create-react-app [項目名稱] 使用其他腳手架構建項目可以參考:react框架,使用vite和nextjs構建react項目…

數學建模國賽入門指南

文章目錄 認識數學建模及國賽認識數學建模什么是數學建模?數學建模比賽 國賽參賽規則、評獎原則如何評省、國獎評獎規則如何才能獲獎 國賽賽題分類及選題技巧國賽賽題特點賽題分類 國賽歷年題型及優秀論文數學建模分工技巧數模必備軟件數模資料文獻數據收集資料收集…

力扣題解(乘積為正數的最長子數組長度)

1567. 乘積為正數的最長子數組長度 已解答 中等 給你一個整數數組 nums ,請你求出乘積為正數的最長子數組的長度。 一個數組的子數組是由原數組中零個或者更多個連續數字組成的數組。 請你返回乘積為正數的最長子數組長度。 本題要求乘積為正數,而整…

白蛇插畫:成都亞恒豐創教育科技有限公司

白蛇插畫:古韻今風,情深意長 在浩瀚的藝術長河中,插畫作為一種獨特的藝術形式,以其生動形象的畫面、豐富多彩的色彩和深邃悠遠的意境,成都亞恒豐創教育科技有限公司深受人們喜愛。而“白蛇插畫”,作為融合…

bug - while parsing file included at

bug 如下 找到這個對應文件tb_top.sv的對應行,發現是一個 include "inc_tb_tests_xxx.sv" 問題點:頭文件,重復定義,那么 解決方法- 在被include的文件首尾加入 ifndef MY_TRANSACTION__SV define MY_TRANSACTION__SV …

GenAI 技術堆棧架構師指南 - 十種工具

這篇文章于 2024 年 6 月 3 日首次出現在 The New Stack 上。 我之前寫過關于現代數據湖參考架構的文章,解決了每個企業面臨的挑戰——更多的數據、老化的Hadoop工具(特別是HDFS)以及對RESTful API(S3)和性能的更大需求…

《javascript語言精粹》學習筆記之函數特性

分析javascript javascript比較好的思想:函數、弱類型、動態對象、對象字面量表示法 不好的思想:基于全局變量的編程模型 函數 函數對象 函數就是對象,新創建的函數會連接到Function.prototype上,沒和函數創建時附帶有兩個隱藏…

前端--第一個前端程序

第一個前端程序 第一步: 使用記事本,編寫代碼 在你的一個磁盤里面創建一個文件夾,名為前端,然后在里面新建一個記事本,在里面寫如下代碼,注意一定要使用英文,然后把后綴名稱改為.html。 第二…

你明白C++中的多態嗎?(暑假提升-多態專題)

內不欺己,外不欺人。———孔子 有趣的多態 1、前言2、概念3、多態定義與產生條件4、多態的重要組成成員-(虛函數)5、虛函數的重寫(覆蓋)6、輔助關鍵字override與final(了解即可)7、重載,重定義(隱藏),重寫(覆蓋)8、抽象類9、多態的原理9、1、…

PHP老照片修復文字識別圖像去霧一鍵摳圖微信小程序源碼

🔍解鎖復古魅力,微信小程序黑科技大揭秘!老照片修復&更多神奇功能等你來試! 📸 【老照片修復,時光倒流的美顏術】 你是否珍藏著一堆泛黃的老照片,卻因歲月侵蝕而模糊不清?現在…

實驗02 黑盒測試(組合測試、場景法)

1. 組合測試用例設計技術 指出等價類劃分法和邊界值分析法通常假設輸入變量相互獨立,但實際情況中變量間可能存在關聯。全面測試:覆蓋所有輸入變量的所有可能組合,測試用例數量隨輸入變量的增加而指數增長。 全面測試需要對所有輸入的各個取…

2008年上半年軟件設計師【上午題】真題及答案

文章目錄 2008年上半年軟件設計師上午題--真題2008年上半年軟件設計師上午題--答案 2008年上半年軟件設計師上午題–真題 2008年上半年軟件設計師上午題–答案

按模版批量生成定制合同

提出問題 一個儀器設備采購公司,商品合同采購需要按模版生成的固定的文件,模板是固定的,只是每次需要替換信息,然后打印出來寄給客戶。 傳統方法 如果手工來做這個事情,準備好數據之后,需要從Excel表格中…

Qt5 Ubuntu18 QStackedWidget

1、在實際項目開發過程遇到,如果通過UI插件的屬性設置,通過對默認的兩個頁面進行提升需要切換操作的對象,如果該對象需要外部接口傳入數據,實現界面信息的實時刷新,這樣會失敗,失敗的原因很好理解&#xff…

Ubuntu安裝Pytorch3d

查看對應版本的pytorch3d https://anaconda.org/pytorch3d/pytorch3d/files?page2下載后保存到服務器上安裝 conda install pytorch3d-0.7.7-py310_cu118_pyt210.tar.bz2檢查是否安裝成功 python -c "from pytorch3d.io import load_ply" # Check for pytorch3d i…

高效應對網絡攻擊,威脅檢測響應(XDR)平臺如何提升企業應急響應能力

在數字化時代,企業面臨的網絡攻擊威脅持續增加,如惡意軟件、勒索軟件、釣魚攻擊、DDoS攻擊等。這些威脅不僅危及企業數據安全、系統穩定,還損害了品牌形象和市場信任。隨著云計算、大數據、物聯網的廣泛應用,企業網絡攻擊面擴大&a…

簡單分享下prettytable--快速制作表格

一、安裝: pip install prettytable 二、實例: from prettytable import PrettyTabletable PrettyTable()table.field_names ["學號", "姓名", "語文", "數學", "英語", "物理", "化…