2017面試分享（js面試題記錄）
1. 最簡單的一道題
`11` * 2
`a8` * 32. 一道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]); // 33319.
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); // 022. 科普
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 協議限制的。