前端面試題整合（JS進階篇）（一）-有解無憂

js的垃圾回識訓制是什么原理

垃圾回識訓制有兩種方法

第一種是標記清除法：當變數進入執行環境時,就標記這個變數為”進入環境”,當變數離開環境的時候,則將其標記為”離開環境”,垃圾收集器在運行的時候會給儲存在記憶體中的所有變數都加上標記,然后它會去掉環境中的標量以及被環境中的變數參考的標記,而在此之后再被加上標記的變數將被視為準備洗掉的變數,原因是環境中的變數已經無法訪問到這些變數了,最后,垃圾收集器完成記憶體清除作業,銷毀那些帶標記的值,并回收他們所占用的記憶體空間
第二種是參考計數法：當宣告了一個變數并將一個參考型別賦值給改變數是,則這個值得參考次數就是1,相反,如果包含對這個值參考的變數又取得了另外一個值,則這個值得參考次數就減1,當這個參考次數變成0時,則說明沒有辦法在訪問這個值了,因而就可以將其所占的記憶體空間給收起來,這樣垃圾收集器再下次運行時,它就會釋放那些參考次數為0的值所占的記憶體

哪些操作會造成記憶體泄露，怎樣避免記憶體泄露

會造成記憶體泄漏的操作：

意外的全域變數引起的記憶體泄露
閉包引起的記憶體泄露
控制臺日志
沒有清理的DOM元素參考
被遺忘的定時器或者回呼

避免記憶體泄露的操作：

減少不必要的全域變數，或者生命周期較長的物件，及時對無用的資料進行垃圾回收
注意程式邏輯，避免“死回圈”之類的
避免創建過多的物件原則：不用了的東西要及時歸還（置為null）

AMD\CMD區別

AMD即Asynchronous Module Definition,翻譯過來就是異步模塊化定義（RequireJS）
CMD即 common moudle definition,翻譯過來即通用模塊定義（SeaJS）
RequireJS在主檔案里是將所有的檔案同時加載，然而SeaJS強調一個檔案一個模塊，
AMD推崇依賴前置，CMD推崇依賴就近，
AMD加載完模塊后，就立馬執行該模塊；CMD加載完某個模塊后沒有立即執行而是等到遇到require陳述句的時再執行
所以，他們兩者的不同導致各自的優點是AMD用戶體驗好，因為模塊提前執行了；CMD性能好，因為只有用戶需要的時候才執行，

面向物件的三個特性

封裝：屏蔽內部細節用戶直接呼叫被封裝的功能
繼承：子類擁有父類的所有屬性或方法
多型（js中不存在多型概念）

原型，原型鏈的理解

所有的建構式都有一個prototype屬性，這個屬性也叫原型物件建構式.prototype 所有的建構式new出來的物件也都有一個原型物件實作：物件.__proto__
原型鏈就是實體物件和原型之間的鏈接
原型物件的執行流程：

首先去實體上查找，如果找到了就回傳
如果沒做查找到，就去改建構式的原型上查找，如果找到了就回傳，如果沒找到，就去Object.prototype的原型上查找，找到了就回傳，否則回傳undefined

繼承的方式

1.通過改變父類的執行環境來實作
2.通過call
3.通過apply
4.原型繼承
5.混合繼承
6.es6建構式

作用域鏈的理解

作用域鏈的作用是保證執行環境里有權訪問的變數和函式是有序的，作用域鏈的變數只能向上訪問，變數訪問到window物件即被終止，作用域鏈向下訪問變數是不被允許的
安全隱患：污染全域環境，或者造成記憶體泄露的問題，變數的提升

閉包的理解

什么是閉包
一個函式內部回傳一個匿名函式，這個函式就稱為閉包
閉包中this指向 window
特點
（1）函式嵌套函式
（2）函式可以參考外層的引數和變數
（3）引數和變數不會被垃圾回識訓制回收
閉包的缺點：常駐記憶體，會增大記憶體使用量，使用不當很容易造成記憶體泄露，
為何要使用閉包：為了設計私有方法和變數，避免全域變數污染希望一個變數長期駐扎在記憶體中

下面這個ul，如何點擊每一列的時候alert其index（閉包解決方式）

<ul id="test">
    <li>這是第一條</li>
    <li>這是第二條</li>
    <li>這是第三條</li>
</ul>

方法一：

//將i屬性系結到標簽物件中的index
var liItems=document.getElementById('test').getElementsByTagName('li');
for(var i=0;i<liItems.length;i++)
{
    liItems[i].index=i;
    liItems[i].onclick=function(){
        alert(this.index);
    };
}

方法二：

//將i屬性通過引數傳遞至function作用域中，立即執行函式在下一次回圈之前先將i系結至作用域
var liItems=document.getElementById('test').getElementsByTagName('li');
for(var i=0;i<liItems.length;i++)
{
     liItems[i].onclick=(function(a){
        return function() {
            alert(a);
        }
    })(i);

}

方法三（es6的let產生暫時性死區，與宣告的變數所在的塊級作用域（for回圈內）都不會造成閉包，var只受function的作用域影響，let受所有帶‘{}‘大括號的作用域影響）：

//通過let
var liItems=document.getElementById('test').getElementsByTagName('li');
        for (let i = 0; i < liItems.length; i++) {
            liItems[i].onclick = function () {
                alert(i);
            }
        }

高內聚低耦合的理解

高內聚：模塊內部高內聚，一個系統有多個模塊組成，在劃分模塊式，要把功能關系緊密的放到一個模塊中，這就叫做高內聚低耦合：功能關系遠的放到其它模塊中，模塊之間的聯系越少越好，介面越簡單越好，這叫做低耦合，也稱為細線通信

TCP和UDP的最完整的區別

1.基于連接與無連接
2.TCP要求系統資源較多，UDP較少；
3.UDP程式結構較簡單
4.流模式（TCP）與資料報模式(UDP);
5.TCP保證資料正確性，UDP可能丟包
6.TCP保證資料順序，UDP不保證

JS處理異步的方式

利用回呼函式（es5常用方法）
用async和await來處理異步（es7-8中新增）
promise（es6新增）
發布/訂閱我們假定，存在一個"信號中心"，某個任務執行完成，就向信號中心"發布"（publish）一個信號，其他任務可以向信號中心"訂閱"（subscribe）這個信號，從而知道什么時候自己可以開始執行，這就叫做"發布/訂閱模式"（publish-subscribe pattern），又稱"觀察者模式"（observer pattern）（和事件原理一樣）
事件觸發一個事件也可以作為異步的處理當觸發某個事件再來執行某件事（js底層解決異步常用方法）

深拷貝淺拷貝的理解

淺拷貝：只是復制當前的物件，該物件內部的參考（Object,Array等堆記憶體資料）不能復制
深拷貝：對物件內部的參考均復制，是創建一個新的實體
簡言之：是否復制了子物件，修改了克隆后的物件屬性值，影響到原物件-淺拷貝不影響-深拷貝

常見的HTTP請求回傳狀態碼

200成功
304請求瀏覽器快取的內容
400語意有誤，當前請求無法被服務器理解
401當前請求需要用戶驗證
404未找到
403服務器已經理解請求，但是拒絕執行它
500服務器錯誤
503服務器端暫時無法處理請求

1開頭的（資訊類）：表示接收到請求并且繼續處理，用于指定客戶端應相應的某些動作
2開頭的（回應成功）：表示動作被成功接收，理解和接受，
3開頭的（重定向）：為了完成指定的動作，必須接受進一步處理，用于已經移動的檔案并且常被包含在定位頭資訊中指定新的地址資訊
4開頭的（客戶端錯誤類）：請求包含錯誤語法或不能正確執行
5開頭的（服務器端錯誤）：服務器遇到錯誤，無法完成請求

html頁面怎么決議的？它加載順序是什么？

用戶輸入網址（假設是個html頁面，并且是第一次訪問），瀏覽器向服務器發出請求，服務器回傳html檔案
瀏覽器開始載入html代碼，如果發現<head>標簽內有一個<link>標簽參考外部CSS檔案
瀏覽器又發出CSS檔案的請求，服務器回傳這個CSS檔案
瀏覽器繼續載入html中<body>部分的代碼，并且CSS檔案已經加載完成了，開始渲染頁面
如果瀏覽器在代碼中發現一個<img>標簽參考了一張圖片，向服務器發出請求，此時瀏覽器不會等到圖片下載完，而是異步渲染后面的代碼
服務器回傳圖片檔案，由于圖片占用了一定面積，影響了后面段落的排布，因此瀏覽器需要回過頭來重新渲染這部分代碼
如果瀏覽器發現了一個包含一行Javascript代碼的<script>標簽，會立即運行它
如果Javascript腳本執行了瀏覽器隱藏掉代碼中的某個<style>（style.display=”none”），瀏覽器就得重新渲染這部分代碼
如果這時用戶點了一下界面中的“換膚”按鈕，Javascript讓瀏覽器換了一下＜link＞標簽的CSS路徑，那么瀏覽器就會向服務器請求了新的CSS檔案，重新渲染頁面

總結：最好將無論內部或是外部JS檔案放到所有html內容之后，這樣會令用戶感覺頁面加載速度變快了，否則如果將所有外部檔案（包括css和JS）參考都放到<head>中，意味著必須等到全部的JS代碼都被下載決議和執行完畢后，才能開始呈現頁面的內容（當瀏覽器遇到<body>）,這樣會導致呈現頁面時出現明顯的延遲，二延遲期間的瀏覽器視窗將是一片空白，

談談web攻擊技術

XSS攻擊
CSRF攻擊
網路劫持攻擊
控制臺注入代碼
釣魚

同步和異步的區別

同步：阻塞的，A需要等待B完成任務后再開始任務
異步：非阻塞的，A，B同時開始任務

打個簡單的比方：Ajax請求資料渲染頁面操作，需要使用同步方式渲染，因為js執行的時間很短，幾乎可以忽略不計，而Ajax請求需要等待時間，所以，需要等待Ajax請求完畢，收到回應資訊后再渲染頁面

解釋a = b||c，fn&&fn()，a=(b,c)，a?b:c的作用或含義

a = b||c：和if(!b) {a=c}效果一致，如果b存在，把b的值賦給a，否則把c的值賦給a（短路求值，提升效率）
fn&&fn()：和上面的效果一樣，但條件相反，如果fn不存在，則不執行，否則將執行（短路求值，提升效率）
a=(b,c)：這里是逗號運算子的用法之一，先執行運算子左側的運算元，然后再執行右側的運算元，最后回傳右側運算元的值，即a=c
a?b:c：條件運算式（三元運算式），若a為真，回傳b，若a為假，則回傳c

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/206486.html

標籤：其他

上一篇：本科6年經驗9月苦戰6家大廠，終入哈啰定薪28*14，復習筆記及面經都在這里了！

下一篇：javeweb之EL