圖文詳解JavaScript的原型對(duì)象及原型鏈
對(duì)于新人來(lái)說(shuō),JavaScript的原型是一個(gè)很讓人頭疼的事情,一來(lái)prototype容易與__proto__混淆,二來(lái)它們之間的各種指向?qū)嵲谟行?fù)雜,其實(shí)市面上已經(jīng)有非常多的文章在嘗試說(shuō)清楚,有一張所謂很經(jīng)典的圖,上面畫了各種線條,一會(huì)連接這個(gè)一會(huì)連接那個(gè),說(shuō)實(shí)話我自己看得就非常頭暈,更談不上完全理解了。所以我自己也想嘗試一下,看看能不能把原型中的重要知識(shí)點(diǎn)拆分出來(lái),用最簡(jiǎn)單的圖表形式說(shuō)清楚。
我們知道原型是一個(gè)對(duì)象,其他對(duì)象可以通過(guò)它實(shí)現(xiàn)屬性繼承。但是尼瑪除了prototype,又有一個(gè)__proto__是用來(lái)干嘛的?長(zhǎng)那么像,讓人怎么區(qū)分呢?它們都指向誰(shuí),那么混亂怎么記啊?原型鏈又是什么鬼?相信不少初學(xué)者甚至有一定經(jīng)驗(yàn)的老鳥(niǎo)都不一定能完全說(shuō)清楚,下面用三張簡(jiǎn)單的圖,配合一些示例代碼來(lái)理解一下。
一、prototype和__proto__的區(qū)別
var a = {}; console.log(a.prototype); //undefined console.log(a.__proto__); //Object {} var b = function(){} console.log(b.prototype); //b {} console.log(b.__proto__); //function() {}
/*1、字面量方式*/ var a = {}; console.log(a.__proto__); //Object {} console.log(a.__proto__ === a.constructor.prototype); //true /*2、構(gòu)造器方式*/ var A = function(){}; var a = new A(); console.log(a.__proto__); //A {} console.log(a.__proto__ === a.constructor.prototype); //true /*3、Object.create()方式*/ var a1 = {a:1} var a2 = Object.create(a1); console.log(a2.__proto__); //Object {a: 1} console.log(a.__proto__ === a.constructor.prototype); //false(此處即為圖1中的例外情況)
var A = function(){}; var a = new A(); console.log(a.__proto__); //A {}(即構(gòu)造器function A 的原型對(duì)象) console.log(a.__proto__.__proto__); //Object {}(即構(gòu)造器function Object 的原型對(duì)象) console.log(a.__proto__.__proto__.__proto__); //null
以上就是本文的全部?jī)?nèi)容了,本文用三張圖解釋了JavaScript的原型對(duì)象與原型鏈,希望對(duì)大家學(xué)習(xí)JavaScript的時(shí)候有所幫助。
- 一文秒懂JavaScript構(gòu)造函數(shù)、實(shí)例、原型對(duì)象以及原型鏈
- 詳解js中的原型,原型對(duì)象,原型鏈
- js 原型對(duì)象和原型鏈理解
- 淺談JS原型對(duì)象和原型鏈
- JS原型對(duì)象操作實(shí)例分析
- JavaScript原型對(duì)象原理與應(yīng)用分析
- JavaScript原型對(duì)象、構(gòu)造函數(shù)和實(shí)例對(duì)象功能與用法詳解
- js使用原型對(duì)象(prototype)需要注意的地方
- javascript構(gòu)造函數(shù)以及原型對(duì)象的理解
- 深入理解javascript構(gòu)造函數(shù)和原型對(duì)象
- 全面解析js中的原型,原型對(duì)象,原型鏈
相關(guān)文章
JS中split()用法(將字符串按指定符號(hào)分割成數(shù)組)
這篇文章主要介紹了JS中split()用法(將字符串按指定符號(hào)分割成數(shù)組)的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10webpack中使用Eslint的實(shí)現(xiàn)
本文主要介紹了webpack中使用Eslint的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07自己使用js/jquery寫的一個(gè)定制對(duì)話框控件
自己做一個(gè)通用的控件,雖然不是絕對(duì)通用啦,但在我這個(gè)項(xiàng)目里還是可以隨意調(diào)用的,思想的話也可以借鑒到別的項(xiàng)目中2014-05-05javascript實(shí)現(xiàn)des解密加密全過(guò)程
這篇文章主要介紹了javascript 實(shí)現(xiàn)des解密加密的過(guò)程,需要的朋友可以參考下2014-04-04javascript生成不重復(fù)的隨機(jī)數(shù)
這篇文章主要介紹了javascript在指定范圍內(nèi)生成不重復(fù)的隨機(jī)數(shù)的方法和相關(guān)實(shí)例,有需要的小伙伴可以參考下。2015-07-07Bootstrap樹(shù)形菜單插件TreeView.js使用方法詳解
這篇文章主要為大家詳細(xì)介紹了Bootstrap樹(shù)形菜單插件TreeView.js使用方法,一款非??岬幕赽ootstrap的jQuery多級(jí)列表樹(shù)插件,具有一定的實(shí)用性,感興趣的小伙伴們可以參考一下2016-11-11JavaScript實(shí)現(xiàn)垂直向上無(wú)縫滾動(dòng)特效代碼
下面小編就為大家?guī)?lái)一篇JavaScript實(shí)現(xiàn)垂直向上無(wú)縫滾動(dòng)特效代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11