常見的面試問題總結

***完全理解瀏覽器緩存機制***

兩個概念

• 強緩存
  用戶發送的請求，直接從客戶端緩存中獲取，不發送請求到服務器，不與服務器發生交互行爲。

• 協商緩存
  用戶發送的請求，發送到服務器後，由服務器斷定是否從緩存中獲取資源。

• 二者共同點：客戶端得到的數據最後都是從客戶端緩存中得到。

• 二者的區別：從名字就能夠看出，強緩存不與服務器交互，而協商緩存則須要與服務器交互。

 

四個過程詳解

（a）瀏覽器斷定是否有緩存

（b）緩存是否過時

（c）跟服務器協商是否使用緩存

（d）協商緩存

 

瀏覽器緩存機制詳細瞭解：http://www.javashuo.com/article/p-uiwvkybf-z.html

 

***理解執行環境、做用域鏈和活動對象***

執行環境

​ 執行環境是JavaScript中最爲重要的一個概念。執行函數定義了變量或函數有權訪問的其它數據，決定了它們各自的行爲。每一個執行環境都有一個與之關聯的變量對象（variable object）和一個做用域鏈（scope chain），環境中定義的因此變量和函數都保存在其變量對象中。執行環境分爲兩種，一種是全局執行環境，一種是函數執行環境。

1. 全局執行環境

   ​ 全局執行環境是最外圍的一個執行環境，其變量對象就是全局活動對象（window activation object），全局執行環境直到應用程序退出——例如關閉網頁或瀏覽器——時纔會被銷燬。

2. 函數執行環境

   ​ 每一個函數都有本身的執行環境。當執行流進入一個函數時，函數環境就會被推入一個環境棧中。當函數執行完以後，棧將其環境彈出，把控制權返回給以前的執行環境。函數執行環境的變量對象是該函數的活動對象（activation object）。

做用域鏈

​ 對於每個執行環境，都會建立一個與之關聯的做用域鏈。每一個執行環境的做用域鏈的前端，始終都是該執行環境的變量對象，對於全局執行環境就至關於window對象，對於函數執行環境就至關於該函數的活動對象；對於全局執行環境，已是根部，沒有後續，對於函數執行環境，其做用域鏈的後續是該函數對象的[[scope]]屬性裏的做用域鏈。

函數對象

​ 在一個函數定義的時候， 會建立一個這個函數對象的[[scope]]屬性（內部屬性,只有JS引擎能夠訪問, 但FireFox的幾個引擎（SpiderMonkey和Rhino）提供了私有屬性__parent__來訪問它)，並將這個[[scope]]屬性指向定義它的做用域鏈上。 在這裏的問題中，由於funcA定義在全局環境, 因此此時的[[scope]]只是指向全局活動對象window active object。

活動對象

​ 在一個函數對象被調用的時候，會建立一個活動對象，首先將該函數的每一個形參和實參，都添加爲該活動對象的屬性和值；將該函數體內顯示聲明的變量和函數，也添加爲該活動的的屬性（在剛進入該函數執行環境時，未賦值，因此值爲undefined，這個是JS的提早聲明機制）。

​ 而後將這個活動對象作爲該函數執行環境的做用域鏈的最前端，並將這個函數對象的[[scope]]屬性裏做用域連接入到該函數執行環境做用域鏈的後端.

 

***ES6 Promise用法小結***

1.什麼是Promise

Promise 是異步編程的一種解決方案，實際上是一個構造函數，本身身上有all、reject、resolve這幾個方法，原型上有then、catch等方法。

Promise對象有如下兩個特色。

（1）對象的狀態不受外界影響。Promise對象表明一個異步操做，有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗）。只有異步操做的結果，能夠決定當前是哪種狀態，任何其餘操做都沒法改變這個狀態。這也是Promise這個名字的由來，它的英語意思就是「承諾」，表示其餘手段沒法改變。

（2）一旦狀態改變，就不會再變，任什麼時候候均可以獲得這個結果。Promise對象的狀態改變，只有兩種可能：從pending變爲fulfilled和從pending變爲rejected。只要這兩種狀況發生，狀態就凝固了，不會再變了，會一直保持這個結果，這時就稱爲 resolved（已定型）。若是改變已經發生了，你再對Promise對象添加回調函數，也會當即獲得這個結果。這與事件（Event）徹底不一樣，事件的特色是，若是你錯過了它，再去監聽，是得不到結果的。

ES6Promise瞭解更多：https://www.liaoxuefeng.com/wiki/1022910821149312/1023024413276544

 

***MVC、MVP及MVVM之間的關係***

概要

MVC、MVP及MVVM都是一種架構模式，爲了解決圖形界面應用程序複雜性管理問題而產生的應用架構模式。

MVC模式概要

1.即Model、View、Controller即模型、視圖、控制器。

• View：它是提供給用戶的操做界面，是程序的外殼；
• Model：是程序須要操做的數據和信息；
• Controller：接收View層傳遞過來的指令，選取Model層對應的數據，進行相應操做。

2.舉一個現實中的相似的例子，MVC如同一家商鋪的運做模式，View層至關因而這家商鋪的店面，Model層至關於這家商鋪的倉庫，Controller層至關因而這家商鋪的執行部門。

3.MVC有以下兩種模式，無論哪一種模式，MVC的通訊都是單向的，由圖也能夠看出，View層會從Model層拿數據，所以MVC中的View層和Model層仍是存在耦合的。

MVP模式概要

1.MVP是從MVC進化而來，即Model、View、Presenter；View和Model同MVC中的M和V，MVP只是將MVC中的Controller變成了Presenter；

2.由上面對MVC的介紹中咱們能夠得知，MVC中的View層和Model層是存在耦合的，但其實咱們不提倡View層與Model層有直接的交互；MVP就是這樣一種思想的體現，View層與Model的交互只能經過Presenter；

3.MVP與MVC還有一點不一樣是，它的通訊是雙向的，以下圖所示，有兩個方向：V—>P—>M，M—>P—>V

MVVM模式概要

 1.MVVM是由MVP進化而來，MVVM模式基本上與MVP相同，只是把MVP中的P變成了VM，即ViewModel，

2.MVVM中的數據能夠實現雙向綁定，即View層數據變化則ViewModel中的數據也隨之變化，反之ViewModel中的數據變化，則View層數據也隨之變化

3.這裏之前端框架VUE舉例說明MVVM，固然還有許多有名的框架都用的是MVVM模式；MVVM的好處就是數據驅動，數據變，則頁面變，這樣就能用簡單的代碼，實現比較複雜的邏輯操做；所以MVVM框架比較適合邏輯複雜的前端項目，好比一些管理系統等。

1）準備視圖層

<p>Hello, {{ name }}!</p>          --View層 --VUE中的單向綁定

<input v-model="name">             --View層 --VUE中的雙向綁定

2）準備數據層

data: {
            name: ''               --Model層
        }

至於VM層，VUE框架已封裝好，預知詳情可閱讀廖雪峯的博客；

4）得益於MVVM框架，咱們此時想改變視圖層的<p>標籤和<input>標籤中的name屬性的值，只須要經過以下方式便可，這樣頁面中就會顯示「Jack」的名字，若是不是MVVM框架，咱們則須要經過document.getElementById('name').innerHTML = 'jack'，這種操做dom節點的方式來改變頁面的值。

this.name = 'jack'