簡單介紹一下js中的構造函數、原型對象prototype、對象原型__proto__、原型鏈

構造函數
	function Star (uname, age){this.uname = unamethis.age = agethis.sing = function(){ log('唱歌~') }}let xzq = new Star('薛之謙', 30)let ldh = new Star('劉德華', 20)log(ldh) // { uname: '劉德華', age: 20, sing: f }ldh.sing() // 唱歌~log(ldh.sing === xzq.sing) // false
# 實例成員:構造函數內部,通過this添加的成員,如上面的:uname、age、sing實例成員,只能通過實例化的對象來訪問,如:ldh.sing()才行,Star.sing()就不行# 靜態成員:在構造函數本身上,添加的成員,如:Star.sex = '男'靜態成員只能通過構造函數訪問,如:log(Star.sex) // 男不能通過實例化對象來訪問(ldh.sex就不行)# 構造函數 new 的執行過程1、new構造函數,可以在內存中創建一個空的對象2、this就會指向剛才創建的空對象3、執行構造函數里面的代碼,就給這個空對象添加屬性、方法4、返回這個對象(所以構造函數里面不用return)

prototype 原型對象
# js規定,每一個構造函數都有一個prototype屬性,這個prototype就是一個對象所以,我們可以把'公共的方法'添加到這個'原型對象prototype上'(原型對象prototype的作用就是共享方法)所以:公共的屬性,定義到,構造函數里面公共的方法,定義到,原型對象prototype上
	function Star (uname, age){this.uname = unamethis.age = age}Star.prototype.sing = function(){ log('唱個歌') }let ldh = new Star('劉德華', 20)let xzq = new Star('薛之謙', 30)log(ldh.sing === xzq.sing) // true# console.log( ldh ) // 系統會自動,在對象的身上,添加一個'__proto__',指向構造函數的原型對象# prototypeconsole.log( ldh.__proto__ === Star.prototype ) // true
方法的查找規則:
	首先看`ldh對象`,它身上是否有sing()方法,如果有,就執行它的這個方法如果沒有這個方法,但因為`__proto__`存在,就去`構造函數的原型對象prototype上`去找這個sing()方法
proto:對象原型
	每個對象身上都有一個`__proto__`對象原型,指向`指向構造函數的原型對象prototype`之所以,對象可以使用`構造函數的原型對象prototype`上的屬性、方法是因為,對象有`__proto__(對象原型)`的存在`__proto__對象原型` 和 `構造函數的原型對象prototype`是等價的`__proto__對象原型`的意義:在于為對象的查找機制提供一個方向,或者說一條線路,但它是一個非標準屬性,因此實際開發中,不可用使用這個屬性,它只是內部指向原型對象prototype

原型鏈
	function Star(uname, age){this.uname = unamethis.age = age}let ldh = new Start('劉德華', 123)log( ldh.__proto__ === Star.prototype ) // truelog( Star.prototype.__proto__ === Object.prototype ) // truelog( Star.prototype.__proto__ ) // null

在這里插入圖片描述

原型鏈的查找規則
	當訪問一個對象的屬性(方法)時,首先看這個對象本身有沒有該屬性,如果沒有,就查找它的原型(也就是`__proto__對象原型`,指向的是,`prototype原型對象`)如果還沒有,就查找,原型對象的原型(Object的原型對象)依次類推,直到找到Object為止(null)`_proto_對象原型`的意義:在于為對象的查找機制提供一個方向,或者說一條路線,但是它是一個非標準屬性,因此實際開發中,不可以使用這個屬性,它只是內部指向原型對象prototype

可以通過原型對象,為JavaScript的(原來的)內置對象,進行擴展自定義的方法

如下:通過數組的原型對象,添加求和的方法

	Array.prototype.sum = function(){console.log(this) // 指向它的調用者let sum = 0for(let i=0; i<this.length; i++){sum += this[i]}return sum}let arr = [1, 2, 3] // let arr = new Array(1,2,3)console.log(arr.sum()) // 6

constructor 指回 原來的原型對象

// 定義一個構造函數Starfunction Star(uname, age) {this.uname = unamethis.age = age}Star.prototype.sing = function () {console.log('唱歌~~')}// 對象.xxx:這樣是向對象添加xxx屬性,并不會覆蓋這個對象Star.prototype.song = function () {console.log("我會唱歌")}Star.prototype.dance = function () {console.log("我會跳舞")}// 對象 = {}:這樣是重新給對象賦值,會把原來的對象覆蓋掉// 其實這里就是把 構造函數Star 的原型對象prototype 覆蓋了,但是并不會影響uname、age在構造函數中定義的屬性Star.prototype = {aaa() { console.log("我會唱歌aa") },bbb() { console.log("我會唱歌bbb") },// ....// ....// ....}// 手動用 constructor 指回原來的原型對象Star.prototype = {constructor: Star, // 指回原來的原型對象ccc() { console.log("我會唱歌ccc") },ddd() { console.log("我會唱歌ddd") },// ....// ....// ....}let ldh = new Star('劉德華', 123)console.log('ldh=', ldh) // ldh= Star {uname: '劉德華', age: 123}console.log('ldh.uname=', ldh.uname) // ldh.uname= 劉德華console.log('ldh.age=', ldh.age) // ldh.age= 123// ldh.sing() // Uncaught TypeError: ldh.sing is not a functionldh.song() // Uncaught TypeError: ldh.song is not a function// ldh.aaa() // Uncaught TypeError: ldh.aaa is not a function// ldh.bbb() //  Uncaught TypeError: ldh.bbb is not a functionldh.ccc() // 我會唱歌ccc.ldh.ddd() // 我會唱歌ddd

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

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

相關文章

DevEco Studio安裝

HUAWEI DevEco Studio For OpenHarmony&#xff08;以下簡稱DevEco Studio&#xff09;是基于IntelliJ IDEA Community開源版本打造&#xff0c;面向OpenHarmony全場景多設備的一站式集成開發環境&#xff08;IDE&#xff09;&#xff0c;為開發者提供工程模板創建、開發、編譯…

uniapp時間選擇器

Uniapp 是一套基于Vue.js 開發的跨平臺開發框架&#xff0c;它能夠以一套代碼編譯成多個平臺的應用&#xff0c;包括 iOS、Android、H5 等。要實現時間選擇器可以使用uni-app提供的組件picker&#xff0c;它可以用于選擇器、時間選擇器、日期選擇器等場景。 以下是一個簡單的時…

Docker的簡單介紹

Docker是一個開源的應用容器引擎&#xff0c;讓開發者可以打包他們的應用以及依賴包到一個可移植的容器中&#xff0c;然后發布到任何流行的Linux或Windows操作系統的機器上&#xff0c;也可以實現虛擬化。容器是完全使用沙箱機制&#xff0c;相互之間不會有任何接口。 Docker…

服務器被入侵了怎么去排查

在當今數字化時代&#xff0c;網絡安全問題變得越來越重要。其中&#xff0c;服務器被入侵是一種常見的安全威脅。當服務器被入侵時&#xff0c;我們需要采取一系列措施來排查和解決問題。本文將為您提供服務器被入侵后的排查步驟。 第一步&#xff1a;確認服務器被入侵 當發現…

用opencv繪制一個箭頭,沿著圓運動并留下運動軌跡(c++)

用opencv繪制一個箭頭&#xff0c;沿著圓運動并留下運動軌跡&#xff08;c&#xff09;。基于該例程可以簡單實現一個運動小車的模型。 using namespace cv;int main() {// 創建一個黑色背景的圖像&#xff0c;大小為400*400Mat image(400, 400, CV_8UC3, Scalar(0, 0, 0));//…

C語言進階之路-基本數據小怪篇

目錄 一、學習目標&#xff1a; 二、數據基本類型 整型 浮點型 / 實型 字符 字符串 布爾型數據 三、重要的雜七雜八知識點 常量與變量 標準輸入 sizeof運算符&#xff1a; 類型轉換 數據類型的本質 整型數據尺寸 可移植性整型 拿下第一個C語言程序 總結 一、學…

UE小計:頂部工具欄按鈕添加下拉列表,大綱列表、資源管理窗口右鍵添加按鍵

下拉列表 void FYouPluginsModule::StartupModule() {FYouToolStyle::Initialize();FYouToolStyle::ReloadTextures();FYouToolCommands::Register();PluginCommands MakeShareable(new FUICommandList);PluginCommands->MapAction(FYouToolCommands::Get().PackByCloudAc…

web前端之引入svg圖片、html引入點svg文件、等比縮放、解決裁剪問題、命名空間、object標簽、阿里巴巴尺量圖、embed標簽、iframe標簽

MENU 前言直接在頁面編寫svg使用img標簽引入通過css引入使用object標簽引入其他標簽參考資料 前言 web應用開發使用svg圖片的方式&#xff0c;有如下幾種方式 1、直接在頁面編寫svg 2、使用img標簽引入 3、通過css引入 4、使用object標簽引入 直接在頁面編寫svg 在html頁面直接…

LeetCode Hot100 101.對稱二叉樹

題目&#xff1a; 給你一個二叉樹的根節點 root &#xff0c; 檢查它是否軸對稱。 代碼&#xff1a; class Solution {public boolean isSymmetric(TreeNode root) {if(rootnull || (root.leftnull && root.rightnull)) {return true;}//用隊列保存節點LinkedList<…

高防CDN在網站搭建中的優劣勢分析

隨著網絡攻擊的日益增多和惡性化&#xff0c;網站安全性成為網站搭建中至關重要的一環。高防CDN&#xff08;Content Delivery Network&#xff09;作為一種有效的安全防護手段&#xff0c;扮演著保護網站免受惡意攻擊的角色。本文將從網站搭建的角度&#xff0c;深入分析高防C…

vue3+ts+vite 打包報錯 TS2304: Cannot find name ‘xxx‘

都說vue組合式api好&#xff0c;那必須來一套試試&#xff0c;而且element ui的demo全是lang"ts"了 改成組合式api沒問題&#xff0c;但是當加上lang"ts"之后就瘋狂報錯 src/components/table/tableshow.vue:7:28 - error TS2304: Cannot find name tempsh…

【網易云商】構建高效 SaaS 系統的技術要點與最佳實踐

SaaS 是什么 定義 相信大家都對云服務中的 IaaS、PaaS、SaaS 早就有所耳聞&#xff0c;現在更是衍生出了 aPaaS、iPaaS、DaaS 等等的類似概念。對于 SaaS 也有各種各樣的定義&#xff0c;本文給出的定義是&#xff1a; SaaS 是一種基于互聯網提供服務和軟件的交付模式&#xf…

水果編曲軟件FL Studio21.2下載安裝教程

簡稱FL&#xff0c;全稱&#xff1a;Fruity Loops Studio&#xff0c;因此國人習慣叫它"水果"。目前最新版本(包括測試版本)是FL Studio21.2&#xff0c;它讓你的計算機就像是全功能的錄音室&#xff0c;大混音盤&#xff0c;非常先進的制作工具&#xff0c;讓你的音…

工業以太網交換機未來發展中的幾個趨勢

隨著工業自動化不斷發展和智能制造的推進&#xff0c;工業以太網交換機在未來的應用中將面臨更多的發展機遇和挑戰。在工業以太網交換機的未來發展中&#xff0c;有幾個方面將成為趨勢。 網絡虛擬化 隨著工業自動化系統規模的不斷擴展&#xff0c;網絡虛擬化將成為未來的發展方…

總結1065

今日共計學習11h47m&#xff0c;今日圖書館冷清了不少&#xff0c;在最后關頭&#xff0c;越學心里越沒譜。做22年的真題做到懷疑人生&#xff0c;真題每年難度不一&#xff0c;可以出的很難&#xff0c;也可以出得相對簡單。出的難的&#xff0c;計算量大肯定是其中一部分。今…

四、防火墻-NAT Server

學習防火墻之前&#xff0c;對路由交換應要有一定的認識 NAT Server1.1.基本原理1.2.多出口場景下的NAT Server1.3.源進源出 —————————————————————————————————————————————————— NAT Server 一般對用戶提供一些可訪問的…

Python開發運維:Django 4.2.7 使用Celery 5.3.5 完成異步和定時任務

目錄 一、實驗 1.Django使用Celery完成異步和定時任務 二、實驗 1. 如何查看Django版本 一、實驗 1.Django使用Celery完成異步和定時任務 (1)安裝Django (2)新建Django項目 (3)初始框架 (4)urls.py引用視圖views from django.contrib import admin from django.urls imp…

python之UDP網絡應用程序開發

文章目錄 版權聲明UDP網絡應用程序開發UDP初識UDP知識要點socket類的使用UDP發送數據開發流程分析UDP服務客戶端通信栗子UDP廣播發送 版權聲明 本博客的內容基于我個人學習黑馬程序員課程的學習筆記整理而成。我特此聲明&#xff0c;所有版權屬于黑馬程序員或相關權利人所有。…

CodeWhisperer 體驗總結

CodeWhisperer 體驗總結 | CodeWhisperer 是一款亞馬遜新推出的通用代碼生成器 可以實時進行代碼數據的提供 還可以定義安全問題 CodeWhisperer 對個人用戶是免費使用 企業用戶需要訂閱使用 亞馬遜云科技開發者社區為開發者們提供全球的開發技術資源。這里有技術文檔、開發案例…

Linux:配置Ubuntu系統的鏡像軟件下載地址

一、原理介紹 好處&#xff1a;從國內服務器下載APT軟件&#xff0c;速度快。 二、配置 我這里配置的是清華大學的鏡像服務器地址 https://mirrors.tuna.tsinghua.edu.cn/ 1、備份文件 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak2、清空sources.list ec…