面試遇到的6道面試題

1. 原由

今天被抓差給候選者進行初面。在這裏記錄一下面試中涉及的幾個知識點。

每次面試我都會遞給候選者一瓶水，這樣可讓候選者沒那麼緊張，有更好的狀態進行面試，畢竟面試是雙向選擇，公司也須要儘快找到合適的人，沒那麼多網上說的心理戰。

這裏我還想吐槽一下面試造火箭工做擰螺絲，尤爲是開發行業，不少面試官針對本身擅長的方向大問特問，徹底忽略了候選人的優點，從而給候選人帶來一個極差的面試體驗。面試最好仍是要經過候選人身上的優勢來判斷對方是否適合加入你的團隊。

正常的面試應該是按照候選人簡歷中涉及的技術點發問，否則面試時給你一份簡歷幹嗎，至於簡歷中未涉及的知識點有沒有必要問，我以爲沒什麼必要的，由於不少人在寫簡歷的時候都是力求全面，巴不得據說過的知識點都寫上熟悉。因此按照簡歷提問就能夠了。除此以外再問一些最近流行的技術，主要考察的是候選人對新技術的敏感性和對新事物的接受能力。

若是其中涉及到候選人回答不上的問題也須要給候選人作一番解答，畢竟人家那麼遠來你這面試，總要有所收穫不是。

最後在簡歷中挑選一個候選人比較擅長的點深刻來問，這個環節我通常稱爲定級，前面的問題若是回答的不錯，這我的基本就經過了，到最後就要給人定級。若是前面問題回答的不理想基本也到不了這個環節。

2. Proxy

在2020年來看Proxy早已經不是一個陌生的詞了，他能作的是有不少，尤爲在Vue3.0經過Proxy來重構以後，不少面試官喜歡問這個Proxy以及和Object.defineProperty的對比。

Proxy是專門爲對象設置訪問代理器的，經過Proxy能夠輕鬆監視到對象的讀寫過程，相比於defineProperty，Proxy他的功能要更爲強大甚至使用起來也更爲方便。

這裏咱們定義一個person對象，咱們經過new Proxy的方式來去爲咱們的person來建立一個代理對象。

Proxy構造函數的第一個參數就是咱們須要代理的對象，這裏是person，第二個參數也是一個對象，咱們能夠把這個對象稱之爲代理的處理對象，這個對象中能夠經過get方法來去監視屬性的訪問，經過set方法來去介紹對象當中設置屬性這樣的一個過程。

const person = {
    name: 'yd',
    age: 18
}

const personProxy = new Proxy(person, {
    get() {},
    set() {}
})
複製代碼

先來看get方法，這個方法最簡單能夠接收兩個參數，第一個就是所代理的目標對象，第二個就是外部所訪問的這個屬性的屬性名。這個方法的返回值將會做爲外部去訪問這個屬性獲得的結果。

{
    get(target, property) {
        console.log(target, property);
        return property in target ? target[property] : undefined;
    }
}
複製代碼

再來看下set方法，這個方法默認接收三個參數, 分別是代理目標對象，以及咱們要寫入的屬性名稱還有最後咱們要寫入的屬性值。 咱們能夠作一些校驗，好比說若是設置的是age，他的值就必須是整數，不然就拋錯。

{
    set(target, property, value) {
        console.log(target, property, value);
        if (property === 'age') {
            if (!Number.isInteger(value)) {
                throw new TypeError(``${value} must be a integer);
            }
        }
        target[property] = value;
    }
}
複製代碼

相比於Object.defineProperty, Proxy到底有哪些優點。

首先最明顯的優點就是在於Proxy要更爲強大一些，那這個強大具體體如今Object.defineProperty只能監聽到對象屬性的讀取或者是寫入，而Proxy除讀寫外還能夠監聽對象中屬性的刪除，對對象當中方法的調用等等。

第二點優點就是對於數組對象進行監視，一般咱們想要監視數組的變化，基本要依靠重寫數組方法，這也是Vue的實現方式，proxy能夠直接監視數組的變化。以往咱們想要經過Object.defineProperty去監視數組的操做最多見的方式是重寫數組的操做方法，這也是Vue.js中所使用的方式，大致的方式就是經過自定義的方法去覆蓋掉數組原型對象上的push，shift之類的方法，以此來劫持對應的方法調用的過程。

3. 對象的鍵支持什麼類型

這個問題考察的是候選人的基礎知識是否紮實。

不少人都會認爲對象的鍵是字符串類型，若是在之前確實沒錯，可是ES2015版本中對象的鍵類型還能夠是Symbol。

const person = {
   	name: 'yd',
    [Symbol()]: 18
}
複製代碼

這也是引出下面的Symbol。

4. Symbol

在ECMAScript2015以前，對象的屬性名都是字符串，而字符串是有可能會重複的。若是重複的話就會產生衝突。

之前解決這種問題最好的方式就是約定，可是約定的方式只是規避了問題並非完全解決了這個問題。若是在這個過程當中有人不遵照約定那這個問題仍然會存在。

ES2015爲了解決這個問題提供了一種全新的原始數據類型Symbol，翻譯過來的意思叫作符號，翻譯過來就是表示一個獨一無二的值。 經過Symbol函數就能夠建立一個Symbol類型的數據，並且這種類型的數據typeof的結果就是symbol，那這也就表示他確實是一個全新的類型。

const s = Symbol();
typeof s; // symbol類型
複製代碼

這種類型最大的特色就是獨一無二，也就是說咱們經過Symbol函數建立的每個值都是惟一的。他永遠不會重複。

Symbol() === Symbol(); // false
複製代碼

考慮到在開發過程當中的調試Symbol建立時容許接收一個字符串，做爲這個值的描述文本, 對於咱們屢次使用Symbol時就能夠區分出是哪個Symbol，但這個參數也僅是描述做用，相同的描述字段生成的值還是不一樣的。

const s1 = Symbol('foo');
const s2 = Symbol('foo');

s1 === s2; // false
複製代碼

從ES2015開始，對象就已經容許使用Symbol做爲屬性名。那也就是說如今對象的屬性名能夠是兩種類型，字符串和Symbol。

const person = {
    [Symbol()]: 123,
    [Symbol()]: 456
}
複製代碼

若是咱們須要在全局去複用一個相同的Symbol值，咱們可使用全局變量的方式去實現，或者是使用Symbol類型提供的一個靜態方法去實現。具體就是Symbol的靜態方法for，這個方法接收一個字符串做爲參數，相同的參數必定對應相同的值。

const s1 = Symbol.for('foo');
const s2 = Symbol.for('foo');

s1 === s2; // true
複製代碼

這個方法維護了一個全局的註冊表，爲字符串和Symbol提供了一個對應關係。須要注意的是，在內部維護的是字符串和Symbol的關係，那也就是說如參數不是字符串，會轉換爲字符串。

const s1 = Symbol.for('true');
const s2 = Symbol.for(true);

s1 === s2; // true
複製代碼

5. JSONP

不少人對jsonp的理解都停留在概念上，沒有真正理解過他的原理，他爲何能夠跨域，固然不只僅是script標籤不受同源策略影響，實際上jsonp是一種先後端約定的解決方案。

不過如今基本已經不多用到了。由於如今已經有了更流行的CORS方案，相對來講也會更安全，不過jsonp仍是有其自身的優點的。

不少人都知道瀏覽器的同源策略，就是發送請求的頁面地址和被請求的接口地址的域名，協議，端口三者必須一致，不然瀏覽器就會攔截這種請求。瀏覽器攔截的意思不是說請求發佈出去，請求仍是能夠正常觸達服務器的，若是服務器正常返回了瀏覽器也會接收的到，只是不會交給咱們所在的頁面。這一點查看network是能夠看到的。

jsonp通常是利用script標籤的src屬性，對於服務器來講只有請求和響應兩種操做，請求來了就會響應，不管響應的是什麼。請求的類型實在太多了。

瀏覽器輸入一個url是一個請求，ajax調用一個接口也是一個請求，img和script的src也是請求。這些地址都會觸達服務器。那爲何jsonp通常會選用script標籤呢，首先你們都知道script加載的js是沒有跨域限制的，由於加載的是一個腳本，不是一個ajax請求。

你能夠理解爲瀏覽器限制的是XMLHttpRequest這個對象，而script是不使用這個對象的。

僅僅沒有限制還不夠，還有一個更重要的點由於script是執行js腳本的標籤，他所請求到的內容會直接當作js來執行。

這也能夠看出，jsonp和ajax對返回參數的要求是不一樣的，jsonp須要服務返回一段js腳本，ajax須要返回的是數據。

所以這就要求服務器單獨來處理jsonp這中請求，通常服務器接口會把響應的數據經過函數調用的方式返回，好比說返回的內容是yd，那就要返回成cb('yd')

cb('yd')
複製代碼

這是一段函數調用的腳本，經過script標籤加載以後會當即執行的，若是咱們在全局定義一個cb函數。那麼這段腳本執行的時候就會調用到咱們定義的那個函數，函數中的參數就是服務返回的值了。前端也就能夠在這個函數中獲取到了。

function cb (data) {
    console.log(data);
}
複製代碼

因此說jsonp是先後端共同約定的一種結果。

6. CORS

瀏覽器經過同源策略來限制先後端的跨域問題，但同時也給了相應的解決方案。

服務器在返回相應的時候能夠經過設置響應頭來容許哪些網址跨域請求，這樣前端就能夠成功拿到響應的結果了。因此這也證明了，前端拿不到結果不是服務器不返回，而是瀏覽器沒有給到前端。

Access-Control-Allow-Origin: www.xxxx.com
複製代碼

7. webpack的proxy是如何解決跨域的?

前面說了，跨域是由於瀏覽器的同源策略限制，問題發生在瀏覽器身上，那咱們是否是能夠避過瀏覽器呢，前面我寫過一篇前端須要知道的nginx，裏面介紹了反向代理和負載均衡，其實這就像是反向代理同樣。

咱們在使用webpack開發項目的時候，webpack的dev-server模塊會啓動一個服務器，這個服務器不止幫咱們作了自動更新，同時也能夠作到反向代理。

就是咱們把請求發送給webpack-dev-server, 而後webpack-dev-server再去請求後端服務器，服務之間的請求是沒有跨域問題的，只要後端返回了webpack-dev-server就能拿到，而後再返回給前端。

好了基本上就問了這幾個問題，老闆說面試時間控制在20分鐘左右。