2020.10.20英語前端電話面試總結

人生第二次前端面試，這次面的這個前端崗位是需要有很好的英語口語溝通能力的，我英語很差，面試官讓我用英語自我介紹幾句就說了解到了我的水平了，嚶嚶嚶···所以英語這方面就沒什么好說的了，我也知道自己英語差~

所以還是記錄一下問到的技術方面的題目吧

1. 對函式式編程的理解

【我的回答】：函式式編程是一種編程范式，相同的輸入永遠得到相同的輸出，不會產生副作用，

【面試官】：嗯···

（我答得不是很全面）

參考答案：

阮一峰老師《函式式編程初探》：

"函式式編程"是一種"編程范式"（programming paradigm），也就是如何撰寫程式的方法論，它屬于"結構化編程"的一種，主要思想是把運算程序盡量寫成一系列嵌套的函式呼叫，

函式式編程具有五個鮮明的特點：

1. 函式是"第一等公民"
2. 只用"運算式"，不用"陳述句"
3. 沒有"副作用"
4. 不修改狀態
5. 參考透明

函式式編程的意義：

1. 代碼簡潔，開發快速
2. 接近自然語言，易于理解
3. 更方便的代碼管理
4. 易于“并發編程”
5. 代碼的熱升級

2. JS基礎資料型別有哪些

【我的回答】：boolean、number、string、undefined、null、object、ES6新增了Symbol、ES2020新增了bigint

【面試官】：嗯還可以

參考答案：這個答案就是我回答到的boolean、number、string、undefined、null、object，然后ES6新增了Symbol，ES2020新增了bigint

3. 閉包是什么

【我的回答】：閉包是JS在運行程序中的一種現象，一般發生在函式作為引數、函式作為回傳值的時候，里面的變數沒有得到銷毀，就產生了閉包，

【面試官】：那是回傳的函式內是閉包還是函式參考的變數產生了閉包？

【我的回答】：是回傳的函式內所參考到了外部變數產生了閉包

【面試官】：額···

（這個問題我當時答得不好，亂七八糟說了一大堆，感覺自己也講不清楚了）

參考答案：

還是參考阮一峰老師《學習Javascript閉包（Closure）》：

由于在Javascript語言中，只有函式內部的子函式才能讀取區域變數，因此可以把閉包簡單理解成"定義在一個函式內部的函式"， 所以，在本質上，閉包就是將函式內部和函式外部連接起來的一座橋梁， 閉包可以用在許多地方， 它的最大用處有兩個，一個是前面提到的可以讀取函式內部的變數，另一個就是讓這些變數的值始終保持在記憶體中，

4. JS的事件機制是怎樣的

【我的回答】：是指事件回圈吧，JS執行的時候有個主任務執行堆疊，主任務中如果遇到異步任務會放到回呼佇列中，等主任務全部執行完畢后，回呼佇列中的任務會進入到主任務中，其中異步任務又分為宏任務和微任務，

【面試官】：說一下微任務

【我的回答】：微任務是在本輪任務執行完畢后立即執行，例如Promise，而宏任務是在主任務執行堆疊的任務全部執行完畢后才會進入主任務執行堆疊中執行，

參考答案：

JS是單執行緒語言，指JS執行環境中那個負責執行代碼的執行緒只有一個，但是JS的運行環境以及JS的某些API在運行時是可以開啟新的執行緒的，當JS代碼的回呼堆疊中進行某些耗時任務時，會將這些耗時任務放到WebAPI中，等到可以執行的時候，就會進入訊息佇列中，當回呼堆疊空的時候，會被Event Loop監聽到，Event Loop會從訊息佇列中取出第一個任務放到回呼堆疊中讓主任務執行，

JS回呼佇列中的任務稱之為【宏任務】，而宏任務執行程序中可以臨時加上一些額外需求，可以選擇作為一個新的宏任務進到佇列中排隊(如setTimeout)，也可以作為當前任務的【微任務】，直接在當前任務結束后立即執行，

微任務的目的是為了提高整體的回應能力，目前絕大多數異步呼叫都是作為宏任務執行，Promise 、MutationObserver、process.nextTick 是作為微任務在本輪呼叫的末尾執行，

5. const 和 let 的區別

【我的回答】：const和let是定義塊級作用域變數的，const定義的是常量、let定義的是變數

【面試官】：const定義的變數可以修改嗎

【我的回答】：const定義的原始型別變數不可以修改，const定義的應用型別變數不可以修改變數的參考地址，但是可以修改變數物件的屬性值，

參考答案：

ES6 新增了let和const命令，但是所宣告的變數，只在命令所在的代碼塊內有效，const宣告一個只讀的常量，一旦宣告，常量的值就不能改變，

const實際上保證的，并不是變數的值不得改動，而是變數指向的那個記憶體地址所保存的資料不得改動，對于簡單型別的資料（數值、字串、布林值），值就保存在變數指向的那個記憶體地址，因此等同于常量，但對于復合型別的資料（主要是物件和陣列），變數指向的記憶體地址，保存的只是一個指向實際資料的指標，const只能保證這個指標是固定的（即總是指向另一個固定的地址），至于它指向的資料結構是不是可變的，就完全不能控制了，因此，將一個物件宣告為常量必須非常小心，

6. Vue的資料雙向系結的原理

【我的回答】：是通過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 進行統一管理，

7. Object.defineProperty有什么作用

【我的回答】：是用來監聽物件屬性的變化的，set方法可以設定屬性，get方法可以獲取屬性，可以監聽到屬性的修改，但是監聽不到屬性的新增和洗掉

【面試官】：為什么監聽不到屬性的洗掉

【我的回答】：這個我不知道唉，JS這個API就是這么定義的，為什么監聽不到屬性的洗掉那就涉及JS底層原理了吧

【面試官】：······

參考答案：

Object.defineProperty()的作用就是直接在一個物件上定義一個新屬性，或者修改一個已經存在的屬性，

Object.defineProperty(obj, prop, desc)

1. obj 需要定義屬性的當前物件
2. prop 當前需要定義的屬性名
3. desc 屬性描述符

在Vue2.0中，對于Object.defineProperty來說，處理陣列與物件是一視同仁的，只是在初始化時去改寫get和set達到監測陣列或物件的變化，對于新增的屬性，需要手動再初始化，對于陣列來說，只不過特別了點，push、unshift值也會新增索引，對于新增的索引也是可以添加observe從而達到監聽的效果；pop、shift值會洗掉更新索引，也會觸發defineProperty的get和set，對于重新賦值length的陣列，不會新增索引，因為不清楚新增的索引有多少，根據ecma規范定義，索引的最大值為2^32 - 1，不可能回圈去賦值索引的，

8. CSS實作垂直居中幾種方式

【我的回答】：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

CSS-Grid.html

display:table和vertical-align:middle

flex布局.html

line-height和vertical-align對圖片進行垂直居中.html

line-height對單行文本進行垂直居中.html

padding實作子元素的垂直居中.html

彈性布局.html

絕對定位和transform.html

絕對定位和負外邊距對塊級元素進行垂直居中.html

絕對定位和負外邊距進行垂直居中.html

絕對定位結合margin:auto.html

設定第三方基準.html

9. flex: 1是什么意思、flex如何實作放縮、flex屬性的三個引數有什么含義

【我的回答】：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 ]

各個值決議:

• auto: 計算值為 1 1 auto
• initial: 計算值為 0 1 auto
• none：計算值為 0 0 auto
• inherit：從父元素繼承
• [ flex-grow ]：定義彈性盒子元素的擴展比率，一個數字，規定專案將相對于其他靈活的專案進行擴展的量，
• [ flex-shrink ]：定義彈性盒子元素的收縮比率，一個數字，規定專案將相對于其他靈活的專案進行收縮的量，
• [ flex-basis ]：定義彈性盒子元素的默認基準值，專案的長度，合法值：“auto”、“inherit” 或一個后跟 “%”、“px”、“em” 或任何其他長度單位的數字，

面試官人挺好的，他感受到我英語不好后，還是考察了我一些技術問題，總共聊了17分鐘，結束時說明了這個崗位需要英語溝通能力好的，然后給了我一些鼓勵，還給了我一些建議，讓我再復習復習flex布局、閉包、還有Vue雙向資料系結的原理，

前端知識肯定是要再好好準備的，除此之外，我想我還得提升一下我的英語了，我感覺我的英語應該還有的救吧，畢竟曾經也過了六級(主要是運氣爆棚)，閱讀能力也還OK(自我感覺)，就是嘴巴說不出來，耳朵聽不懂，應該還是缺乏了英語口語交際訓練，現在就給自己立下一個練好口語的flag，加油！