人生第二次前端面試，這次面的這個前端崗位是需要有很好的英語口語溝通能力的，我英語很差，面試官讓我用英語自我介紹幾句就說了解到了我的水平了，嚶嚶嚶···所以英語這方面就沒什麼好說的了，我也知道自己英語差~
所以還是記錄一下問到的技術方面的題目吧
【我的回答】：函數語言程式設計是一種程式設計正規化，相同的輸入永遠得到相同的輸出，不會產生副作用。
【面試官】：嗯···
（我答得不是很全面）
參考答案：
阮一峰老師《函數語言程式設計初探》：
"函數語言程式設計"是一種"程式設計正規化"（programming paradigm），也就是如何編寫程式的方法論。它屬於"結構化程式設計"的一種，主要思想是把運算過程儘量寫成一系列巢狀的函數呼叫。
函數語言程式設計具有五個鮮明的特點：
函數語言程式設計的意義：
【我的回答】：boolean、number、string、undefined、null、object、ES6新增了Symbol、ES2020新增了bigint
【面試官】：嗯還可以
參考答案：這個答案就是我回答到的boolean、number、string、undefined、null、object，然後ES6新增了Symbol，ES2020新增了bigint
【我的回答】：閉包是JS在執行過程中的一種現象，一般發生在函數作為引數、函數作為返回值的時候，裡面的變數沒有得到銷燬，就產生了閉包。
【面試官】：那是返回的函數內是閉包還是函數參照的變數產生了閉包？
【我的回答】：是返回的函數內所參照到了外部變數產生了閉包
【面試官】：額···
（這個問題我當時答得不好，亂七八糟說了一大堆，感覺自己也講不清楚了）
參考答案：
還是參照阮一峰老師《學習Javascript閉包（Closure）》：
由於在Javascript語言中，只有函數內部的子函數才能讀取區域性變數，因此可以把閉包簡單理解成"定義在一個函數內部的函數"。 所以，在本質上，閉包就是將函數內部和函數外部連線起來的一座橋樑。 閉包可以用在許多地方。 它的最大用處有兩個，一個是前面提到的可以讀取函數內部的變數，另一個就是讓這些變數的值始終保持在記憶體中。
【我的回答】：是指事件迴圈吧，JS執行的時候有個主任務執行棧，主任務中如果遇到非同步任務會放到回撥佇列中，等主任務全部執行完畢後，回撥佇列中的任務會進入到主任務中。其中非同步任務又分為宏任務和微任務。
【面試官】：說一下微任務
【我的回答】：微任務是在本輪任務執行完畢後立即執行，例如Promise。而宏任務是在主任務執行棧的任務全部執行完畢後才會進入主任務執行棧中執行。
參考答案：
JS是單執行緒語言，指JS執行環境中那個負責執行程式碼的執行緒只有一個。但是JS的執行環境以及JS的某些API在執行時是可以開啟新的執行緒的。當JS程式碼的回撥棧中進行某些耗時任務時，會將這些耗時任務放到WebAPI中，等到可以執行的時候，就會進入訊息佇列中。當回撥棧空的時候，會被Event Loop監聽到，Event Loop會從訊息佇列中取出第一個任務放到回撥棧中讓主任務執行。
JS回撥佇列中的任務稱之為【宏任務】，而宏任務執行過程中可以臨時加上一些額外需求，可以選擇作為一個新的宏任務進到佇列中排隊(如setTimeout)，也可以作為當前任務的【微任務】，直接在當前任務結束後立即執行。
微任務的目的是為了提高整體的響應能力，目前絕大多數非同步呼叫都是作為宏任務執行，Promise 、MutationObserver、process.nextTick 是作為微任務在本輪呼叫的末尾執行。
【我的回答】：const和let是定義塊級作用域變數的，const定義的是常數、let定義的是變數
【面試官】：const定義的變數可以修改嗎
【我的回答】：const定義的原始型別變數不可以修改，const定義的應用型別變數不可以修改變數的參照地址，但是可以修改變數物件的屬性值。
參考答案：
ES6 新增了let和const命令，但是所宣告的變數，只在命令所在的程式碼塊內有效。const宣告一個唯讀的常數。一旦宣告，常數的值就不能改變。
const實際上保證的，並不是變數的值不得改動，而是變數指向的那個記憶體地址所儲存的資料不得改動。對於簡單型別的資料（數值、字串、布林值），值就儲存在變數指向的那個記憶體地址，因此等同於常數。但對於複合型別的資料（主要是物件和陣列），變數指向的記憶體地址，儲存的只是一個指向實際資料的指標，const只能保證這個指標是固定的（即總是指向另一個固定的地址），至於它指向的資料結構是不是可變的，就完全不能控制了。因此，將一個物件宣告為常數必須非常小心。
【我的回答】：是通過value屬性和change方法實現的
【面試官】：怎麼實現的？
【我的回答】：元素的值繫結到value上，然後監聽change事件，在change事件觸發時更新value
【面試官】：怎麼實現監聽事件和更新的？
【我的回答】：就是監聽change事件啊
【面試官】：不止是這樣···
(第二天我才想起來這個問題應該考的是Vue原理···被自己蠢哭)
參考答案：
Vue 資料雙向繫結主要是指：資料變化更新檢視，檢視變化更新資料。其中，View變化更新Data，可以通過事件監聽的方式來實現，所以 Vue資料雙向繫結的工作主要是如何根據Data變化更新View。
當你把一個普通的 JavaScript 物件傳入 Vue 範例作為 data 選項，Vue 將遍歷此物件所有的 property，並使用 Object.defineProperty 把這些 property 全部轉為 getter/setter。
這些 getter/setter 對使用者來說是不可見的，但是在內部它們讓 Vue 能夠追蹤依賴，在 property 被存取和修改時通知變更。
每個元件範例都對應一個 watcher 範例，它會在元件渲染的過程中把「接觸」過的資料 property 記錄為依賴。
之後當依賴項的 setter 觸發時，會通知 watcher，從而使它關聯的元件重新渲染。
主要功能：
監聽器 Observer：對資料物件進行遍歷，包括子屬性物件的屬性，利用 Object.defineProperty() 對屬性都加上 setter 和 getter。這樣的話，給這個物件的某個值賦值，就會觸發 setter，那麼就能監聽到了資料變化。
解析器 Compile：解析 Vue 模板指令，將模板中的變數都替換成資料，然後初始化渲染頁面檢視，並將每個指令對應的節點繫結更新函數，新增監聽資料的訂閱者，一旦資料有變動，收到通知，呼叫更新函數進行資料更新。
訂閱者 Watcher：Watcher 訂閱者是 Observer 和 Compile 之間通訊的橋樑 ，主要的任務是訂閱 Observer 中的屬性值變化的訊息，當收到屬性值變化的訊息時，觸發解析器 Compile 中對應的更新函數。
每個元件範例都有相應的 watcher 範例物件，它會在元件渲染的過程中把屬性記錄為依賴，之後當依賴項的 setter 被呼叫時，會通知 watcher 重新計算，從而致使它關聯的元件得以更新——這是一個典型的觀察者模式
訂閱器 Dep：訂閱器採用 釋出-訂閱 設計模式，用來收集訂閱者 Watcher，對監聽器 Observer 和 訂閱者 Watcher 進行統一管理。
【我的回答】：是用來監聽物件屬性的變化的，set方法可以設定屬性，get方法可以獲取屬性，可以監聽到屬性的修改，但是監聽不到屬性的新增和刪除
【面試官】：為什麼監聽不到屬性的刪除
【我的回答】：這個我不知道唉，JS這個API就是這麼定義的，為什麼監聽不到屬性的刪除那就涉及JS底層原理了吧
【面試官】：······
參考答案：
Object.defineProperty()的作用就是直接在一個物件上定義一個新屬性，或者修改一個已經存在的屬性。
Object.defineProperty(obj, prop, desc)
在Vue2.0中，對於Object.defineProperty來說，處理陣列與物件是一視同仁的，只是在初始化時去改寫get和set達到監測陣列或物件的變化，對於新增的屬性，需要手動再初始化。對於陣列來說，只不過特別了點，push、unshift值也會新增索引，對於新增的索引也是可以新增observe從而達到監聽的效果；pop、shift值會刪除更新索引，也會觸發defineProperty的get和set。對於重新賦值length的陣列，不會新增索引，因為不清楚新增的索引有多少，根據ecma規範定義，索引的最大值為2^32 - 1，不可能迴圈去賦值索引的。
【我的回答】：flex實現起來最簡單
【面試官】：那你說說flex如何實現
【我的回答】：先設定flex-direction為column,就是縱向佈局了，然後設定justify-content為center，就是垂直居中了，對吧
【面試官】：那還要水平居中呢
【我的回答】：那就再設定一個align-item為center就可以了
參考答案：
程式碼倉庫地址：https://gitee.com/jiailing/WebTest/tree/master/CSS%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E5%B8%83%E5%B1%80%E6%96%B9%E6%A1%88
display:table和vertical-align:middle
line-height和vertical-align對圖片進行垂直居中.html
【我的回答】：flex為一個數位的時候，是比例，比如說有兩個子元素的flex分別為1和1，那它倆在父元素中的佔比就是1:1，如果這兩個子元素的flex分別為1和2,那它倆在父元素中的佔比就是為1:2
【面試官】：那如果flex的屬性為三個引數呢，分別是什麼含義
【我的回答】：flex屬性值還可以為三個引數嗎，這個我不知道···
【面試官】：恩是可以的，那你說說flex如何實現放縮
【我的回答】：是指cover、contain嗎
【面試官】：這個屬性叫什麼
【我的回答】：額···不記得了
【面試官】：flex你需要複習複習
參考答案：
菜鳥教學：https://www.runoob.com/css3/css3-flexbox.html
flex 屬性用於指定彈性子元素如何分配空間。
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。
注意： 如果元素不是彈性盒模型物件的子元素，則 flex 屬性不起作用。
flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
各個值解析:
面試官人挺好的，他感受到我英語不好後，還是考察了我一些技術問題。總共聊了17分鐘，結束時說明了這個崗位需要英語溝通能力好的，然後給了我一些鼓勵，還給了我一些建議，讓我再複習複習flex佈局、閉包、還有Vue雙向資料繫結的原理。
前端知識肯定是要再好好準備的，除此之外，我想我還得提升一下我的英語了，我感覺我的英語應該還有的救吧，畢竟曾經也過了六級(主要是運氣爆棚)，閱讀能力也還OK(自我感覺)，就是嘴巴說不出來，耳朵聽不懂，應該還是缺乏了英語口語交際訓練。現在就給自己立下一個練好口語的flag，加油！