前言
上次三面結束五天之後，hr打來電話，說我的簡歷已經通過，很激動。約好了面試時間，怎料到是另一個部門的一面。在詢問了面試官爲什麼這麼做之後，面試官給我的回答是，在上次三輪面試過後發現我更適合用戶增長這個部門，於是讓這個部門再來面我。
真的，我直接和麪試官說：“我心累了。”，面試官說別太在意，就當交流學習。累了，offer愛給不給吧。第一次面試就要面兩個部門，double 的面試量，我上網看那麼多其他面經都沒遇到過這種情況。
面試時長：40 分鐘
題目
1.給一段代碼，說出輸出結果（this 的指向）
let obj = {
name: 'bytedance',
getName() {
return this.name;
}
};
let fb = obj.getName;
fb();
結果是 undefined 。面試官問我爲什麼，fb 在調用的時候 this 指向的是 window ，是頂層對象。
面試官追問：那麼如果讓上面這段代碼正常運行，有沒有什麼操作
我回答：bind call apply 都行
2.call apply bind 的區別
bind 是定義函數的時候使用的，改變函數的默認this 指向。
而 call 和 apply 是在函數調用的時候使用的，同樣也可以改變 this 的指向
call 和 apply 的區別在於 傳參 的形式不同
3.知道常見的網絡安全嗎？
這個還好之前瞭解過，看面試官 噢 的神情應該是給了他驚喜。
XSS跨站請求攻擊：
舉例：在新浪博客寫一篇文章，同時插入一段<script>；一旦有人來看文章，腳本就執行。在攻擊代碼中，獲取他人的cookie，發送到自己的服務器。這麼做會把查看者的cookie 發送到攻擊者的服務器，得到瀏覽者的個人信息。
解決措施：前端替換關鍵字，例如替換 < 爲 < > 爲 > 或者 後端替換
XSRF跨站請求僞造：
舉例：登錄一個購物網站，正在瀏覽商品。該網站付費接口是 xxx.com/pay?id=100 但是沒有任何驗證；然後你收到一封郵件，隱藏着 <img src='xxx.com./pay?id=100'>。你查看郵件的時候，就已經悄悄地付費購買了。
解決措施：增加驗證流程，如輸入指紋，密碼，短信驗證碼
4.知道閉包嗎，寫一下，每隔一秒輸出數組的元素
function outputArr(arr) {
const len = arr.length;
for (var i = 0; i < len; i++) {
(function (index) {
setTimeout(() => {
console.log(arr[index]);
}, index * 1000);
})(i);
}
}
// let 版本
function outputArr(arr) {
const len = arr.length;
for (let i = 0; i < len; i++) {
setTimeout(() => {
console.log(arr[i]);
}, i * 1000);
}
}
我先寫了一個 var 版本的，因爲 var 版本才能體現出使用了閉包；然後面試官追問有沒有更簡單的辦法，我寫了一個let版本；面試官繼續追問，爲什麼這麼寫可以。
for循環的括號裏面是一個父級作用域，每一次的for循環都是一個子級作用域，let 有塊級作用域的概念，所以每一次for循環的子級作用域裏面的 i 有自己的值。
5.盒子模型
一面已經問過了，margin border padding 文本內容或者嵌套盒子
*6.瞭解過BFC嗎
我說不太瞭解，面試官沒有追問了。
FC（Formatting Context）：指頁面中的一個渲染區域，並且擁有一套渲染規則，他決定了其子元素如何定位，以及與其他元素的相互關係和作用。
BFC：塊級格式化上下文，它是指一個獨立的塊級渲染區域，只有Block-level BOX參與，該區域擁有一套渲染規則來約束塊級盒子的佈局，且與區域外部無關。
參考博客：https://www.cnblogs.com/dojo-lzz/p/3999013.html
https://www.cnblogs.com/heimanba/p/3774086.html
面試官看我不瞭解BFC，拋出下一問
7.你寫一個田字佈局吧
<div class="up">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="down">
<div class="left"></div>
<div class="right"></div>
</div>
<!---css--->
.up,.down {
width: 100%;
height: 50%;
overflow: hidden;
}
.left,.right {
width: 50%;
height: 100%;
}
.left {
float: left;
}
.right {
float: right;
}
剛寫完的時候我是忘了寫 overflow: hidden; 消除浮動的，面試官提醒我是不是忘了清除浮動，然後補充上了。
於是面試官繼續追問
8.*爲什麼這麼寫就能清楚浮動呢？
我說不了解，博客上就是這麼說的，這樣能清除浮動。
其實這個考點還是 BFC 的考點。
設置了 overflow: hidden 之後，其實給父元素設置了一個 BFC 區域，內部浮動元素也會被計算在內。
參考博客：https://www.jianshu.com/p/7e04ed3f4bea
9.瞭解http請求嗎？說一下http的方法
get post put delete head 等
10.get 和 post 的區別
之前的一面問過了，這次我補充了 安全性 和 冪等性
get 安全且冪等
post 不安全且不冪等
11.你有了解過UA嗎？或者其他的一些東西
我一開始沒懂 UA 是什麼，後來面試官解釋是 userAgent。
面試官問http請求頭裏面還有什麼，我說除了這個還了解一些緩存啊狀態碼
12.*你說到了狀態碼，說下304
又考3開頭的狀態碼。
304：客戶端發送了一個帶條件的GET 請求且該請求已被允許，而文檔的內容（自上次訪問以來或者根據請求的條件）並沒有改變，則服務器應當返回這個304狀態碼。簡單來說就是，客戶端已經執行了GET，但文件未變化。
13.你說到了緩存，說下瀏覽器有什麼緩存機制
cookie、localStorage和 sessionStorage 可以緩存數據
http請求頭裏面設置 cache-control 之類的可以緩存靜態文件
14.說下cookie、localStorage、sessionStorage
cookie 用於存儲的缺點：
1.存儲量太小，只有4 kb
2.所有http請求都帶着，會影響獲取資源的效率
3.API簡單，需要封裝才能用 document.cookie = ...
sessionStorage:
1.瀏覽器關閉，回話結束，就會被清理
2.最大容量 5M
localStorage:
1.存儲在本地，不會隨着瀏覽器關閉被清理
2.最大容量 5M
3.API簡單易用
15.*模擬 vuex 寫一個 事件類
class Event {
constructor() {
this.queue = [];
}
// 綁定
on(name,callback) {
this.queue.push({
name,
callback,
isOnce: false
});
}
// 綁定一次，即執行完之後移除
once(name,callback) {
this.queue.push({
name,
callback,
isOnce: true
});
}
// 移除
remove(name) {
const len = this.queue.length;
for(let i = 0;i < len;i++) {
if(name === this.queue[i].name) {
this.queue.splice(i,1);
}
}
}
// 執行
run(name,params) {
const len = this.queue.length;
for(let i = 0;i < len;i++) {
if(name === this.queue[i].name) {
const result = this.queue[i].callback(params);
if(this.queue[i].isOnce) {
this.remove(name);
}
return result;
}
}
}
}
一開始不理解考查什麼，後面在面試官的引導下了解到，這是要我實現一個簡陋的 vuex 的事件監聽-發佈模式。最後也是在面試官的引導下一步一步寫出來了。
16.*現假如數組沒有map方法，請使用reduce 實現map
Array.prototype.map = function (fn, thisArg) {
if (typeof fn !== 'function') {
throw new TypeError(fn + 'is not a function');
}
if (!Array.isArray(this)) {
throw new TypeError('list must be a Array');
}
if (this.length === 0) {
return [];
}
return this.reduce((acc, value, index) => {
acc.push(fn.call(thisArg, value, index, this));
return acc;
}, []);
}
參考博客：https://www.codercto.com/a/44456.html
https://www.cnblogs.com/shuiyi/p/5058524.html