摘要：大四到校就開始了緊張的秋招。在此紀錄一下大四以來的前端面試。面試準備準備簡歷。主要是牛客網，?？途W秋招和春招都有面經分享活動，很多拿到大廠的大牛會在上面分享面試經驗。這段是調用函數的語句，調用了約好的函數，并且將數據當做參數傳入。

大三下學期因為眼睛患了過敏性結膜炎，只好在家養病，錯過了寶貴的實習時間。大四到校就開始了緊張的秋招。拿到的第一個offer是一家廈門的公司，當時跟技術小哥談的很愉快，后來因為廈門比較遠，而且公司的業務我不太感興趣，所以沒有去。之后又面了很多家公司，一直持續到來年四月，因為技術太菜，投的大公司都進了人才庫（笑，最后進了一家還不錯的小公司，公司前后端分離，用react技術棧。在此紀錄一下大四以來的前端面試。

準備簡歷。參照了不少優秀的簡歷后（主要是知乎，和用搜索引擎搜索到的），寫好了自己的簡歷。

刷面經。主要是?？途W，?？途W秋招和春招都有面經分享活動，很多拿到大廠offer的大牛會在上面分享面試經驗。

先是個人的基本信息，xx大學xx專業大四學生，之后說了自己擅長的方面，用xx技術寫過某某項目，在xx公司實習，實習期間寫過xx，最后講了自己的興趣和職業規劃。

面試官一般會根據自我介紹問問題，自我介紹時說了自己用vue寫過某某項目，然后就被問了一堆vue相關的題...

基本原理是發布訂閱模式和Object.defineProperty()劫持各個屬性的setter、getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。因為有看過這方面的博客，對照博客寫過一個簡易版的vue，所以簡單說了下具體實現過程

vue的生命周期就是一個vue實例從創建到被銷毀的過程。說了一遍vue官方文檔那張生命周期的圖。

主要是三個部分，模板、樣式和腳本。講了各個部分需要考慮什么，子父組件的通信、根據具體的功能使用相應指令，順便舉了個例子、樣式style標簽可以使用css一些預處理器的語法，通過lang屬性定義等。注冊組件可以全局注冊也可以局部注冊。寫單文件組件的話，需要安vue-loader，在webpack配置；用jsx的話模板寫在render函數里，css文件直接import引入，jsx文件用babel-loader處理，還需要安幾個babel的插件來支持，忘了那幾個插件具體叫什么...

style標簽中lang="scss"，安node-sass和sass-loader，webpack中做相應的配置。node-sass安裝比較坑，因為墻的原因，用國內網絡直接npm install安不上，一般是給命令行設代理，或者直接用淘寶的cnpm來安。之后在vue單文件組件的style標簽，lang設為scss，把處理scss文件的loader加到配置里。

@mixin或@function，寫法和js的普通函數一樣，@mixin加函數名，如果有參數，可以寫參數，參數可以定義默認值，也可以使用rest參數，之后大括號，內部是函數語句，和普通css寫法一樣，只是可以使用scss內部控制命令，內置函數，變量等等，用@include來調用。@function定義的函數和普通js函數一樣，可以用@return返回值，和普通js函數調用方法一樣，調用后返回的就是@function內部用@return返回的值。

沒看過...

前端不斷發展，需要在前端處理的邏輯也越來越多，js文件越來越龐大，這時候為了更好的維護和復用js代碼，需要組織js文件，根據特定功能將js文件進行劃分，這就是模塊化。模塊化需要遵守統一的規范，服務端node.js用的是CommonJS，客戶端有基于require.js的AMD規范，基于sea.js的CMD規范，也可以用gulp、webpack等的打包工具來實現模塊化，es6有原生的模塊化支持，但現在的瀏覽器還不支持。

沒有仔細了解過...記得是動態創建script標簽去請求腳本，通過監聽script的onload事件，來確定加載順序...

每一個js對象都有[[prototype]]內部屬性，這個屬性對應的就是該對象的原型，在一些瀏覽器原型對象可以通過__proto__訪問，es6可以通過Object.getPrototypeOf()來訪問，原型鏈的終點是null，之前是Object.prototype

js中閉包是指可以訪問另一個函數作用域變量的函數，一般是定義在外層函數中的內層函數。原理和js的變量解析機制有關，js解析變量會沿著作用域鏈層層向上查找。每次調用一個函數時會創建相應的執行上下文，和作用鏈，作用鏈會賦值給內部屬性[[scope]]，這樣內層函數就可以拿到外層函數作用域的變量，即使外層函數的執行上下文已經被銷毀，比如調用外層函數，返回內層函數，也可以通過內層函數拿到外層函數作用域的變量。

高程上介紹的很詳細，構造函數式，類式，組合式，寄生組合式，es6可以直接extends

argument是對象，是Object的實例，不能調用數組的方法。轉數組可以[].slice.call(arguments)，es6直接Array.from(arguments)或通過數組擴展運算符[...arguments]

都定義在Function.prototype上，第一個參數是調用的函數內部this指向的對象，第二個及之后是要傳入的函數參數，call和bind以值的形式傳入，apply以數組的形式傳入，call和apply返回調用函數的返回值，bind返回一個綁定函數。通過調用符()調用時，綁定函數內部this值指向調用bind的第一個參數，前幾個參數綁定了調用bind時傳入的第二個及之后的參數；通過new調用時，會忽略bind綁定的this值，將原函數當成構造器，參數有效。

MDN文檔上有bind的Polyfill，注意考慮new綁定函數的情況

創建一個空對象，this指向這個空對象，繼承構造函數的原型，執行構造函數中的代碼，返回this

let，const，原生的模塊化支持，結構賦值、異步的解決方法promise、generator、async函數等，一些語法糖，比如箭頭函數，class，對象方法屬性的簡寫等

let用來定義變量，const定義常量，塊級作用域、暫時性死區、相同作用域不能重復定義、全局定義不會掛在window上，此外let作循環變量，每次循環都是一個新的變量，const必須在聲明時賦值，之后給const定義的變量重新賦值會報錯。

讓異步操作邏輯更加清晰，解決了異步操的作回調嵌套問題。promise對象有三種狀態，pending、fulfilled和rejected，promise對象內部保存一個需要執行一段時間的異步操作，當異步操作執行結束后可以調用resolve或reject方法，來改變promise對象的狀態，狀態一旦改變就不能再變。new 一個promise后可以通過then方法，指定resolved和rejected時的回調函數。

不能用作generator函數，內部this是定義時所在環境的this，不能通過new調用，內部沒有arguments對象

與服務器通信的一種手段，主要用于異步通信，無需刷新頁面就可以拿到服務端的數據，或向服務端發送數據，通過xhr對象實現。

ajax跨域，jsonp、CORS，不同域頁面的通信，document.domain和HTML5的postMessage

原理是script元素的src屬性不受同源策略限制。和服務端約好函數名，請求文件的時候，服務端返回一段 JavaScript。這段 JavaScript是調用函數的語句， 調用了約好的函數，并且將數據當做參數傳入。函數在前端定義，處理完數據之后，remove掉script元素。

沒有學過算法，自己也沒有看過相關的知識...大一時候學過冒泡和選擇排序，還知道有堆排序、快排和歸并排序

es5實現

function unique(arr){
  var newArr = [];
  for(var i in arr) {
    if(newArr.indexOf(arr[i]) == -1) {
      newArr.push(arr[i])
    }
  }
  return newArr;
 }

es6

function unique(arr) {
    return [...new Set(arr)]
}

當時沒寫出來...以前根本沒看過，后來網上查了下，原理很簡單。有序數組，先比較中間元素，如果等于中間元素，則返回中間元素的索引，如果比中間元素大或小，則從右邊區間或左邊區間查找，和開始一樣再比較中間元素，以此類推。

rem是基于根元素font-size進行計算，em稍微復雜，元素font-size屬性是相對于父元素font-size計算，其他屬性相對于本元素font-size計算。

position屬性有五個值，默認值是static。相對定位relative是對于元素正常位置進行定位，偏移后原本的位置仍占據空間，不會影響其他元素的位置，未脫離文檔流。絕對定位會脫離文檔流，相對于已定位的祖先元素進行定位。固定定位和絕對定位相似，但是是相對于視口的。還有一個新增值sticky，是固定定位和相對定位的混合，必須指定top、right、bottom、left、四個闕值之一，適口滾動到闕值前是相對定位，之后是固定定位，兼容性不好

單行文本直接設height等于line-height、絕對定位top: 50%;再向上移自身寬度的一半，如果不定寬用transfrom: translateX(-50%)，flex布局、tabe-cell、還有一個比較hack的方法，子元素display: inline-block; vertical-align: middle;父元素的after偽元素，height: 100%，display: inline-block; vertical-align: middle; font-size: 0;

主要是兩種，一種是觸發BFC，因為BFC內部元素和外部元素不會互相影響；一種是用clear屬性，常用

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

全稱塊級格式化上下文，是一個獨立的布局環境，它規定內部的塊級盒子如何布局。BFC中的元素的布局是不受外界的影響，在一個BFC中，塊盒與行盒都會垂直的沿著其父元素的邊框排列。主要用于清除浮動和避免margin折疊。浮動元素，position非默認值或相對定位元素，display為table-cell或table-caption元素、overflow不為默認值元素都會觸發BFC。

VScode，webStorm和sublime也用過，不介意嘗試新的編輯器

這家公司的一面，一面是hr面，只要討論的時候活躍一些，沒有標準答案，言之有理即可

書籍、視頻、博客、自己練習。如果想學習某方面的知識，會去看知乎上推薦的書，也會看豆瓣上的評論，剛開始學js的時候看過高程、語言精粹、你不知道的js上冊等等。視頻主要是慕課網，跟著慕課網上的視頻敲過很多demo。收藏了一些人的博客，比如阮一峰老師、張鑫旭老師，有相關的知識點不懂，直接在他們的博客上面查。自己練習的資源很多，慕課網上的一些小的項目，百度前端技術學院上的題目，github上的項目，都可以自己完善，擴展。

當時要的低了...所以期望薪資還是要高一點。高了的話，hr會說，我們公司能給的最高薪資是多少，問你能不能接受。

看書、看動漫、看電影、跑步

看書并沒有喜歡看特定作者或特定類型的書，都是看一本書，對某些方面感興趣又去看那些方面的書。比如看完《1984》后，因為《1984》有涉及一些哲學的內容，又去看了《蘇菲的世界》《西方哲學簡史》。對日本感興趣，看了《菊與刀》(當時正值二戰，作者態度很明顯)；對美國感興趣，看了林達的《歷史的憂慮》。也有追一些熱點，國內劉慈欣先生的《三體》和一本短中篇小說合集，二熊的兩本書《最好的我們》和《你好，舊時光》都看過，總之看的很亂很雜。

動漫剛看完EVA...一直有追one piece的漫畫，國內二叔的一人之下

有。記在哪里？手機上。方便給我看一下嗎？看了之后hr說，你這并不是計劃，沒有截止日期...

晚上的話會出去跑步，有時候壓力太大學不進去，會睡覺或者看看動漫，如果不行就運動，運動對我很有效

目前只是想精進前端技術，長遠的還沒想過

北京壓力太大，而且在北方呆久了，想來南方看看。

沒有想過（是真的沒有想過...因為技術太渣，想去也進不去）然后被hr批評了...如果想做技術的話，還是要有去大公司工作的想法。

為了趕項目進度可以接受（進去公司后問同事，同事說我們公司加班不多...）

前端部門技術棧，主要有哪些業務、實習期多久