我的JS體系完善（一）

我的JS體系整理（一）

一. 原型

JS每聲明一個Function，都有Prototype原型，Prototype原型是函數的一個默認屬性，在函數的建立過程當中由JS編譯器自動添加，也就是說每當生產一個Function對象的時候，就有一個原型Prototype。按照Javascript的說法，Function定義的Object(對象),是一個很特殊的對象，這個使用Function定義的對象與使用New操做符生成的對象之間有一個重要的區別，這個區別就是Function定義的對象有一個Prototype屬性，稱之爲函數對象，而使用New生成的對象就沒有這個Prototype屬性，稱之爲普通對象。

圖1.1

如上圖所示，第一個Console結果爲Undifined，證實了New的對象是沒有原型Prototype的；第二個Console結果爲增長原型Name之後的原函數，證實了只有函數對象才具備原型Prototype；第三個Console的結果爲’hangzhou’，證實了經過原型增長的屬性是存在的；第四個Console的結果爲’hangzhou’，證實了經過原型增長的屬性，是能夠在該對象所具備的方法裏面進行調用獲取到的。

圖1.2

如上圖所示，若是原函數自己的屬性或方法與利用原型增長的屬性或方法重名時，默認調用的依舊是該函數對象自己的屬性或者方法，即函數自己的屬性或者方法的優先級高於原型的屬性或者方法。

二. 原型鏈

官方對於原型鏈的解釋是原型鏈是實現繼承的主要方法，其基本思想是利用原型讓一個引用類型繼承另外一個應用類型的屬性和方法。通俗一些理解，每一個對象都會在其內部初始化一個屬性，就是Prototype(原型)，當咱們訪問一個對象的屬性時， 若是這個對象內部不存在這個屬性，那麼他就會去Prototype裏找這個屬性，這個Prototype又會有本身的Prototype， 因而就這樣一直找下去，也就是咱們平時所說的原型鏈的概念。

提到原型鏈，就要提一個詞_proto_，它是基本對象的屬性，相對應的就是每個函數對象都有一個本身的Prototype原型，因爲函數對象也屬於基本對象，因此函數對象也有_proto_，每當去定義一個Prototype的時候，就至關於把該實例的__proto__指向一個結構體，那麼這個被指向結構體就稱爲該實例的原型。 

圖2.1

當你定義一個函數對象的時候，其內部就有這樣一個鏈表關係。聲明foo對象，自帶了_proto_的屬性，而這個屬性指向了Prototype，從而實現對象的擴展（例如繼承等操做）。

圖2.2

如上圖所示，一個沒有繼承操做的函數的_proto_都會指向Object.Prototype，而Object.Prototype都會指向Null。

圖2.3

如上圖所示，定義兩個函數對象A和B，每一個對象分別具備一個屬性和方法。他們兩個函數對象的區別是B繼承了A，而繼承是經過建立A的實例，並將實例賦給B.Prototype實現的。實現的本質是重寫原型的對象，代之以一個新的類型的實例。換句話說，原來存在於A的實例中的全部屬性和方法，如今也存在於B.Prototype中了。在確立了繼承關係以後，咱們給B.Prototype添加了一個方法，這樣就繼承A的屬性和方法的基礎上又添加了一個新方法。而後繼續建立一個B的實例C，這樣C就具備了B的所有方法和屬性，因此Console的結果分別是111與222。

前端面試拓展：

圖2.4

p沒有b屬性，會一直經過__proto__向上查找，最後當查找到Object.Prototype時找到，最後打印出b，向上查找過程當中，獲得的是Object.Prototype，而不是Function.Prototype，因此找不到a屬性，因此結果爲Undefined，這就是原型鏈，經過__proto__向上進行查找，最終到Null結束。最終邏輯即下圖：

圖2.5

三. 對象簡介

 對象的定義：對象是Javascript的一個基本數據類型，是一種複合值，它將不少值（原始值或者其餘對象）聚合在一塊兒，可經過名字訪問這些值。即屬性的無序集合。

第一：Javascript對象是基本數據類型之一，是複合類型；

第二：Javascript中幾乎全部事物都是作對象；

第三：Javascript的對象是擁有屬性和方法的數據；

第四：Javascript 中的對象能夠簡單理解成"名稱:值"對(name:value)。名稱（name）："名稱"部分是一個 Javascript 字符串

圖3.1

第一種建立對象方式如上圖所示，直接建立一個對象，或者叫作對象直接量、字面量。

圖3.2

第二種建立對象方式如上圖所示，經過new.object建立對象，該方法只能建立系統自帶的對象，如：new Object(), Array(), Number(),Boolean(), Date()...

圖3.3

第三種建立對象方式如上圖所示，經過構造函數的形式建立對象，構造函數通常使用駝峯式命名方法命名。

 

圖3.4

第四種建立對象方式如上圖所示，建立一個繼承該原型的實例對象。

四. 數據類型和內存圖

棧：原始數據類型（Undefined，Null，Boolean，Number、String）。

堆：引用數據類型（對象、數組和函數）。

兩種類型的區別是：存儲位置不一樣。原始數據類型是直接存儲在棧(stack)中的簡單數據段，佔據空間小、大小固定，屬於被頻繁使用數據，因此放入棧中存儲；引用數據類型是存儲在堆(heap)中的對象,佔據空間大、大小不固定。若是存儲在棧中，將會影響程序運行的性能；引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址後從堆中得到實體。

圖4.1

五. 做用域

變量的做用域無非就是兩種：全局變量和局部變量。

全局做用域：最外層函數定義的變量擁有全局做用域，即對任何內部函數來講，都是能夠訪問的。

局部做用域：和全局做用域相反，局部做用域通常只在固定的代碼片斷內可訪問到，而對於函數外部是沒法訪問的，最多見的例如函數內部。須要注意的是，函數內部聲明變量的時候，必定要使用var或者let命令。若是不用的話，你實際上聲明瞭一個全局變量！

圖5.1

只要函數內定義了一個局部變量，函數在解析的時候都會將這個變量「提早聲明」。另外Javascript並無所謂的塊級做用域，Javascript的做用域是相對函數而言的，能夠稱爲函數做用域：

全局函數沒法查看局部函數的內部細節，但局部函數能夠查看其上層的函數細節，直至全局細節。當須要從局部函數查找某一屬性或方法時，若是當前做用域沒有找到，就會上溯到上層做用域查找，直至全局函數。

 

本文參考連接：

一、https://www.cnblogs.com/libin-1/p/5911190.html

二、https://www.cnblogs.com/foodoir/p/5971686.html

三、https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers