Javascript重溫OOP之原型與原型鏈

prototype原型對象

每個函數都有一個默認的prototype屬性,其實際上還是一個對象,如果被用在繼承中,姑且叫做原型對象。

在構造函數中的prototype中定義的屬性和方法,會被創建的對象所繼承下來。舉個栗子:

function F(){}
F.prototype.work = function(){console.log('F is working..');
};
var f = new F();
f.work(); // F is working..

當你創建函數時,JS會為這個函數自動添加?prototype?屬性,值是空對象。而一旦你把這個函數當作構造函數(?constructor?)調用(即通過 new 關鍵字調用),那么JS就會幫你創建該構造函數的實例,實例繼承構造函數?prototype?的所有屬性和方法(實例通過設置自己的?__proto__?指向承構造函數的?prototype?來實現這種繼承)。

神秘的__proto__

JS的對象中都包含了一個__proto__屬性,其指向的是創建該對象時的構造函數的原型對象prototype。

clipboard.png

從上面的輸出結果看出,f.__proto__指向了其構造函數F的prototype,而F.prototype本身也是一個對象,其內部也有__proto__屬性,其指向的是Object.prototype,直到最后Object.prototype指向null,這條原型鏈才結束。

因此,__proto__這個神秘的屬性才是原型鏈形成的真正原因。

原型鏈

由于原型對象本身也是對象,根據上邊的定義,它也有自己的原型,而它自己的原型對象又可以有自己的原型,這樣就組成了一條鏈,這個就是原型鏈,JavaScritp引擎在訪問對象的屬性時,如果在對象本身中沒有找到,則會去原型鏈中查找,如果找到,直接返回值,如果整個鏈都遍歷且沒有找到屬性,則返回undefined。原型鏈一般實現為一個鏈表,這樣就可以按照一定的順序來查找。

下面是一張經典的圖:

clipboard.png

從上圖看出:

  1. Object.prototype是頂級對象,所有對象都繼承自它。

  2. Function?繼承?Function?本身,?Function.prototype?繼承?Object.prototype?。

  3. Function.prototype?和?Function.__proto__?都指向?Function.prototype

  4. Object.prototype.__proto__?===?null?,說明原型鏈到?Object.prototype?終止。

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

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

相關文章

webpack超詳細配置

在這里就不詳細介紹webpack來源以及作用了, 本篇博文面向新手主要說明如何配置webpack, 以及webpack的使用方法, 直到創建出一個合理的屬于自己webpack項目; 流程 webpack安裝 Step 1: 首先安裝Node.js, 可以去Node.js官網下載.Step2: 在Git或者cmd中輸入下面這段代碼, 通過全局…

小白十分鐘-推薦導航欄

大腿繞道&#xff0c;給小白學習用&#xff0c;上代碼 <div class"list"><div class"infor"><ul class"left"><li><a href"">限時特價</a></li><li><a href"">熱門推…

Underscore.js常用方法介紹

Underscore.js是一個很精干的庫&#xff0c;壓縮后只有4KB。它提供了幾十種函數式編程的方法&#xff0c;彌補了標準庫的不足&#xff0c;大大方便了JavaScript的編程。MVC框架Backbone.js就將這個庫作為自己的工具庫。除了可以在瀏覽器環境使用&#xff0c;Underscore.js還可以…

掌握ES6/ES2015核心內容

ECMAScript 6&#xff08;以下簡稱ES6&#xff09;是JavaScript語言的下一代標準。因為當前版本的ES6是在2015年發布的&#xff0c;所以又稱ECMAScript 2015。 也就是說&#xff0c;ES6就是ES2015。 雖然目前并不是所有瀏覽器都能兼容ES6全部特性&#xff0c;但越來越多的程序員…

express-generator——Express應用生成器賊快!

通過應用生成器工具 express 可以快速創建一個應用的骨架。 通過如下命令安裝&#xff1a; $ npm install express-generator -g-h 選項可以列出所有可用的命令行選項&#xff1a; $ express -hUsage: express [options] [dir]Options:-h, --help output usage inform…

轉:canvas--放大鏡效果

<!DOCTYPE html><html><head><meta charset"UTF-8"><title>鼠標事件</title></head><body><canvas id"canvas"></canvas><canvas id"offCanvas" style" display: none;&qu…

MON

早上5點,咪咪牛就醒了,開始跳到我邊上,用白毛毛把我弄醒,在我身上走來走去,把她按住撫摸也不能讓她停止.....只能拎起來扔到邊上了 ;)看起來還的確是很調皮的貓咪呢昨天晚上就開始不太怕我了,走到我的椅子邊上喵喵叫,直到把她放在身上,才慢慢睡覺,滿可愛的早上出門叫車,一車正停…

CSS做個Switch開關

Switch開關&#xff1a;根據需求可知&#xff0c;Switch開關只有兩種選擇&#xff0c;true或false。所以我們想到HTML的checkbox控件&#xff0c;用它來做。  <input id"switch" type"checkbox" class"switch" />但是在瀏覽器中&#xf…

vue小記錄1

1.入口index.html文件 做reset.css初始化&#xff0c;視口viewport設置 2.規范化eslint配置&#xff08;常用&#xff09; &#xff08;1&#xff09;rules -->"semi"分號 "semi":[error,alway], &#xff08;2&#xff09;indent 空格 "inde…

解決虛擬機能ping通宿主機,而宿主機不能ping通虛擬機

解決虛擬機能ping通宿主機&#xff0c;而宿主機不能ping通虛擬機 首先&#xff0c;查看宿主機的網卡狀態 如果沒有&#xff0c;打開虛擬機&#xff0c;選擇編輯 打開虛擬網絡編輯器&#xff0c;并選擇更改設置 勾選將設備適配器連接此網絡 完成&#xff0c;這樣宿主機便可以pin…

mongo使用學習FAQ

1:mongo的集合和database區分大小寫么? 在 MongoDB 中&#xff0c;數據庫和集合的名稱是區分大小寫的。這意味著&#xff0c;數據庫 MyDatabase 和 mydatabase 或集合 MyCollection 和 mycollection 會被視為不同的數據庫或集合。因此&#xff0c;在操作數據庫和集合時&#…

前端下載的實現

前端很多項目中&#xff0c;都有文件下載的需求&#xff0c;特別是JS生成文件內容&#xff0c;然后讓瀏覽器執行下載操作&#xff08;例如在線圖片編輯、在線代碼編輯、iPresst等&#xff09;。但受限于瀏覽器&#xff0c;很多情況下我們都只能給出個鏈接&#xff0c;讓用戶點擊…

V記錄2(文檔)Vue.extend構造器

1.簡單介紹 Vue.extend(options) 參數&#xff1a;對象 用法&#xff1a;使用Vue構造器&#xff0c;創建一個“子類”&#xff0c;參數是一個包含組件選項的對象&#xff0c;其中,data選項中必須是函數 描述&#xff1a;Vue.extend返回的是一個“擴展實例構造器”&#xff0c;也…

在javascript中,如何判斷一個被多次encode 的url 已經被decode到原來的格式?

% 而不能被無限次decodeURIComponent 可以用%來進行判斷 轉載于:https://www.cnblogs.com/zhouyideboke/p/11169705.html

推薦base.css

學習《編寫高質量代碼--Web前端開發修煉之道》 /* CSS Document */ /*css reset*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{ border-collapse:collapse;border-spacing:0;} fieldest,i…

如何通過RFID開發來迎接第四次工業革命(轉)

我們都經歷了革命性的沖擊&#xff0c;自上世紀90年代初的互聯網沖擊了文化和商業&#xff0c;但很少人知道如何完成RFID開發來迎接第四次工業革命&#xff0c;在接下來的二十年里&#xff0c;智能工廠的出現將成為一個重要組成部分。制造業作為我國工業的主體&#xff0c;面臨…

對js數組去重的研究

1.利用es5 let arr [1, 2, 3, 4, 5, 6, 7, 1, 2, 3] const uniquearr>{ return Array.from(new Set(arr)) } console.log(unique(arr))2.通過雙層循環使用splice刪除 let arr [1, 2, 3, 4, 5, 6, 7, 1, 2, 3] const uniquearr>{ // return Array.from(new Se…

一些前端開發經典書籍推薦和下載鏈接分享

下面的這些書都是我曾看過或了解過的&#xff1a; 一.HTML 1.《HTML5權威指南》 非常全面的書&#xff0c;內容也很新&#xff0c;包含了HTML5CSS3JS DOM。 下載鏈接&#xff1a;http://pan.baidu.com/s/1qYGn1qW HTML我暫時沒看什么書&#xff0c;學會了大部分的標簽后我…

RFID圖書管理系統程序源代碼(轉)

RFID圖書管理系統程序源代碼https://wenku.baidu.com/view/5f4e47f0c9d376eeaeaad1f34693daef5ef713d9.html

UOJ310 黎明前的巧克力 FWT

傳送門 我們要求的是\([x^0]\prod\limits_{i1}^n (2x^{a_i}1)\)&#xff0c;其中乘積定義為集合對稱差卷積。 這個直接做復雜度太高了&#xff0c;考慮優化。注意到在FWT之后&#xff0c;每一個序列中的值要么是\(3\)&#xff0c;要么是\(-1\)&#xff0c;而且這個只跟\(a_i\)有…