2017面試分享（js面試題記錄）

1. 最簡單的一道題

    `11` * 2
    `a8` * 3

2. 一道this的問題

    var num = 10;
    var obj = {
        num:8,
        inner: {
            num: 6,
            print: function () {
                console.log(this.num);
            }
        }
    }
    num = 888;
    obj.inner.print(); // 6
    var fn = obj.inner.print;
    fn(); //888
    (obj.inner.print)(); //6
    (obj.inner.print = obj.inner.print)(); //888 這個點沒有太理解，雖然答對了

3. var和function的預解析問題,以及變數和function的先後順序的問題

    // 以下程式碼執行輸出結果是什麼
    function b () {
        console.log(a);
        var a = 10;
        function a() {};
        a = 100;
        console.log(a);
    }
    b();

    function c () {
        console.log(a);
        function a() {};
        var a = 10;
        a = 100;
        console.log(a);
    }
    c();

    (function d (num) {
        console.log(num);
        var num = 10;
    }(100))

    (function e (num) {
        console.log(num);
        var num = 10;
        function num () {};
    }(100))

    (function f (num) {
        function num () {};
        console.log(num);
        var num =10
        console.log(num);
    }(100))

    //仍然是預解析(在與解析過程中還要考慮一下當前變數的作用於)
    function m () {
        console.log(a1); // underfined
        console.log(a2); // underfined
        console.log(b1); // underfined
        console.log(b2); // underfined
        if(false) {
            function b1 (){};
            var a1 = 10;
        }
        if(true) {
            function b2 (){};
            var a2 = 10;
        }
        console.log(a1); // underfined
        console.log(a2); // 10
        console.log(b1); // underfined
        console.log(b2); // function
    }
    m();

    function n() {
        if(2>1) {
            arr = 10;
            brr = 10;
            let arr;
            var brr;
            console.log(arr);
            console.log(brr);
        }
    }
    n(); // ReferenceError

此階段瀏覽器只是對var、function、函式形參進行一個解析的準備過程。而且在這個“預解析”過程中，有一個預解析先後順序，即函式的形參 -> function -> var。而且重名時預留函式、後來者覆蓋前者。預解析結果形參如果有值則解析到值，沒有則為underfined，函式則解析到整個函式體，變數都為underfined；這道題目中沒有引數出現，所以先不討論。所以這道題在“預解析”時，函式宣告權重優先會被提升

4. 一個演算法問題

有一個已經排序的陣列，比方[1,4,6,9,11,15,18],給你一個新的數，插入到陣列中，寫一個function

5. 函式節流是什麼，有什麼優點（之前沒有了解過這個概念，懵逼了）

函式節流的目的

從字面上就可以理解，函式節流就是用來節流函式從而一定程度上優化效能的。例如，DOM 操作比起非DOM 互動需要更多的記憶體和CPU 時間。連續嘗試進行過多的DOM 相關操作可能會導致瀏覽器掛起，有時候甚至會崩潰。尤其在IE 中使用onresize 事件處理程式的時候容易發生，當調整瀏覽器大小的時候，該事件會連續觸發。在onresize 事件處理程式內部如果嘗試進行DOM 操作，其高頻率的更改可能會讓瀏覽器崩潰。又例如，我們常見的一個搜尋的功能，我們一般是繫結keyup事件，每按下一次鍵盤就搜尋一次。但是我們的目的主要是每輸入一些內容搜尋一次而已。為了解決這些問題，就可以使用定時器對函式進行節流。

函式節流的原理

某些程式碼不可以在沒有間斷的情況連續重複執行。第一次呼叫函式，建立一個定時器，在指定的時間間隔之後執行程式碼。當第二次呼叫該函式時，它會清除前一次的定時器並設定另一個。如果前一個定時器已經執行過了，這個操作就沒有任何意義。然而，如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器。目的是隻有在執行函式的請求停止了一段時間之後才執行。
http://www.cnblogs.com/LuckyW…

6. 寫一個方法，實現傳入兩個引數(parentNode, childNode),要求如果childNode是parentNode的子孫節點，則返回為true，否則返回為false

7. dom事件流原理是什麼，分為那幾個階段？

事件捕獲 處於目標階段 事件冒泡

8. dom事件委託什麼原理，有什麼優缺點

事件委託原理:事件冒泡機制

優點

1.可以大量節省記憶體佔用，減少事件註冊。比如ul上代理所有li的click事件就很不錯。
2.可以實現當新增子物件時，無需再對其進行事件繫結，對於動態內容部分尤為合適

缺點

事件代理的常用應用應該僅限於上述需求，如果把所有事件都用事件代理，可能會出現事件誤判。即本不該被觸發的事件被繫結上了事件。

9. http的cache機制，以及200狀態下怎麼實現 from cache（表示接觸最多的就是304的from cache）（用於優化，沒有接觸過，需要理解）

含義

定義：瀏覽器快取（Browser Caching）是為了加速瀏覽，瀏覽器在使用者磁碟上對最近請求過的文件進行儲存，當訪問者再次請求這個頁面時，瀏覽器就可以從本地磁碟顯示文件，這樣就可以加速頁面的閱覽。

作用

cache的作用：
1、減少延遲，讓你的網站更快，提高使用者體驗。
2、避免網路擁塞，減少請求量，減少輸出頻寬。

實現手段

Cache-Control中的max-age是實現內容cache的主要手段，共有3種常用策略：max-age和Last-Modified（If-Modified-Since）的組合、僅max-age、max-age和ETag的組合。

對於強制快取，伺服器通知瀏覽器一個快取時間，在快取時間內，下次請求，直接用快取，不在時間內，執行比較快取策略。
對於比較快取，將快取資訊中的Etag和Last-Modified通過請求傳送給伺服器，由伺服器校驗，返回304狀態碼時，瀏覽器直接使用快取。

10. 一個原型鏈繼承的問題

    // 有一個建構函式A，寫一個函式B，繼承A
    function A (num) {
        this.titileName = num;
    }
    A.prototype = {
        fn1: function () {},
        fn2: function () {}
    }

這個問題的關注點是B繼承的A的靜態屬性，同時B的原型鏈中不存在A例項的titleName屬性

11. 什麼是虛擬dom

React為啥這麼大？因為它實現了一個虛擬DOM（Virtual DOM）。虛擬DOM是幹什麼的？這就要從瀏覽器本身講起

如我們所知，在瀏覽器渲染網頁的過程中，載入到HTML文件後，會將文件解析並構建DOM樹，然後將其與解析CSS生成的CSSOM樹一起結合產生愛的結晶——RenderObject樹，然後將RenderObject樹渲染成頁面（當然中間可能會有一些優化，比如RenderLayer樹）。這些過程都存在與渲染引擎之中，渲染引擎在瀏覽器中是於JavaScript引擎（JavaScriptCore也好V8也好）分離開的，但為了方便JS操作DOM結構，渲染引擎會暴露一些介面供JavaScript呼叫。由於這兩塊相互分離，通訊是需要付出代價的，因此JavaScript呼叫DOM提供的介面效能不咋地。各種效能優化的最佳實踐也都在儘可能的減少DOM操作次數。

而虛擬DOM幹了什麼？它直接用JavaScript實現了DOM樹（大致上）。元件的HTML結構並不會直接生成DOM，而是對映生成虛擬的JavaScript DOM結構，React又通過在這個虛擬DOM上實現了一個 diff 演算法找出最小變更，再把這些變更寫入實際的DOM中。這個虛擬DOM以JS結構的形式存在，計算效能會比較好，而且由於減少了實際DOM操作次數，效能會有較大提升

12. js基礎資料型別和引用型別分別是什麼？這個前提條件下寫一個getType，返回相應的型別

1.基本資料型別（自身不可拆分的）：Undefined、Null、Boolean、Number、String
2.引用資料型別（物件）：Object （Array，Date，RegExp，Function）

function gettype(nm){
    return Object.prototype.toString.call(nm);
}

13. dom選擇器優先順序是什麼，以及權重值計算（一道老問題了）

1.行內樣式 1000
2.id 0100
3.類選擇器、偽類選擇器、屬性選擇器[type=”text”] 0010
4.標籤選擇器、偽元素選擇器(::first-line) 0001
5.萬用字元*、子選擇器、相鄰選擇器 0000

14. vue雙向資料繫結的原理是什麼

首先傳輸物件的雙向資料繫結 Object.defineProperty(target, key, decription),在decription中設定get和set屬性（此時應注意description中get和set不能與描述屬性共存）
陣列的實現與物件不同。
同時運用觀察者模式實現wather，使用者資料和view檢視的更新

15. react和vue比較來說有什麼區別

1 component層面，web component和virtual dom
2 資料繫結（vue雙向，react的單向）等好多
3 計算屬性 vue 有，提供方便；而 react 不行
4 vue 可以 watch 一個資料項；而 react 不行
5 vue 由於提供的 direct 特別是預置的 directive 因為場景場景開發更容易；react 沒有
6 生命週期函式名太長 directive

16. git使用過程中，如果你在開發著業務，突然另一個分支有一個bug要改，你怎麼辦

git stash       //將本次修改存到暫存區（緊急切換分支時）
git stash pop   //將所有暫存區的內容取出來

17. postcss的使用

18. 網頁佈局有哪幾種，有什麼區別

靜態、自適應、流式、響應式四種網頁佈局
靜態佈局：意思就是不管瀏覽器尺寸具體是多少，網頁佈局就按照當時寫程式碼的佈局來佈置；
自適應佈局：就是說你看到的頁面，裡面元素的位置會變化而大小不會變化；
流式佈局：你看到的頁面，元素的大小會變化而位置不會變化——這就導致如果螢幕太大或者太小都會導致元素無法正常顯示。
自適應佈局：每個螢幕解析度下面會有一個佈局樣式，同時位置會變而且大小也會變。

18. 執行下面程式碼

var a = {};
var b = {key: `b`};
var c = {key: `c`};
var d = [3,5,6];
a[b] = 123;
a[c] = 345;
a[d] = 333;
console.log(a[b]);  // 345
console.log(a[c]);  // 345
console.log(a[d]);  // 333

19.

    var R = (function() {
        var u = {a:1,b:2};
        var r = {
            fn: function(k) {
                return u[k];
            }
        }
        return r;
    }());
    R.fn(`a`);  // 1

上述程式碼中如何獲取匿名函式中的u

20. 不適用迴圈語句（包括map、forEach方法）實現一個100長度的陣列，索引值和值相同的陣列[0,1,2,3,4,5……..99]

var arr = new Array(100);
//方法1
[...arr.keys()];
//方法二
Array.from(arr.keys());

//方法三
Array.from({length: 100});

// 方法四 藉助string
var arr1 = new Array(101);
var str = arr1.join(`1,`);
str = str.replace(/(1,)/g, function ($0, $1, index) {
    var start = `` + Math.ceil(index/2);
    if(index < str.length - 2) {
        start += `,`
    }
    return start;
});
return str.split(`,`);


// 方法五（函式式變成，參考網路）
function reduce(arr, val) {
    if(Object.prototype.toString.apply(val)){
        return;
    }
    if(val >= 100) {
        return arr;
    }
    arr.push(val);
    return reduce(arr, val+1);
}
var res = reduce([], 0)

21. 下面語句執行結果輸出

var a = function (val, index) {
    console.log(index);
    return {
        fn: function (name) {
            return a(name, val);
        }
    }
}

var b = a(0); // underfined
b.fn(1); // 0
b.fn(2); // 0
b.fn(3); // 0

22. 科普

1) dom節點的根節點是不是body
回答： 不是，dom節點的根節點是html(包含head和body，head中分為meta、title等。body又分為一組)

2）dom元素都會有offsetParent嗎
回答： offsetParent屬性返回一個物件的引用，這個物件是距離呼叫offsetParent的元素最近的（在包含層次中最靠近的），並且是已進行過CSS定位的容器元素。 如果這個容器元素未進行CSS定位, 則offsetParent屬性的取值為根元素(在標準相容模式下為html元素；在怪異呈現模式下為body元素)的引用。 當容器元素的style.display 被設定為 “none”時（譯註：IE和Opera除外），offsetParent屬性 返回 null。

3) [1,3,5]轉譯成字串是什麼
回答： `1,3,5`
呼叫toString方法，生成該字串

4）li標籤的祖級元素可以為li，父級元素也可以為例
回答： 錯誤

23. jsonp原理，jquery是怎麼實現的，這樣實現有什麼好處和壞處

原理

在同源策略下;在某個伺服器下的頁面是無法獲取到該伺服器以外的資料的;Jquery中ajax 的核心是通過 XmlHttpRequest獲取非本頁內容，而jsonp的核心則是動態新增 <script>標籤來呼叫伺服器提供的 js指令碼
當我們正常地請求一個JSON資料的時候，服務端返回的是一串 JSON型別的資料，而我們使用 JSONP模式來請求資料的時候服務端返回的是一段可執行的 JavaScript程式碼。因為jsonp 跨域的原理就是用的動態載入 script的src ，所以我們只能把引數通過 url的方式傳遞, 所以jsonp的 type型別只能是get ！

$.ajax({
    url: `http://192.168.1.114/yii/demos/test.php`, //不同的域
    type: `GET`, // jsonp模式只有GET 是合法的
    data: {
        `action`: `aaron`
    },
    dataType: `jsonp`, // 資料型別
    jsonp: `backfunc`, // 指定回撥函式名，與伺服器端接收的一致，並回傳回來
})
其實jquery 內部會轉化成
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron
然後動態載入
<script type="text/javascript"src="http://192.168.1.114/yii/demos/test.php?backfunc= 
然後後端就會執行backfunc(傳遞引數 )，把資料通過實參的形式傳送出去。

在jquery 原始碼中， jsonp的實現方式是動態新增<script>標籤來呼叫伺服器提供的 js指令碼。jquery 會在window物件中載入一個全域性的函式，當 <script>程式碼插入時函式執行，執行完畢後就 <script>會被移除。同時jquery還對非跨域的請求進行了優化，如果這個請求是在同一個域名下那麼他就會像正常的 Ajax請求一樣工作。

24. http協議屬於七層協議中的哪一層，下一層是什麼

七層結構：物理層、資料鏈路層、網路層、傳輸層、會話層、表示層、應用層
tcp屬於傳輸層；http屬於應用層。
表現層

25. js垃圾回收機制知道哪些，v8引擎使用的哪一種

js的兩種回收機制

1 標記清除（mark and sweep）
2 引用計數（reference counting）

javascript與V8引擎

垃圾回收機制的好處和壞處

好處：大幅簡化程式的記憶體管理程式碼，減輕程式猿負擔，並且減少因為長時間運轉而帶來的記憶體洩露問題。

壞處：自動回收意味著程式猿無法掌控記憶體。ECMAScript中沒有暴露垃圾回收的藉口，我們無法強迫其進行垃圾回收，更加無法干預記憶體管理。

V8 自動垃圾回收演算法
https://segmentfault.com/a/11…

26. 作用域什麼時候生成的？

頁面載入–>建立window全域性物件，並生成全域性作用域–>然後生成執行上下文，預解析變數(變數提升)，生成全域性變數物件；
$scope

27. websocket長連線原理是什麼

含義

Websocket是一個持久化的協議，相對於HTTP這種非持久的協議來說。

原理

類似長輪循長連線 ; 傳送一次請求 ; 源源不斷的得到資訊

28. http快取知道哪些

http://blog.csdn.net/yzf91321…

29. 講一下事件迴圈機制

執行上下文(Execution context)
函式呼叫棧(call stack)
佇列資料結構(queue)
Promise

https://zhuanlan.zhihu.com/p/…

30. 理解web安全嗎？都有哪幾種，介紹以及如何預防

1.XSS，也就是跨站指令碼注入

攻擊方法：
1. 手動攻擊:
編寫注入指令碼，比如”/><script>alert(document.cookie());</script><!--等，
手動測試目標網站上有的input, textarea等所有可能輸入文字資訊的區域
2. 自動攻擊
利用工具掃描目標網站所有的網頁並自動測試寫好的注入指令碼，比如：Burpsuite等
防禦方法：
1. 將cookie等敏感資訊設定為httponly，禁止Javascript通過document.cookie獲得
2. 對所有的輸入做嚴格的校驗尤其是在伺服器端，過濾掉任何不合法的輸入，比如手機號必須是數字，通常可以採用正規表示式
3. 淨化和過濾掉不必要的html標籤，比如：<iframe>, alt,<script> 等
4. 淨化和過濾掉不必要的Javascript的事件標籤，比如：onclick, onfocus等
5. 轉義單引號，雙引號，尖括號等特殊字元，可以採用htmlencode編碼 或者過濾掉這些特殊字元
6. 設定瀏覽器的安全設定來防範典型的XSS注入

2.SQL隱碼攻擊

攻擊方法：
編寫惡意字串，比如‘ or  1=1--等，
手動測試目標網站上所有涉及資料庫操作的地方
防禦方法：
1. 禁止目標網站利用動態拼接字串的方式訪問資料庫
2. 減少不必要的資料庫丟擲的錯誤資訊
3. 對資料庫的操作賦予嚴格的許可權控制
4. 淨化和過濾掉不必要的SQL保留字，比如：where, or, exec 等
5. 轉義單引號，上引號，尖括號等特殊字元，可以採用htmlencode編碼 或者過濾掉這些特殊字元

3.CSRF，也就是跨站請求偽造

就是攻擊者冒用使用者的名義，向目標站點傳送請求
防範方法：
1. 在客戶端進行cookie的hashing，並在服務端進行hash認證
2. 提交請求是需要填寫驗證碼
3. 使用One-Time Tokens為不同的表單建立不同的偽隨機值  

40. sessionStorage和localstorage能跨域拿到嗎？比如我在www.baidu.com設定的值能在m.baidu.com能拿到嗎？為什麼

localStorage會跟cookie一樣受到跨域的限制，會被document.domain影響

41. localstorage不能手動刪除的時候，什麼時候過期

除非被清除，否則永久儲存 clear()可清楚
sessionStorage 僅在當前會話下有效，關閉頁面或瀏覽器後被清除

42. cookie可以設定什麼域？可以設定.com嗎

可以通過設定domin來實現

43. 登入狀態的儲存你認為可以儲存在sessionstorage或者localstorage或者cookie或者你知道的哪種方式，存在了哪裡？？為什麼儲存在那裡

44. flux -> redux -> mobx 變化的本質是什麼

儲存結構 將物件加工可觀察 函式式 vs 物件導向
https://zhuanlan.zhihu.com/p/…

45. 按需載入路由怎麼載入對應的chunk檔案的？換句話說瀏覽器怎麼知道什麼時候載入這個chunk，以及webpack是怎麼識別那個多個經過hash過的chunk檔案

50. get和post有什麼區別？get可以通過body傳遞資料嗎

把資料放到 body 裡面，必須用 POST 方式取，這是 HTTP 協議限制的。

51. 下拉重新整理你怎麼實現

52. 預載入options請求為什麼會出現，能避免這個請求嗎？

針對上方問題存在沒有解答的 ; 或則解答不正確詳細的 ; 歡迎留言 ; 我會及時更正 ; 也歡迎留下你認為經典的面試題 ; 我都會補充進來 ; 共同進步