JavaScript共有屬性（原型）（prototype/proto）

tigerZH 發(fā)布于2019-08-26 12:01 / 1730人閱讀

摘要：這個(gè)就指向了類(lèi)型的共有方法庫(kù)這個(gè)就表示類(lèi)型的共有方法庫(kù)里所有的方法簡(jiǎn)單類(lèi)型和對(duì)象諸如像下面代碼所示，就是簡(jiǎn)單類(lèi)型的簡(jiǎn)單聲明。

標(biāo)題中，__proto__的__是由兩個(gè)_組成的

共有屬性（原型）

這個(gè)概念就是，一段代碼有諸多個(gè)對(duì)象，對(duì)象有很多的屬性、方法，把這么多個(gè)對(duì)象相同的屬性、方法提取出來(lái)，弄在一個(gè)新對(duì)象里，大家一起用。對(duì)象里就只要存儲(chǔ)新對(duì)象的地址，到時(shí)候要用到這些屬性、方法了，再調(diào)出來(lái)使用。

看下圖，簡(jiǎn)易內(nèi)存圖。左邊原始代碼區(qū)里聲明了新對(duì)象O1,var O1=new Object()，右邊Heap里存儲(chǔ)（從左往右看第一個(gè)箭頭的右邊都是Heap，沒(méi)有Stack）。左邊原始代碼區(qū)里又聲明了新對(duì)象O2,var O2=new Object()，右邊Heap里存儲(chǔ)。作為一個(gè)對(duì)象，有些方法是都有的，比如toString(),valueOf等，所以提取出來(lái)，放在共有屬性的Heap里，地址隨機(jī)為A100，那么O1，O2的Heap里就存放共有屬性的地址__proto__:A100。你寫(xiě)代碼O1.toString()，就順著上面的箭頭找到O1的Heap，找一遍沒(méi)有，又找到__proto__里好像有東西，就找到了共有屬性的Heap，里面有toString()方法。

__proto__ 和 prototype的區(qū)別

個(gè)人理解，__proto__是個(gè)地址，用于指向另一個(gè)對(duì)象，比如某個(gè)共有方法庫(kù)。prototype就是本個(gè)對(duì)象所有方法的集合。

var a=new Number(1);
a.__proto__                //這個(gè)就指向了Number類(lèi)型的共有方法庫(kù)
a.__proto__.prototype      //這個(gè)就表示Number類(lèi)型的共有方法庫(kù)里所有的方法

簡(jiǎn)單類(lèi)型和對(duì)象

諸如像下面代碼所示，就是簡(jiǎn)單類(lèi)型的簡(jiǎn)單聲明。這樣子聲明的變量只包含簡(jiǎn)單類(lèi)型值，沒(méi)有別的像toString(),valueOf,toFixed......等等的方法

var a=1;
var b="abc";
var c=true;

諸如像下面代碼所示，就是簡(jiǎn)單類(lèi)型的對(duì)象聲明。這樣子聲明的變量除了包含簡(jiǎn)單類(lèi)型值，還自帶了一些類(lèi)型專(zhuān)屬方法和對(duì)象方法等等的方法

var a=new Number(1);
var b=new String("abc");
var c=new Boolean(true);

類(lèi)型專(zhuān)屬方法和對(duì)象方法就是上面講的共有屬性（原型）。這就好像，所有的Number類(lèi)型有自己的方法庫(kù)，所有的String類(lèi)型有自己的方法庫(kù)，所有的Boolean類(lèi)型有自己的方法庫(kù)，這些都是對(duì)象，所以最后所有Object類(lèi)型有一個(gè)最最通用的方法庫(kù)。畫(huà)成圖如下圖。

S1，S2 → String類(lèi)型 → 自己的Heap → String類(lèi)型方法庫(kù) → Object方法庫(kù)

n1，n2 → Number類(lèi)型 → 自己的Heap → Number類(lèi)型方法庫(kù) → Object方法庫(kù)

b1，b2 → Boolean類(lèi)型 → 自己的Heap → Boolean類(lèi)型方法庫(kù) → Object方法庫(kù)

o1，o2 → Object類(lèi)型 → 自己的Heap → Object方法庫(kù)

簡(jiǎn)單聲明和對(duì)象聲明的區(qū)別

講道理，用起來(lái)沒(méi)啥區(qū)別，方法該調(diào)用的調(diào)用，屬性該有的都一樣有。但實(shí)際上，是JavaScript自己做了處理的，方便了開(kāi)發(fā)人員。

你先用簡(jiǎn)單聲明聲明一個(gè)簡(jiǎn)單類(lèi)型var n=1

簡(jiǎn)單類(lèi)型缺點(diǎn)是，它就是一個(gè)值，啥也沒(méi)有，想對(duì)它進(jìn)行各種操作，不行

怎么辦！這樣也太傻太沒(méi)用了吧??！那，臨時(shí)轉(zhuǎn)換下吧~~~

臨時(shí)轉(zhuǎn)換：

當(dāng)你寫(xiě)下這樣的代碼var b=n.toString();

建立臨時(shí)變量temp，var temp=new Number(n)

這樣就可以調(diào)用temp的toString()方法了，temp.toString()

好了，臨時(shí)轉(zhuǎn)換好了，正確返回了n.toString()

最后刪除臨時(shí)變量temp，結(jié)束，temp來(lái)了、做了、走了

再來(lái)看看內(nèi)存圖

左邊原始代碼區(qū)，簡(jiǎn)單聲明變量var n=1;，中間Stack里存儲(chǔ)n的值

調(diào)用方法n.toString()，Stack里建立新變量temp，這是個(gè)對(duì)象，所以Heap里存儲(chǔ)temp的所有內(nèi)容，Stack里存儲(chǔ)Heap地址ADDR 6

這樣n.toString()，就等于temp.toString()

返回temp.toString()后，temp就被磨滅了，Heap里的內(nèi)容也隨之消失

Number類(lèi)型

兩種聲明方式

var a=1;
var b=new Number(1);

Number類(lèi)型專(zhuān)屬方法

聲明了一個(gè)變量，輸出變量后看到，里面就只有一個(gè)東西__proto__，這是個(gè)地址，指向Number類(lèi)型公用的方法庫(kù)

點(diǎn)開(kāi)__proto__，看到的就是Number類(lèi)型共用的方法庫(kù)

里邊看到還有個(gè)__proto__，因?yàn)镹umber類(lèi)型也是對(duì)象呀，所以這個(gè)__proto__指向Object類(lèi)型公用的方法庫(kù)。點(diǎn)開(kāi)這個(gè)__proto__，就看到了Object類(lèi)型公用的方法庫(kù)

Number類(lèi)型常用方法

toString()
toFixed()
toExponential()
valueOf()

charCodeAt(0)
toString(16)

String類(lèi)型

兩種聲明方式

var a="abc";
var b=new String("abc");

String類(lèi)型專(zhuān)屬方法

聲明了一個(gè)變量，輸出變量后看到，里面除了這個(gè)String對(duì)象的信息，還有一個(gè)東西__proto__，這是個(gè)地址，指向String類(lèi)型公用的方法庫(kù)

點(diǎn)開(kāi)__proto__，看到的就是String類(lèi)型共用的方法庫(kù)

。
。
。

里邊看到還有個(gè)__proto__，因?yàn)镾tring類(lèi)型也是對(duì)象呀，所以這個(gè)__proto__指向Object類(lèi)型公用的方法庫(kù)。點(diǎn)開(kāi)這個(gè)__proto__，就看到了Object類(lèi)型公用的方法庫(kù)

String類(lèi)型常用方法

trim()
concat()
slice()

Boolean類(lèi)型

兩種聲明方式

var a=true;
var b=new Boolean(true);

Boolean類(lèi)型專(zhuān)屬方法

聲明了一個(gè)變量，輸出變量后看到，里面就只有一個(gè)東西__proto__，這是個(gè)地址，指向Boolean類(lèi)型公用的方法庫(kù)

點(diǎn)開(kāi)__proto__，看到的就是Boolean類(lèi)型共用的方法庫(kù)

里邊看到還有個(gè)__proto__，因?yàn)锽oolean類(lèi)型也是對(duì)象呀，所以這個(gè)__proto__指向Object類(lèi)型公用的方法庫(kù)。點(diǎn)開(kāi)這個(gè)__proto__，就看到了Object類(lèi)型公用的方法庫(kù)

Boolean類(lèi)型常用方法

Object類(lèi)型

兩種聲明方式

var a={name:1};
var b=new Object({name:1});

Object類(lèi)型專(zhuān)屬方法

聲明了一個(gè)變量，輸出變量后看到，里面對(duì)象a基本信息，還有一個(gè)東西__proto__，這是個(gè)地址，指向Object類(lèi)型公用的方法庫(kù)

點(diǎn)開(kāi)__proto__，a本身就是對(duì)象沒(méi)有別的類(lèi)型，所以看到的就是Object類(lèi)型共用的方法庫(kù)

Object類(lèi)型常用方法

toString()
valueOf()

GPU云服務(wù)器云服務(wù)器 javascript__ajax _javascript _JavaScript_API _JavaScript_MVC

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/108024.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

tigerZH

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

【C語(yǔ)言】超詳講解??指針是個(gè)什么針？（一次性搞定指針問(wèn)題）

閱讀 1497·2021-09-23 11:21
前端那些小眾而又精美的網(wǎng)站及工具

閱讀 3172·2019-08-30 14:14
canvas動(dòng)畫(huà)合集Vue組件

閱讀 3249·2019-08-30 13:56
vue transition 過(guò)渡動(dòng)畫(huà) 從左向右進(jìn)入，從右向左進(jìn)入

閱讀 4262·2019-08-30 11:20
輸入 url 到頁(yè)面展現(xiàn)的短短幾秒內(nèi)瀏覽器究竟做了什么？

閱讀 2020·2019-08-29 17:23
采用20/80原則學(xué)習(xí) CSS Grid 布局

閱讀 2837·2019-08-29 16:14
玩兒前端——CSS垂直的那些事兒

閱讀 1763·2019-08-28 18:18
Promise學(xué)習(xí)筆記

閱讀 1544·2019-08-26 12:14

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JavaScript共有屬性（原型）（prototype/proto）

相關(guān)文章

原型鏈一：原型與原型鏈

JS面向?qū)ο蠖?this/原型鏈/new原理

淺談：快速理解JS的原型與原型鏈

JS題目總結(jié):原型鏈/new/json/MVC/Promise

原型與原型鏈

發(fā)表評(píng)論

0條評(píng)論

tigerZH

男|高級(jí)講師

TA的文章

【C語(yǔ)言】超詳講解??指針是個(gè)什么針？（一次性搞定指針問(wèn)題）

前端那些小眾而又精美的網(wǎng)站及工具

canvas動(dòng)畫(huà)合集Vue組件

vue transition 過(guò)渡動(dòng)畫(huà) 從左向右進(jìn)入，從右向左進(jìn)入

輸入 url 到頁(yè)面展現(xiàn)的短短幾秒內(nèi)瀏覽器究竟做了什么？

采用20/80原則學(xué)習(xí) CSS Grid 布局

玩兒前端——CSS垂直的那些事兒

Promise學(xué)習(xí)筆記

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JavaScript共有屬性（原型）（prototype/__proto__）

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JavaScript共有屬性（原型）（prototype/proto）