宮鵬面試題解析

請簡述HTML5離線存儲的方法和實現方式

在用戶沒有與因特網鏈接時，能夠正常訪問站點或應用，在用戶與因特網鏈接時，更新用戶機器上的緩存文件。 原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現。

如何使用： 一、頁面頭部像下面同樣加入一個manifest的屬性； 二、在cache.manifest文件的編寫離線存儲的資源； CACHE MANIFEST 必須的存儲類型 v0.11 CACHE: 要緩存的文件 js/app.js css/style.css NETWORK: 不須要緩存的文件 resourse/logo.png FALLBACK: offline.html 三、在離線狀態時，操做window.applicationCache進行需求實現。

cookie sessionStorage localStorage的區別

相同點 都存儲在客戶端。

不一樣點 1.存儲大小

cookie數據大小不能超過4k。 sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

2.有效時間

localStorage：存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據。 sessionStorage：數據在當前瀏覽器窗口關閉後自動刪除。 cookie：設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。

3.數據與服務器之間的交互方式

cookie的數據會自動的傳遞到服務器，服務器端也能夠寫cookie到客戶端 sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

什麼是防抖和節流，有什麼區別？如何實現？

防抖 觸發高頻事件後 n 秒內函數只會執行一次，若是 n 秒內高頻事件再次被觸發，則從新計算時間； 思路： 每次觸發事件時都取消以前的延時調用方法：

function debounce(fn) {
    let timeout = null; // 建立一個標記用來存放定時器的返回值
    return function () {
    clearTimeout(timeout); // 每當用戶輸入的時候把前一個 setTimeout clear 掉
    timeout = setTimeout(() => { // 而後又建立一個新的 setTimeout, 這樣就能保證輸入字符後的 interval 間隔內若是還有字符輸入的話，就不會執行 fn 函數
        fn.apply(this, arguments);
    }, 500);
    };
}
function sayHi() {
    console.log('防抖成功');
}

var inp = document.getElementById('inp');
inp.addEventListener('input', debounce(sayHi)); // 防抖
複製代碼

節流 高頻事件觸發，但在 n 秒內只會執行一次，因此節流會稀釋函數的執行頻率。 思路： 每次觸發事件時都判斷當前是否有等待執行的延時函數

function throttle(fn) {
    let canRun = true; // 經過閉包保存一個標記
    return function () {
        if (!canRun) return; // 在函數開頭判斷標記是否爲 true，不爲 true 則 return
        canRun = false; // 當即設置爲 false
        setTimeout(() => { // 將外部傳入的函數的執行放在 setTimeout 中
            fn.apply(this, arguments);
            // 最後在 setTimeout 執行完畢後再把標記設置爲 true(關鍵) 表示能夠執行下一次循環了。當定時器沒有執行的時候標記永遠是 false，在開頭被 return 掉
            canRun = true;
        }, 500);
    };
}
function sayHi(e) {
    console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));
複製代碼

Set map WeakSet 和 WeakMap的區別

set （集合） 1.成員不能重複 2.只有健值，沒有健名，有點相似數組。 3.能夠遍歷，方法有add, delete,has

WeakSet 1.成員都是對象 2.成員都是弱引用，隨時能夠消失。 能夠用來保存DOM節點，不容易形成內存泄漏 3.不能遍歷，方法有add, delete,has

map （字典） 1.本質上是健值對的集合，相似集合 2.能夠遍歷，方法不少，能夠幹跟各類數據格式轉換

weakmap 1.直接受對象做爲健名（null除外），不接受其餘類型的值做爲健名 2.健名所指向的對象，不計入垃圾回收機制 3.不能遍歷，方法同get,set,has,delete

ES5/ES6繼承除了寫法以外還有什麼區別？

ES5的繼承是經過prototype或構造函數機制來實現。

ES5的繼承實質上是先建立子類的實例對象，而後再將父類的方法添加到this上(Parent.apply(this))。

ES6的繼承機制實質上是先建立父類的實例對象this(因此必須先調用父類的super()方法)，而後再用子類的構造函數修改this。具體爲ES6經過class關鍵字定義類，裏面有構造方法，類之間經過extends關鍵字實現繼承。子類必須在constructor方法中調用super方法，不然新建實例報錯。由於子類沒有本身的this對象，而是繼承了父類的this對象，而後對其調用。若是不調用super方法，子類得不到this對象。

注意：super關鍵字指代父類的實例，即父類的this對象。在子類構造函數中，調用super後，纔可以使用this關鍵字，不然報錯。

說幾條寫javascript的基本規範

1.減小全局污染 咱們都知道javascript使用的是function來管理本身的做用域的，一個定義在函數內的變量對外界是不可見的。這有點相似於其餘語言的私有變量。對於javascript的執行環境來講，通常都有一個全局變量，在全部函數外能夠用this來指引，例如在瀏覽器斷是window，可是對於當過多的在全局環境下定義變量會形成各類各樣的問題，過多的全局變量放在堆棧裏還會形成內存的浪費。 2.變量名的提高，應該在函數內部中全部使用var聲明的變量都會提高到函數體頭部。以避免形成沒必要要的錯誤。 3.for循環

咱們常常會把for()循環寫成這種形式的。 for(var i=0,;i<myarray.length;i++)其實呢dom遍歷是須要時間的，若是咱們在數據不少的狀況下也這樣子寫的話，這樣子網頁的性能就會變差，因此咱們應該重複循環使用的是一開始遍歷獲得的結果myarray.length，把它保存在一個變量中，這樣子咱們就能夠不用循環遍歷再次進行操做了。

for(var i=0,max=myarray.length;i<max;i++) 4.用「===」取代"=="，前者是嚴格相等的意思，連數據類型也是須要相比較的，然後者提早會進行隱式的類型轉換。 5.花括號｛｝ 咱們若是使用了for循環或者是if語句的話，咱們都應該使用｛｝，即便是if後面的語句只有一行，咱們也應該要使用｛｝。 6.命名規則 構造器函數首字母大寫，如function Person(){} 經常使用變量用大寫字母PI。 7.寫註釋。 8.不要在同一個行內聲明多個變量。 9.Switch語句中必須帶有default分支，

簡述如何實現數組的隨機排序

var arr = [1,2,3,4,5,6,7,8,9]
function randomsort1 (arr) {
    for (let i = 0, len = arr.length; i < len; i++) {
        const ran = parseInt(Math.random() * len)
        const temp = arr[ran]
        arr[ran] = arr[i]
        arr[i] = temp
    }
    return arr
}
function randomsort2 (arr) {
    const newarr = []
    while (arr.length) {
        const ran = parseInt(Math.random() * arr.length)
        newarr.push(arr[ran])
        arr.splice(ran, 1)
    }
    return newarr
}
function randomsort3 (arr) {
    return arr.sort(() => Math.random() - 0.5)
}
複製代碼

請簡述對this的指向的理解

this表示當前對象，this的指向是根據調用的上下文來決定的，默認指向window對象，指向window對象時能夠省略不寫，例如：this.alert() <=> window.alert()<=> alert(); 調用的上下文環境包括全局和局部

全局環境 全局環境就是在裏面，這裏的this始終指向的是window對象，

局部環境 1）在全局做用域下直接調用函數，this指向window 2）對象函數調用，哪一個對象調用就指向哪一個對象 3）使用 new 實例化對象，在構造函數中的this指向實例化對象。 4）使用call或apply改變this的指向

什麼是eval

①它的功能是把對應的字符串解析成JS代碼並運行； ②應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）。 ③由JSON字符串轉換爲JSON對象的時候能夠用eval，var obj =eval('('+ str +')');

什麼是閉包（closure）？ 閉包的做用

什麼是閉包： 閉包是指有權訪問另外一個函數做用域中變量的函數，建立閉包的最多見的方式就是在一個函數內建立另外一個函數，經過另外一個函數訪問這個函數的局部變量，利用閉包能夠突破做用鏈域，將函數內部的變量和方法傳遞到外部。

閉包的特性： 1.函數內再嵌套函數 2.內部函數能夠引用外層的參數和變量 3.參數和變量不會被垃圾回收機制回收

閉包的用途： 一、讀取函數內部的變量 二、讓這些變量的值始終保持在內存中。不會再f1調用後被自動清除。 三、方便調用上下文的局部變量。利於代碼封裝。 緣由：f1是f2的父函數，f2被賦給了一個全局變量，f2始終存在內存中，f2的存在依賴f1，所以f1也始終存在內存中，不會在調用結束後，被垃圾回收機制回收。

閉包的缺點： 一、因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露。解決方法是，在退出函數以前，將不使用的局部變量所有刪除。 二、閉包會在父函數外部，改變父函數內部變量的值。因此，若是你把父函數看成對象（object）使用，把閉包看成它的公用方法（Public Method），把內部變量看成它的私有屬性（private value），這時必定要當心，不要隨便改變父函數內部變量的值。

如何解決跨越問題

javascript解決跨越（同源策略）的三種方案 在某些狀況下，同源策略就顯得太過嚴格了，下面是三種不嚴格的同源策略

domain

同源策略給那些使用多個子域的大站點帶來了一些問題，例如，來自home.example.com的文檔裏的腳本想要合法的讀取從developer.example.com載入的文檔的屬性，或者來自orders.example.com的腳本可能須要讀catalog.example.com上文檔的屬性。爲了支持這種類型的多域名站點，可使用Document對象的domain屬性。在默認狀況下，屬性domain存放的是載入文檔的服務器的主機名。能夠設置這一屬性，不過使用的字符串必須具備有效的域前綴或它自己。所以若是一個domain屬性的初始值是字符串「home.exaple.com」 ，就能夠把他設置爲字符串「example.com」，但不能設置爲「home.example」。另外。domain值中必須有一個點號，不能把它設置爲「com」或其餘頂級域名。

若是兩個窗口（或窗體）包含的腳本把domain設置爲相同的值，那麼這兩窗口就再也不受同源策略的約束，它們能夠相互讀取對方的屬性。例如，從order.example.com和catalog.example.com載入的文檔中的腳本能夠把它們的document.domain屬性設置爲「example.com」，這樣一來這些文檔就有了同源性，能夠互相讀取屬性。

跨域資源共享CORS

跨域資源共享（Cross-Origin Resource Sharing,參見http://www.w3.org/TR/cors）。這個標準草案用新的「Origin:」請求頭和新的Access-Control-Allow-Origin響應頭來擴展http。它容許服務器用頭信息顯式的列出源，或使用通配符來匹配全部的源並容許由任意地址請求文件。相似Firefox和Safari的瀏覽器可使用這種新的頭信息來容許跨越http請求，這樣XMLHttpRequest就不會被同源策略限制了。

跨文檔消息 postMessage()

跨文檔消息（cross-document messaging），容許來自一個文檔的腳本能夠傳遞文本消息到另外一個文檔裏的腳本，而無論腳本的來源是否不一樣。調用Window對象上的postMessage()方法，能夠異步傳遞消息事件（能夠用onmessage事件句處理程序函數來處理它）到窗口的文檔裏，一個文檔裏的腳本仍是不能調用在其餘文檔裏的方法和讀取屬性，但他們能夠用這種消息傳遞技術實現安全的通訊。

如何封裝微信小程序的數據請求？

用promise封裝