前端基本功-常見概念(一)

前端基本功-常見概念(一) 點這裏
前端基本功-常見概念(二) 點這裏
前端基本功-常見概念(三) 點這裏

1.什麼是原型鏈

當一個引用類型繼承另外一個引用類型的屬性和方法時候就會產生一個原型鏈。(js高級程序設計)

• 全部 引用類型 都有一個 __proto__ 屬性的隱式原型
• 全部 函數 都有一個 prototype屬性的顯式原型
• 全部 引用類型的 隱式原型，指向其構造函數的 顯式原型
• 當試圖獲得一個屬性或方法時，若是這個對象沒有，那麼會去他的__proto__(即它構造函數的prototype)中查找

原型鏈 是針對構造函數的，好比我先建立了一個函數，而後經過一個變量new了這個函數，那麼這個被new出來的函數就會繼承建立出來的那個函數的屬性，而後若是我訪問new出來的這個函數的某個屬性，可是我並無在這個new出來的函數中定義這個變量，那麼它就會往上（向建立出它的函數中）查找，這個查找的過程就叫作原型鏈。

2.什麼是閉包

有權訪問另外一個函數做用域中的變量函數。(js高級程序設計)
當一個函數存在對非自身做用域的變量的引用 就產生一個閉包
有權訪問另外一個做用域的函數就是閉包

閉包三點做用： 建立私有變量；延長變量生命週期；防止全局變量污染

3.什麼是做用域

就是函數和變量的可訪問範圍。

做用域 是針對變量的,特色是:先在本身的變量範圍中查找，若是找不到，就會沿着做用域往上找。
只有函數做用域和全局做用域（貌似還有個eval做用域），ES6中新增塊級做用域那是後話

函數外聲明的變量爲全局做用域，函數內可使用
函數內聲明的變量爲函數做用域，函數外不可使用

做用域鏈：一個自由變量一直往上尋找（定義時的）父級做用域內的變量的過程。

自由變量：當前做用域沒有定義的變量

做用域何時生成的？

頁面加載-->建立window全局對象，並生成全局做用域-->而後生成執行上下文，預解析變量(變量提高)，生成全局變量對象；$scope

補充：花括號內聲明的變量爲塊級做用域，只能內部使用，減小全局污染

JavaScript是靜態做用域，在對變量進行查詢時，變量值由函數定義時的位置決定，和執行時的所處的做用域無關。

4.什麼是構造函數

在 JavaScript 中，用 new 關鍵字來調用的函數，稱爲構造函數。

5.什麼是面向對象

ECMAscript開發的兩種模式：

1.面向過程: 就是分析出解決問題所須要的步驟，而後用函數把這些步驟一步一步實現，使用的時候一個一個依次調用就能夠了
2.面向對象(OOP): 面向對象是以功能來劃分問題，而不是步驟

• 面向對象的語言有一個標誌，那就是類的概念，而經過類能夠建立任意多個具備相同屬性的方法的對象。

  可是ECMAscript中沒有類的概念！prototype是javascript實現與管理繼承的一種機制，也是面向對象的設計思想,能夠藉助prototype屬性，能夠訪問原型內部的屬性和方法。

  一般使用構造函數，當構造函數被實列化後，全部的實例對象均可以訪問構造函數的原型（prototype）成員，若是在原型中聲明一個成員，全部的實列方法均可以共享它

• 面向對象編程的基本思想是使用對象，類，繼承，封裝等基本概念來進行程序設計，達到數據結構化，簡單抽象的目的（爲何面向對象）

  優勢

  • 易維護

採用面向對象思想設計的結構，可讀性高，因爲繼承的存在，即便改變需求，那麼維護也只是在局部模塊，因此維護起來是很是方便和較低成本的

- 易擴展
開發工做的重用性、繼承性高，下降重複工做量。
縮短了開發週期

面向對象的三大特性：繼承（子類繼承父類，提升複用減小冗餘），封裝（數據的權限和保密），多態（同一接口的不一樣實現）
面向對象離不開 類 和 實例 兩個概念

6.什麼是響應式設計？響應式設計的基本原理是什麼？

響應式網站設計(Responsive Web design)是一個網站可以兼容多個終端，而不是爲每個終端作一個特定的版本。
基本原理: 是經過媒體查詢檢測不一樣的設備屏幕尺寸作處理。

頁面頭部必須有meta聲明的viewport。

<meta name=’viewport’ content=」width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no」>

7.什麼是高階函數

• 函數能夠做爲參數傳遞
• 函數能夠做爲返回值輸出

8.什麼是函數式編程？

是指經過複合純函數來構建軟件的過程，它避免了共享的狀態、易變的數據、以及反作用。函數式編程是聲明式而不是命令式，而且應用程序狀態經過純函數流轉。

• 簡單說，"函數式編程"是一種"編程範式"（programming paradigm），也就是如何編寫程序的方法論
• 它具備如下特性：閉包和高階函數、惰性計算、遞歸、函數是"第一等公民"、只用"表達式"

進一步瞭解

9.css盒模型

盒模型 : margin、padding、border、content

• 標準盒模型

  width = content
  對應css屬性 box-sizing:content-box

• 怪異盒模型

  width = content + padding + border
  對應css屬性 box-sizing:border-box

10.關於跨域

關於跨域，有兩個誤區：

1. ✕ 動態請求就會有跨域的問題

✔ 跨域只存在於瀏覽器端，不存在於安卓/ios/Node.js/python/ java等其它環境

1. ✕ 跨域就是請求發不出去了

✔ 跨域請求能發出去，服務端能收到請求並正常返回結果，只是結果被瀏覽器攔截了之因此會跨域，是由於受到了同源策略的限制，同源策略要求源相同才能正常進行通訊，即協議、域名、端口號都徹底一致。

同源策略具體限制些什麼呢？

1. 不能向工做在不一樣源的的服務請求數據（client to server）

可是script標籤可以加載非同源的資源，不受同源策略的影響。

1. 沒法獲取不一樣源的document/cookie等BOM和DOM，能夠說任何有關另一個源的信息都沒法獲得 （client to client）

跨域最經常使用的方法，應當屬CORS

以下圖所示：

只要瀏覽器檢測到響應頭帶上了CORS，而且容許的源包括了本網站，那麼就不會攔截請求響應。

CORS把請求分爲兩種，一種是簡單請求，另外一種是須要觸發預檢請求，這二者是相對的，怎樣纔算「不簡單」？只要屬於下面的其中一種就不是簡單請求：
（1）使用了除GET/POST/HEAD以外的請求方式，如PUT/DELETE
（2）使用了除Content-Type/Accept等幾個經常使用的http頭這個時候就認爲須要先發個預檢請求，預檢請求使用OPTIONS方式去檢查當前請求是否安全

代碼裏面只發了一個請求，但在控制檯看到了兩個請求，第一個是OPTIONS，服務端返回：

詳見阮一峯的跨域資源共享CORS詳解

第二種經常使用的跨域的方法是JSONP

JSONP是利用了script標籤可以跨域，以下代碼所示：

function updateList (data) {
    console.log(data);
}

$body.append(‘<script src=「http://otherdomain.com/request?callback=updateList"></script>');

代碼先定義一個全局函數，而後把這個函數名經過callback參數添加到script標籤的src，script的src就是須要跨域的請求，而後這個請求返回可執行的JS文本：// script響應返回的js內容爲

updateList([{
    name: 'hello'
}]);

因爲它是一個js，而且已經定義了upldateList函數，因此能正常執行，而且跨域的數據經過傳參獲得。這就是JSONP的原理。

小結

跨域分爲兩種，一種是跨域請求，另外一種訪問跨域的頁面，跨域請求能夠經過CORS/JSONP等方法進行訪問，跨域的頁面主要經過postMesssage的方式。因爲跨域請求不但能發出去還能帶上cookie，因此要規避跨站請求僞造攻擊的風險，特別是涉及到錢的那種請求。

本節參考文章：我知道的跨域與安全

11.http/https

HTTP

超文本傳輸​​協議（HTTP）是用於傳輸諸如HTML的超媒體文檔的應用層協議。它被設計用於Web瀏覽器和Web服務器之間的通訊，但它也能夠用於其餘目的。 HTTP遵循經典的客戶端-服務端模型，客戶端打開一個鏈接以發出請求，而後等待它收到服務器端響應。 HTTP是無狀態協議，意味着服務器不會在兩個請求之間保留任何數據（狀態）。

HTTP是明文傳輸的，也就意味着，介於發送端、接收端中間的任意節點均可以知道大家傳輸的內容是什麼。這些節點多是路由器、代理等。

舉個最多見的例子，用戶登錄。用戶輸入帳號，密碼，採用HTTP的話，只要在代理服務器上作點手腳就能夠拿到你的密碼了。

用戶登錄 --> 代理服務器（作手腳）--> 實際受權服務器

在發送端對密碼進行加密？沒用的，雖然別人不知道你原始密碼是多少，但可以拿到加密後的帳號密碼，照樣能登錄。

HTTP是應用層協議，位於HTTP協議之下是傳輸協議TCP。TCP負責傳輸，HTTP則定義了數據如何進行包裝。

HTTPS

HTTPS相對於HTTP有哪些不一樣呢？其實就是在HTTP跟TCP中間加多了一層加密層TLS/SSL。

神馬是TLS/SSL？

通俗的講，TLS、SSL實際上是相似的東西，SSL是個加密套件，負責對HTTP的數據進行加密。TLS是SSL的升級版。如今提到HTTPS，加密套件基本指的是TLS。

傳輸加密的流程

原先是應用層將數據直接給到TCP進行傳輸，如今改爲應用層將數據給到TLS/SSL，將數據加密後，再給到TCP進行傳輸。

HTTPS是如何加密數據的

對安全或密碼學基礎有了解的同窗，應該知道常見的加密手段。通常來講，加密分爲對稱加密、非對稱加密（也叫公開密鑰加密）

HTTPS與HTTP的一些區別

• HTTPS協議須要到CA申請證書，通常免費證書不多，須要交費。
• HTTP協議運行在TCP之上，全部傳輸的內容都是明文，內容可能會被竊聽。HTTPS運行在SSL/TLS之上，SSL/TLS運行在TCP之上，全部傳輸的內容都通過加密的。
• HTTP和HTTPS使用的是徹底不一樣的鏈接方式，用的端口也不同，前者是80，後者是443。
• HTTPS能夠有效的防止運營商劫持，解決了防劫持的一個大問題。
• 不驗證通訊方的身份，通訊方的身份有可能遭遇假裝。
• 沒法證實報文的完整性，報文有可能遭篡改。

使用SPDY加快你的網站速度

谷歌推行一種協議(HTTP 之下SSL之上[TCP]),能夠算是HTTP2的前身,SPDY能夠說是綜合了HTTPS和HTTP二者優勢於一體的傳輸協議，好比

1. 壓縮數據(HEADER)
2. 多路複用
3. 優先級(能夠給請求設置優先級)

SPDY構成圖：

SPDY位於HTTP之下，TCP和SSL之上，這樣能夠輕鬆兼容老版本的HTTP協議(將HTTP1.x的內容封裝成一種新的frame格式)，同時可使用已有的SSL功能。

HTTP2

HTTP2.0能夠說是SPDY的升級版（其實本來也是基於SPDY設計的），可是，HTTP2.0 跟 SPDY 仍有不一樣的地方，主要是如下兩點

• HTTP2.0 支持明文 HTTP 傳輸，而 SPDY 強制使用 HTTPS
• HTTP2.0 消息頭的壓縮算法採用 HPACK，而非 SPDY 採用的 DEFLATE

http2 新特性

• 新的二進制格式（Binary Format），HTTP1.x的解析是基於文本。基於文本協議的格式解析存在自然缺陷，文本的表現形式有多樣性，要作到健壯性考慮的場景必然不少，二進制則不一樣，只認0和1的組合。基於這種考慮HTTP2.0的協議解析決定採用二進制格式，實現方便且健壯。
• 多路複用（MultiPlexing），支持單個鏈接屢次請求，即鏈接共享，即每個request都是是用做鏈接共享機制的。一個request對應一個id，這樣一個鏈接上能夠有多個request，每一個鏈接的request能夠隨機的混雜在一塊兒，接收方能夠根據request的 id將request再歸屬到各自不一樣的服務端請求裏面。
• header壓縮，如上文中所言，對前面提到過HTTP1.x的header帶有大量信息，並且每次都要重複發送，HTTP2.0使用encoder來減小須要傳輸的header大小，通信雙方各自cache一份header fields表，既避免了重複header的傳輸，又減少了須要傳輸的大小。
• 服務端推送（server push），同SPDY同樣，HTTP2.0也具備server push功能。目前，有大多數網站已經啓用HTTP2.0，例如YouTuBe，淘寶網等網站，利用chrome控制檯能夠查看是否啓用H2：

chrome=>Network=>Name欄右鍵=>√Protocol

本節參考文章：簡單比較 http https http2、HTTPS科普掃盲帖

12.GET/POST

1. GET在遊覽器回退會刷新，而POST會再次提交請求
2. GET請求會被遊覽器主動緩存，而POST不會，除非手動設置
3. GET請求參數會被完整的保留在遊覽器歷史記錄裏，而POST中的參數不會被保留
4. GET產生的URL地址能夠被收藏，而POST不能夠
5. GET參數經過URL傳遞，而POST放在Request body
6. GET請求只能進行URL編碼，而POST支持多種編碼方式
7. GET請求在URL中傳遞的參數是有長度限制的，而POST沒有限制
8. GET請求會把參數直接暴露在URL上，相比POST更安全
9. 對參數的數據類型，GET只接受ASCII字符，而POST沒有限制

1.請求參數：get參數附在URL後面?隔開，POST參數放在包體中
2.大小限制：GET限制爲2048字符，post無限制
3.安全問題：GET參數暴露在URL中，不如POST安全
4.瀏覽器歷史記錄：GET能夠記錄，POST無記錄
5.緩存：GET可被緩存，post無
6.書籤：GET可被收藏爲書籤，post不可
7.數據類型：GET只能ASCII碼，post無限制

13.MVC/MVVM

MVC

MVC是一種設計模式，它將應用劃分爲3個部分：數據(模型)、展現層(視圖)和用戶交互層。結合一下下圖，更能理解三者之間的關係。

換句話說，一個事件的發生是這樣的過程

1. 用戶和應用交互
2. 控制器的事件處理器被觸發
3. 控制器從模型中請求數據，並將其交給視圖
4. 視圖將數據呈現給用戶

MVVM

MVVM是Model-View-ViewModel的縮寫。mvvm是一種設計思想。Model 層表明數據模型，也能夠在Model中定義數據修改和操做的業務邏輯；View 表明UI 組件，它負責將數據模型轉化成UI 展示出來，ViewModel 是一個同步View 和 Model的對象。

在MVVM架構下，View 和 Model 之間並無直接的聯繫，而是經過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的， 所以View 數據的變化會同步到Model中，而Model 數據的變化也會當即反應到View 上。

ViewModel 經過雙向數據綁定把 View 層和 Model 層鏈接了起來，而View 和 Model 之間的同步工做徹底是自動的，無需人爲干涉，所以開發者只需關注業務邏輯，不須要手動操做DOM, 不須要關注數據狀態的同步問題，複雜的數據狀態維護徹底由 MVVM 來統一管理。

• 在以前的MVC中咱們提到一個控制器對應一個視圖，控制器用狀態機進行管理，若是項目足夠大的時候，狀態機的代碼量就變得很是臃腫，難以維護。
• 性能問題，在MVC中咱們大量的操做了DOM，而大量操做DOM會讓頁面渲染性能下降，加載速度變慢，影響用戶體驗。
• 最後就是當Model頻繁變化的時候，開發者就手動更新View，那麼數據的維護就變得困難。

爲了減少工做量，節約時間，一個更適合前端開發的架構模式就顯得很是重要，這時候MVVM模式在前端中的應用就應運而生。

mvvm和mvc區別

mvc和mvvm其實區別並不大。都是一種設計思想。主要就是mvc中Controller演變成mvvm中的viewModel。mvvm主要解決了mvc中大量的DOM 操做使頁面渲染性能下降，加載速度變慢，影響用戶體驗。和當 Model 頻繁發生變化，開發者須要主動更新到View 。

3種方式實現MVVM

defineProperty（VUE），髒檢查（angular），原生js實現（發佈訂閱者模式）

• 在Angular中實現數據的觀測使用的是髒檢查，就是在用戶進行可能改變ViewModel的操做的時候，對比之前老的ViewModel而後作出改變。
• vue.js 則是採用 數據劫持 結合 發佈者-訂閱者模式 的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。

本節參考文章：MVC/MVVM

14.axios優勢

• 同時支持瀏覽器端和服務端的請求
• 支持promise
• 支持請求和和數據返回的攔截
• 轉換請求返回數據，自動轉換JSON數據
• 取消請求
• 客戶端防止xsrf攻擊
• 在node端支持設置代理
• 內部一些針對具體項目環境的二次封裝

本節參考文章：axios優勢

15.普通函數/箭頭函數

• 一、當要求動態上下文的時候，就不可以使用箭頭函數，箭頭函數this的固定化
• 二、在使用=>定義函數的時候，this的指向是定義時所在的對象，而不是使用時所在的對象
• 三、不能夠看成構造函數，也就是說，不可使用new命令，不然會拋出一個錯誤
• 四、不可使用arguments對象，該對象在函數體內不存在。若是要用，能夠用Rest參數代替
• 五、不可使用yield命令，所以箭頭函數不能用做Generator函數

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say) {
        setTimeout(function () {
            console.log(this.type + 'says' + say)
        },1000)
    }
}
var animal = new Animal()
animal.says('hi') // undefined says hi

咱們再來看看=>的狀況

class Animal() {
    constructor() {
        this.type = 'animal'
    }
    says(say) {
        setTimeout(() => {
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}
var animal = new Animal()
animal.says('hi') // animal says hi

本節參考文章：前端面試之ES6篇