摘要：大四到校就開始了緊張的秋招。在此紀(jì)錄一下大四以來的前端面試。面試準(zhǔn)備準(zhǔn)備簡歷。主要是牛客網(wǎng)，牛客網(wǎng)秋招和春招都有面經(jīng)分享活動，很多拿到大廠的大牛會在上面分享面試經(jīng)驗(yàn)。這段是調(diào)用函數(shù)的語句，調(diào)用了約好的函數(shù)，并且將數(shù)據(jù)當(dāng)做參數(shù)傳入。

大三下學(xué)期因?yàn)檠劬剂诉^敏性結(jié)膜炎，只好在家養(yǎng)病，錯過了寶貴的實(shí)習(xí)時間。大四到校就開始了緊張的秋招。拿到的第一個offer是一家廈門的公司，當(dāng)時跟技術(shù)小哥談的很愉快，后來因?yàn)閺B門比較遠(yuǎn)，而且公司的業(yè)務(wù)我不太感興趣，所以沒有去。之后又面了很多家公司，一直持續(xù)到來年四月，因?yàn)榧夹g(shù)太菜，投的大公司都進(jìn)了人才庫（笑，最后進(jìn)了一家還不錯的小公司，公司前后端分離，用react技術(shù)棧。在此紀(jì)錄一下大四以來的前端面試。

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

刷面經(jīng)。主要是牛客網(wǎng)，牛客網(wǎng)秋招和春招都有面經(jīng)分享活動，很多拿到大廠offer的大牛會在上面分享面試經(jīng)驗(yàn)。

先是個人的基本信息，xx大學(xué)xx專業(yè)大四學(xué)生，之后說了自己擅長的方面，用xx技術(shù)寫過某某項(xiàng)目，在xx公司實(shí)習(xí)，實(shí)習(xí)期間寫過xx，最后講了自己的興趣和職業(yè)規(guī)劃。

面試官一般會根據(jù)自我介紹問問題，自我介紹時說了自己用vue寫過某某項(xiàng)目，然后就被問了一堆vue相關(guān)的題...

基本原理是發(fā)布訂閱模式和Object.defineProperty()劫持各個屬性的setter、getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。因?yàn)橛锌催^這方面的博客，對照博客寫過一個簡易版的vue，所以簡單說了下具體實(shí)現(xiàn)過程

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

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

style標(biāo)簽中lang="scss"，安node-sass和sass-loader，webpack中做相應(yīng)的配置。node-sass安裝比較坑，因?yàn)閴Φ脑颍脟鴥?nèi)網(wǎng)絡(luò)直接npm install安不上，一般是給命令行設(shè)代理，或者直接用淘寶的cnpm來安。之后在vue單文件組件的style標(biāo)簽，lang設(shè)為scss，把處理scss文件的loader加到配置里。

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

沒看過...

前端不斷發(fā)展，需要在前端處理的邏輯也越來越多，js文件越來越龐大，這時候?yàn)榱烁玫木S護(hù)和復(fù)用js代碼，需要組織js文件，根據(jù)特定功能將js文件進(jìn)行劃分，這就是模塊化。模塊化需要遵守統(tǒng)一的規(guī)范，服務(wù)端node.js用的是CommonJS，客戶端有基于require.js的AMD規(guī)范，基于sea.js的CMD規(guī)范，也可以用gulp、webpack等的打包工具來實(shí)現(xiàn)模塊化，es6有原生的模塊化支持，但現(xiàn)在的瀏覽器還不支持。

沒有仔細(xì)了解過...記得是動態(tài)創(chuàng)建script標(biāo)簽去請求腳本，通過監(jiān)聽script的onload事件，來確定加載順序...

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

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

高程上介紹的很詳細(xì)，構(gòu)造函數(shù)式，類式，組合式，寄生組合式，es6可以直接extends

argument是對象，是Object的實(shí)例，不能調(diào)用數(shù)組的方法。轉(zhuǎn)數(shù)組可以[].slice.call(arguments)，es6直接Array.from(arguments)或通過數(shù)組擴(kuò)展運(yùn)算符[...arguments]

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

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

創(chuàng)建一個空對象，this指向這個空對象，繼承構(gòu)造函數(shù)的原型，執(zhí)行構(gòu)造函數(shù)中的代碼，返回this

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

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

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

不能用作generator函數(shù)，內(nèi)部this是定義時所在環(huán)境的this，不能通過new調(diào)用，內(nèi)部沒有arguments對象

與服務(wù)器通信的一種手段，主要用于異步通信，無需刷新頁面就可以拿到服務(wù)端的數(shù)據(jù)，或向服務(wù)端發(fā)送數(shù)據(jù)，通過xhr對象實(shí)現(xiàn)。

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

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

沒有學(xué)過算法，自己也沒有看過相關(guān)的知識...大一時候?qū)W過冒泡和選擇排序，還知道有堆排序、快排和歸并排序

es5實(shí)現(xiàn)

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)]
}

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

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

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

單行文本直接設(shè)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;

主要是兩種，一種是觸發(fā)BFC，因?yàn)锽FC內(nèi)部元素和外部元素不會互相影響；一種是用clear屬性，常用

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

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

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

這家公司的一面，一面是hr面，只要討論的時候活躍一些，沒有標(biāo)準(zhǔn)答案，言之有理即可

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

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

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

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

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

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

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

目前只是想精進(jìn)前端技術(shù)，長遠(yuǎn)的還沒想過

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

沒有想過（是真的沒有想過...因?yàn)榧夹g(shù)太渣，想去也進(jìn)不去）然后被hr批評了...如果想做技術(shù)的話，還是要有去大公司工作的想法。

為了趕項(xiàng)目進(jìn)度可以接受（進(jìn)去公司后問同事，同事說我們公司加班不多...）

前端部門技術(shù)棧，主要有哪些業(yè)務(wù)、實(shí)習(xí)期多久