一入前端深似海前言先介紹一下自己的情況吧內蒙古呼和浩特某大學畢業，專科，計算機多媒體專業畢業16年出來工作，工作經驗四年，之前主要做平面相關，自己喜歡瞎折騰，從17年開始研究前端，然後公司內部轉崗到開發部門工作，算下來前端經驗也快三年之久。年底由於種種原因想換一份工作，但由於太忙，沒認真搞簡歷，也沒怎麼複習基礎，導致很多本來會的都沒敢往簡歷上寫。於是寫了一個簡版的簡歷掛在Boss直聘上，準備年過完再認真籌備這件事情。令我意外的是，近一個月收到多家公司的面試邀請。因此總結一波2020年最新面試題，希望對大家有所幫助！後面的答案為自行整理，如有疏漏，歡迎指正！面試總結重視基礎和原理重視基礎和原理重視基礎和原理電話一面請介紹一下原型建構函式是一種特殊的方法，主要用來在建立物件時初始化物件。每個函式都有prototype(原型)屬性(注：箭頭函式以及function.prototype.bind()函式是沒有prototype(原型)的)，這個prototype(原型)屬性是一個指標，指向一個物件，這個物件的用途是包含特定型別的所有例項共享的屬性和方法，即這個原型物件是用來給例項物件共享屬性和方法的。每個例項物件的__proto__都指向這個建構函式/類的prototype屬性。面向物件的三大特性：繼承/多型/封裝關於new運算子：1. new執行的函式, 函式內部預設生成了一個物件2. 函式內部的this預設指向了這個new生成的物件3. new執行函式生成的這個物件, 是函式的預設返回值ES5例子：function Person(obj) {this.name = obj.namethis.age= obj.age}// 原型方法Person.prototype.say = function() {  console.log('你好,', this.name )}// p為例項化物件，new Person()這個操作稱為建構函式的例項化let p = new Person({name: '番茄', age: '27'})console.log(p.name, p.age)p.say()ES6例子：class Person{constructor(obj) {  this.name = obj.namethis.age= obj.age  }  say() {  console.log(this.name)  }}let p = new Person({name: 'ES6-番茄', age: '27'})console.log(p.name, p.age)p.say()ES5建構函式的寫法及用法ES6類的寫法及用法關於原型的繼承我們藉助寄生組合繼承function Person(obj) {    this.name = obj.name    this.age = obj.age}Person.prototype.add = function(value){    console.log(value)}var p1 = new Person({name:&quot;番茄&quot;, age: 18})function Person1(obj) {    Person.call(this, obj)    this.sex = obj.sex}// 這一步是繼承的關鍵Person1.prototype = Object.create(Person.prototype)Person1.prototype.play = function(value){    console.log(value)}var p2 = new Person1({name:&quot;雞蛋&quot;, age: 118, sex: &quot;男&quot;})關於面向物件的更多相關資訊請私信我發你我的個人部落格總結閉包首先說明什麼是閉包，閉包簡單來說就是函式巢狀函式，內部函式引用來外部函式的變數，從而導致垃圾回收機制沒有把當前變量回收掉，這樣的操作帶來了記憶體洩漏的影響，當記憶體洩漏到一定程度會影響你的專案執行變得卡頓等等問題。因此在專案中我們要儘量避免記憶體洩漏。原型鏈原型鏈實際上在上面原型的問題中就有涉及到，在原型的繼承中，我們繼承來多個原型，這裡再提一下實現完美繼承的方案，透過藉助寄生組合繼承，PersonB.prototype = Object.create(PersonA.prototype)這是當我們例項化PersonB得到例項化物件，訪問例項化物件的屬性時會觸發get方法，它會先在自身屬性上查詢，如果沒有這個屬性，就會去__proto__中查詢，一層層向上直到查詢到頂層物件Object，這個查詢的過程就是原型鏈來。請介紹一下vuex以及使用和注意事項vuex是一個專為vue.js應用程式開發的狀態管理器，它採用集中式儲存管理應用的所有元件的狀態，並且以相應的規則保證狀態以一種可以預測的方式發生變化。state: vuex使用單一狀態樹，用一個物件就包含來全部的應用層級狀態mutation: 更改vuex中state的狀態的唯一方法就是提交mutationaction: action提交的是mutation，而不是直接變更狀態，action可以包含任意非同步操作getter: 相當於vue中的computed計算屬性請介紹一下vue-router以及使用和注意事項vue-router是vuex.js官方的路由管理器，它和vue.js的核心深度整合，讓構建但頁面應用變得易如反掌&lt;router-link&gt; 元件支援使用者在具有路由功能的應用中 (點選) 導航。 透過 to 屬性指定目標地址&lt;router-view&gt; 元件是一個 functional 元件，渲染路徑匹配到的檢視元件。&lt;keep-alive&gt; 元件是一個用來快取元件router.beforeEachrouter.afterEachto: Route: 即將要進入的目標 路由物件from: Route: 當前導航正要離開的路由next: Function: 一定要呼叫該方法來 resolve 這個鉤子。執行效果依賴 next 方法的呼叫引數。介紹了路由守衛及用法，在專案中路由守衛起到的作用等等淺複製/深複製淺複製：淺複製透過ES6新特性Object.assign()或者透過擴充套件運演算法...來達到淺複製的目的，淺複製修改副本，不會影響原資料，但缺點是淺複製只能複製第一層的資料，且都是值型別資料，如果有引用型資料，修改副本會影響原資料。深複製：透過利用JSON.parse(JSON.stringify())來實現深複製的目的，但利用JSON複製也是有缺點的，當要複製的資料中含有undefined/function/symbol型別是無法進行複製的，當然我們想專案開發中需要深複製的資料一般不會含有以上三種類型，如有需要可以自己在封裝一個函式來實現。vue中通訊有哪些方式1.props和$emit2.中央事件匯流排 EventBus(基本不用)3.vuex(官方推薦狀態管理器)4.$parent和$children當然還有一些其他辦法，但基本不常用，或者用起來太複雜來。 介紹來通訊的方式，還可以擴充套件說一下使用場景，如何使用，注意事項之類的。你在工作中遇到過那些問題，是如何解決的？經常遇到的問題就是Cannot read property ‘prototype’ of undefined解決辦法透過瀏覽器報錯提示程式碼定位問題，解決問題Vue專案中遇到檢視不更新，方法不執行，埋點不觸發等問題一般解決方案檢視瀏覽器報錯，檢視程式碼執行到那個階段未之行結束，閱讀原始碼以及相關文件等然後舉出來最近開發的專案中遇到的算是兩個比較大的問題webpack配置入口出口module.exports={    //入口檔案的配置項    entry:{},    //出口檔案的配置項    output:{},    //模組：例如解讀CSS,圖片如何轉換，壓縮    module:{},    //外掛，用於生產模版和各項功能    plugins:[],    //配置webpack開發服務功能    devServer:{}}簡單描述了一下這幾個屬性是幹什麼的。描述一下npm run dev / npm run build執行的是哪些檔案透過配置proxyTable來達到開發環境跨域的問題，然後又可以擴充套件和他聊聊跨域的產生，如何跨域最後可以在聊聊webpack的最佳化，例如babel-loader的最佳化，gzip壓縮等等webpack3和webpack4的區別1.modewebpack增加了一個mode配置，只有兩種值development | production。對不同的環境他會啟用不同的配置。2.CommonsChunkPluginCommonChunksPlugin已經從webpack4中移除。可使用optimization.splitChunks進行模組劃分（提取公用程式碼）。但是需要注意一個問題，預設配置只會對非同步請求的模組進行提取拆分，如果要對entry進行拆分需要設定optimization.splitChunks.chunks = 'all'。3.webpack4使用MiniCssExtractPlugin取代ExtractTextWebpackPlugin。4.程式碼分割。使用動態import，而不是用system.import或者require.ensure5.vue-loader。使用vue-loader外掛為.vue檔案中的各部分使用相對應的loader，比如css-loader等6.UglifyJsPlugin現在也不需要使用這個plugin了，只需要使用optimization.minimize為true就行，production mode下面自動為trueoptimization.minimizer可以配置你自己的壓縮程式以上大概就是一面的一些比較重要的題目了，還有一些很簡單的問題和程式碼執行的問題就沒有寫出來了電話二面陳述輸入URL回車後的過程1.讀取快取： 搜尋自身的 DNS 快取。(快取中找到IP 地址就跳過了接下來查詢 IP 地址步驟，直接訪問該 IP 地址。)2.DNS 解析:將域名解析成 IP 地址3.TCP 連線：TCP 三次握手，簡易描述三次握手  客戶端：服務端你在麼？   服務端：客戶端我在，你要連線我麼？   客戶端：是的服務端，我要連結。   連線打通，可以開始請求來  4.傳送 HTTP 請求5.伺服器處理請求並返回 HTTP 報文6.瀏覽器解析渲染頁面7.斷開連線：TCP 四次揮手關於第六步瀏覽器解析渲染頁面又可以聊聊如果返回的是html頁面根據 HTML 解析出 DOM 樹根據 CSS 解析生成 CSS 規則樹結合 DOM 樹和 CSS 規則樹，生成渲染樹根據渲染樹計算每一個節點的資訊根據計算好的資訊繪製頁面陳述一下http基本概念：HTTP，全稱為 HyperText Transfer Protocol，即為超文字傳輸協議。是網際網路應用最為廣泛的一種網路協議所有的 www 檔案都必須遵守這個標準。http特性：HTTP 是無連線無狀態的HTTP 一般構建於 TCP/IP 協議之上，預設埠號是 80HTTP 可以分為兩個部分，即請求和響應。http請求：HTTP 定義了在與伺服器互動的不同方式，最常用的方法有 4 種分別是 GET，POST，PUT， DELETE。URL 全稱為資源描述符，可以這麼認為：一個 URL 地址對應著一個網路上的資源，而 HTTP 中的 GET，POST，PUT，DELETE 就對應著對這個資源的查詢，修改，增添，刪除4個操作。HTTP 請求由 3 個部分構成，分別是：狀態行，請求頭(Request Header)，請求正文。HTTP 響應由 3 個部分構成，分別是：狀態行，響應頭(Response Header)，響應正文。HTTP 響應中包含一個狀態碼，用來表示伺服器對客戶端響應的結果。狀態碼一般由3位構成：1xx : 表示請求已經接受了，繼續處理。2xx : 表示請求已經處理掉了。3xx : 重定向。4xx : 一般表示客戶端有錯誤，請求無法實現。5xx : 一般為伺服器端的錯誤。比如常見的狀態碼：200 OK 客戶端請求成功。301 Moved Permanently 請求永久重定向。302 Moved Temporarily 請求臨時重定向。304 Not Modified 檔案未修改，可以直接使用快取的檔案。400 Bad Request 由於客戶端請求有語法錯誤，不能被伺服器所理解。401 Unauthorized 請求未經授權，無法訪問。403 Forbidden 伺服器收到請求，但是拒絕提供服務。伺服器通常會在響應正文中給出不提供服務的原因。404 Not Found 請求的資源不存在，比如輸入了錯誤的URL。500 Internal Server Error 伺服器發生不可預期的錯誤，導致無法完成客戶端的請求。503 Service Unavailable 伺服器當前不能夠處理客戶端的請求，在一段時間之後，伺服器可能會恢復正常。大概還有一些關於http請求和響應頭資訊的介紹。Vue路由守衛有哪些，怎麼設定，使用場景等常用的兩個路由守衛：router.beforeEach 和 router.afterEach每個守衛方法接收三個引數：to: Route: 即將要進入的目標 路由物件from: Route: 當前導航正要離開的路由next: Function: 一定要呼叫該方法來 resolve 這個鉤子。在專案中，一般在beforeEach這個鉤子函式中進行路由跳轉的一些資訊判斷。判斷是否登入，是否拿到對應的路由許可權等等。擴充套件描述路由傳參，新開頁面，程式設計式導航等等。陣列去重第一種： 透過ES6新特性Set()例如： var arr = [1, 2, 3, 1, 2]; var newArr= [...new Set(arr)]ES6新特性Set()去重第二種：封裝函式利用 {} 和【】function uniqueEasy(arr) {    if(!arr instanceof Array) {        throw Error('當前傳入的不是陣列')    }    let list = []    let obj = {}    arr.forEach(item =&gt; {        if(!obj[item]) {            list.push(item)            obj[item] = true        }    })    return list}封裝函式利用 {} 和【】當然還有其他的方法，但我在專案中一般使用以上兩種基本滿足Set, Map解構ES6 提供了新的資料結構 Set。它類似於陣列，但是成員的值都是唯一的，沒有重複的值。 Set 本身是一個建構函式，用來生成 Set 資料結構。ES6 提供了 Map 資料結構。它類似於物件，也是鍵值對的集合但是“鍵”的範圍不限於字串，各種型別的值（包括物件）都可以當作鍵。對陣列排序第一種方法利用sort方法，例如：var arr = [1,2,3,2,3,7,1,23,2 ,4]sort方法排序第二種手寫氣泡排序var arr = [1, 2, 3, 2, 3, 7, 1, 23, 2, 4]function sort(arr) {for(let i = 0; i &lt; arr.length; i++){for(let j = 0; j &lt; arr.length - i - 1; j++) {    if(arr[j] &gt; arr[j + 1]) {      let temp = arr[j]        arr[j] = arr[j + 1]        arr[j + 1] = temp      }    }}}console.log(arr)手寫氣泡排序說一說js是什麼語言JavaScript是一種直譯式指令碼語言，是一種動態型別、弱型別、基於原型的語言，內建支援型別。它的直譯器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的指令碼語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。js語言是弱語言型別， 因此我們在專案開發中當我們隨意更該某個變數的資料型別後有可能會導致其他引用這個變數的方法中報錯等等。後續大型專案開發中用TS比較多，TS是JS的超集說說ES6新特性1.ES6引入來嚴格模式    變數必須聲明後在使用    函式的引數不能有同名屬性, 否則報錯    不能使用with語句 (說實話我基本沒用過)    不能對只讀屬性賦值, 否則報錯    不能使用字首0表示八進位制數,否則報錯 (說實話我基本沒用過)    不能刪除不可刪除的資料, 否則報錯    不能刪除變數delete prop, 會報錯, 只能刪除屬性delete global[prop]    eval不會在它的外層作用域引入變數    eval和arguments不能被重新賦值    arguments不會自動反映函式引數的變化    不能使用arguments.caller (說實話我基本沒用過)    不能使用arguments.callee (說實話我基本沒用過)    禁止this指向全域性物件    不能使用fn.caller和fn.arguments獲取函式呼叫的堆疊 (說實話我基本沒用過)    增加了保留字（比如protected、static和interface）2.關於let和const新增的變數宣告3.變數的解構賦值4.字串的擴充套件    includes()：返回布林值，表示是否找到了引數字串。    startsWith()：返回布林值，表示引數字串是否在原字串的頭部。    endsWith()：返回布林值，表示引數字串是否在原字串的尾部。5.數值的擴充套件    Number.isFinite()用來檢查一個數值是否為有限的（finite）。    Number.isNaN()用來檢查一個值是否為NaN。6.函式的擴充套件    函式引數指定預設值7.陣列的擴充套件    擴充套件運算子8.物件的擴充套件    物件的解構9.新增symbol資料型別10.Set 和 Map 資料結構     ES6 提供了新的資料結構 Set。它類似於陣列，但是成員的值都是唯一的，沒有重複的值。 Set 本身是一個建構函式，用來生成 Set 資料結構。        Map它類似於物件，也是鍵值對的集合，但是“鍵”的範圍不限於字串，各種型別的值（包括物件）都可以當作鍵。11.Proxy    Proxy 可以理解成，在目標物件之前架設一層“攔截”，外界對該物件的訪問    都必須先透過這層攔截，因此提供了一種機制，可以對外界的訪問進行過濾和改寫。    Proxy 這個詞的原意是代理，用在這裡表示由它來“代理”某些操作，可以譯為“代理器”。    Vue3.0使用了proxy12.Promise    Promise 是非同步程式設計的一種解決方案，比傳統的解決方案——回撥函式和事件——更合理和更強大。    特點是：        物件的狀態不受外界影響。        一旦狀態改變，就不會再變，任何時候都可以得到這個結果。13.async 函式     async函式對 Generator 函式的區別：    （1）內建執行器。    Generator 函式的執行必須靠執行器，而async函式自帶執行器。也就是說，async函式的執行，與普通函式一模一樣，只要一行。    （2）更好的語義。    async和await，比起星號和yield，語義更清楚了。async表示函數里有非同步操作，await表示緊跟在後面的表示式需要等待結果。    （3）正常情況下，await命令後面是一個 Promise 物件。如果不是，會被轉成一個立即resolve的 Promise 物件。    （4）返回值是 Promise。    async函式的返回值是 Promise 物件，這比 Generator 函式的返回值是 Iterator 物件方便多了。你可以用then方法指定下一步的操作。14.Class     class跟let、const一樣：不存在變數提升、不能重複宣告...    ES6 的class可以看作只是一個語法糖，它的絕大部分功能    ES5 都可以做到，新的class寫法只是讓物件原型的寫法更加清晰、更像面向物件程式設計的語法而已。15.Module    ES6 的模組自動採用嚴格模式，不管你有沒有在模組頭部加上&quot;use strict&quot;;。    import和export命令以及export和export default的區別    關於ES6新特性有很多，你可以每個都和麵試官詳細聊聊細節Css3新特性1.過渡 transition2.動畫 animation3.形狀轉換 transform4.陰影 box-shadow5.濾鏡 Filter6.顏色 rgba7.柵格佈局 gird8.彈性佈局 flex等等還多...CSS3新特性用到的比較少，我自己一般都是用到什麼去查詢什麼，但是以上幾點常用的還是需要了解說一說你用過的UI框架Element-UI Vant Antd 我自己主要專案中用這幾類。大家可以擴充套件說明描述一下自己是如何二次封裝元件，封裝分頁，彈窗，提示等等。說一說什麼是跨域，怎麼解決因為瀏覽器出於安全考慮，有同源策略。也就是說，如果協議、域名或者埠有一個不同就是跨域Ajax 請求會失敗。為來防止CSRF攻擊1.JSONP    JSONP 的原理很簡單，就是利用 &lt;script&gt; 標籤沒有跨域限制的漏洞。    透過 &lt;script&gt; 標籤指向一個需要訪問的地址並提供一個回撥函式來接收資料當需要通訊時。    &lt;script src=&quot;http://domain/api?param1=am2=b&amp;callback=jsonp&quot;&gt;&lt;/script&gt;    &lt;script&gt;        function jsonp(data) {        console.log(data)    }    &lt;/script&gt;    JSONP 使用簡單且相容性不錯，但是隻限於 get 請求。2.CORS    CORS 需要瀏覽器和後端同時支援。IE 8 和 9 需要透過 XDomainRequest 來實現。3.document.domain    該方式只能用於二級域名相同的情況下，比如 a.test.com 和 b.test.com 適用於該方式。    只需要給頁面新增 document.domain = 'test.com' 表示二級域名都相同就可以實現跨域4.webpack配置proxyTable設定開發環境跨域5.nginx代理跨域6.iframe跨域7.postMessage這種方式通常用於獲取嵌入頁面中的第三方頁面資料。一個頁面傳送訊息，另一個頁面判斷來源並接收訊息說一說前端效能最佳化方案三個方面來說明前端效能最佳化一： webapck最佳化與開啟gzip壓縮    1.babel-loader用 include 或 exclude 來幫我們避免不必要的轉譯，不轉譯node_moudules中的js檔案    其次在快取當前轉譯的js檔案，設定loader: 'babel-loader?cacheDirectory=true'    2.檔案採用按需載入等等    3.具體的做法非常簡單，只需要你在你的 request headers 中加上這麼一句：    accept-encoding:gzip    4.圖片最佳化，採用svg圖片或者字型圖示    5.瀏覽器快取機制，它又分為強快取和協商快取二：本地儲存——從 Cookie 到 Web Storage、IndexedDB    說明一下SessionStorage和localStorage還有cookie的區別和優缺點三：程式碼最佳化    1.事件代理    2.事件的節流和防抖    3.頁面的迴流和重繪    4.EventLoop事件迴圈機制    5.程式碼最佳化等等說一說SessionStorage和localStorage還有cookie共同點：都是儲存在瀏覽器端、且同源的不同點：    1.cookie資料始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和伺服器間來回傳遞。    cookie資料還有路徑（path）的概念，可以限制cookie只屬於某個路徑下    sessionStorage和localStorage不會自動把資料傳送給伺服器，僅在本地儲存。    2.儲存大小限制也不同，cookie資料不能超過4K，sessionStorage和localStorage可以達到5M    3.sessionStorage：僅在當前瀏覽器視窗關閉之前有效；    localStorage：始終有效，視窗或瀏覽器關閉也一直儲存，本地儲存，因此用作持久資料；    cookie：只在設定的cookie過期時間之前有效，即使視窗關閉或瀏覽器關閉    4.作用域不同    sessionStorage：不在不同的瀏覽器視窗中共享，即使是同一個頁面；    localstorage：在所有同源視窗中都是共享的；也就是說只要瀏覽器不關閉，資料仍然存在    cookie: 也是在所有同源視窗中都是共享的.也就是說只要瀏覽器不關閉，資料仍然存在當然細說還有好多可以說的方面，就看你和麵試官怎麼聊了，但是關鍵點要說出來。說一說你用過的css佈局gird佈局，layout佈局，flex佈局，雙飛翼，聖盃佈局等，具體詳細描述我就不寫啦。Promise是什麼，解決了什麼，之前怎麼實現的Promise 是非同步程式設計的一種解決方案，比傳統的解決方案——回撥函式和事件——更合理和更強大。用來解決來之前在ajax請求中回撥請求產生的回撥地使得現在的程式碼更加合理更加優雅，也更加容易定位查詢問題。描述Promise物件代表一個非同步操作，有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗）。只有非同步操作的結果，可以決定當前是哪一種狀態，任何其他操作都無法改變這個狀態。缺點無法取消Promise，一旦新建它就會立即執行，無法中途取消。如果不設定回撥函式，Promise內部丟擲的錯誤，不會反應到外部。當處於pending狀態時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成）說說瀏覽器快取快取可以減少網路 IO 消耗，提高訪問速度。瀏覽器快取是一種操作簡單、效果顯著的前端效能最佳化手段很多時候，大家傾向於將瀏覽器快取簡單地理解為“HTTP 快取”。但事實上，瀏覽器快取機制有四個方面，它們按照獲取資源時請求的優先順序依次排列如下：Memory CacheService Worker CacheHTTP CachePush Cache快取它又分為強快取和協商快取。優先順序較高的是強快取，在命中強快取失敗的情況下，才會走協商快取實現強快取，過去我們一直用 expires。當伺服器返回響應時，在 Response Headers 中將過期時間寫入 expires 欄位，現在一般使用Cache-Control 兩者同時出現使用Cache-Control     協商快取，Last-Modified 是一個時間戳，如果我們啟用了協商快取，它會在首次請求時隨著 Response Headers 返回：每次請求去判斷這個時間戳是否發生變化。從而去決定你是304讀取快取還是給你返回最新的資料三面HRHR談薪水，問一些公司方面待遇方面，為啥要離職之類的。這個就要看你怎麼說來，說得好薪資多點。說不好薪資就要被壓一些，重點就是不要說上家公司的壞話。可以談談你日後的發展方向，準備專精於某個方面，例如資料視覺化之類的結尾面試題還在持續總結中，以上是部分總結的面試題，如果答案有錯誤請指出方便修正。請關注我，定時更新前端相關知識
一入前端深似海前言先介紹一下自己的情況吧內蒙古呼和浩特某大學畢業，專科，計算機多媒體專業畢業16年出來工作，工作經驗四年，之前主要做平面相關，自己喜歡瞎折騰，從17年開始研究前端，然後公司內部轉崗到開發部門工作，算下來前端經驗也快三年之久。年底由於種種原因想換一份工作，但由於太忙，沒認真搞簡歷，也沒怎麼複習基礎，導致很多本來會的都沒敢往簡歷上寫。於是寫了一個簡版的簡歷掛在Boss直聘上，準備年過完再認真籌備這件事情。令我意外的是，近一個月收到多家公司的面試邀請。因此總結一波2020年最新面試題，希望對大家有所幫助！後面的答案為自行整理，如有疏漏，歡迎指正！面試總結重視基礎和原理重視基礎和原理重視基礎和原理電話一面請介紹一下原型建構函式是一種特殊的方法，主要用來在建立物件時初始化物件。每個函式都有prototype(原型)屬性(注：箭頭函式以及function.prototype.bind()函式是沒有prototype(原型)的)，這個prototype(原型)屬性是一個指標，指向一個物件，這個物件的用途是包含特定型別的所有例項共享的屬性和方法，即這個原型物件是用來給例項物件共享屬性和方法的。每個例項物件的__proto__都指向這個建構函式/類的prototype屬性。面向物件的三大特性：繼承/多型/封裝關於new運算子：1. new執行的函式, 函式內部預設生成了一個物件2. 函式內部的this預設指向了這個new生成的物件3. new執行函式生成的這個物件, 是函式的預設返回值ES5例子：function Person(obj) {this.name = obj.namethis.age= obj.age}// 原型方法Person.prototype.say = function() {  console.log('你好,', this.name )}// p為例項化物件，new Person()這個操作稱為建構函式的例項化let p = new Person({name: '番茄', age: '27'})console.log(p.name, p.age)p.say()ES6例子：class Person{constructor(obj) {  this.name = obj.namethis.age= obj.age  }  say() {  console.log(this.name)  }}let p = new Person({name: 'ES6-番茄', age: '27'})console.log(p.name, p.age)p.say()ES5建構函式的寫法及用法ES6類的寫法及用法關於原型的繼承我們藉助寄生組合繼承function Person(obj) {    this.name = obj.name    this.age = obj.age}Person.prototype.add = function(value){    console.log(value)}var p1 = new Person({name:&quot;番茄&quot;, age: 18})function Person1(obj) {    Person.call(this, obj)    this.sex = obj.sex}// 這一步是繼承的關鍵Person1.prototype = Object.create(Person.prototype)Person1.prototype.play = function(value){    console.log(value)}var p2 = new Person1({name:&quot;雞蛋&quot;, age: 118, sex: &quot;男&quot;})關於面向物件的更多相關資訊請私信我發你我的個人部落格總結閉包首先說明什麼是閉包，閉包簡單來說就是函式巢狀函式，內部函式引用來外部函式的變數，從而導致垃圾回收機制沒有把當前變量回收掉，這樣的操作帶來了記憶體洩漏的影響，當記憶體洩漏到一定程度會影響你的專案執行變得卡頓等等問題。因此在專案中我們要儘量避免記憶體洩漏。原型鏈原型鏈實際上在上面原型的問題中就有涉及到，在原型的繼承中，我們繼承來多個原型，這裡再提一下實現完美繼承的方案，透過藉助寄生組合繼承，PersonB.prototype = Object.create(PersonA.prototype)這是當我們例項化PersonB得到例項化物件，訪問例項化物件的屬性時會觸發get方法，它會先在自身屬性上查詢，如果沒有這個屬性，就會去__proto__中查詢，一層層向上直到查詢到頂層物件Object，這個查詢的過程就是原型鏈來。請介紹一下vuex以及使用和注意事項vuex是一個專為vue.js應用程式開發的狀態管理器，它採用集中式儲存管理應用的所有元件的狀態，並且以相應的規則保證狀態以一種可以預測的方式發生變化。state: vuex使用單一狀態樹，用一個物件就包含來全部的應用層級狀態mutation: 更改vuex中state的狀態的唯一方法就是提交mutationaction: action提交的是mutation，而不是直接變更狀態，action可以包含任意非同步操作getter: 相當於vue中的computed計算屬性請介紹一下vue-router以及使用和注意事項vue-router是vuex.js官方的路由管理器，它和vue.js的核心深度整合，讓構建但頁面應用變得易如反掌&lt;router-link&gt; 元件支援使用者在具有路由功能的應用中 (點選) 導航。 透過 to 屬性指定目標地址&lt;router-view&gt; 元件是一個 functional 元件，渲染路徑匹配到的檢視元件。&lt;keep-alive&gt; 元件是一個用來快取元件router.beforeEachrouter.afterEachto: Route: 即將要進入的目標 路由物件from: Route: 當前導航正要離開的路由next: Function: 一定要呼叫該方法來 resolve 這個鉤子。執行效果依賴 next 方法的呼叫引數。介紹了路由守衛及用法，在專案中路由守衛起到的作用等等淺複製/深複製淺複製：淺複製透過ES6新特性Object.assign()或者透過擴充套件運演算法...來達到淺複製的目的，淺複製修改副本，不會影響原資料，但缺點是淺複製只能複製第一層的資料，且都是值型別資料，如果有引用型資料，修改副本會影響原資料。深複製：透過利用JSON.parse(JSON.stringify())來實現深複製的目的，但利用JSON複製也是有缺點的，當要複製的資料中含有undefined/function/symbol型別是無法進行複製的，當然我們想專案開發中需要深複製的資料一般不會含有以上三種類型，如有需要可以自己在封裝一個函式來實現。vue中通訊有哪些方式1.props和$emit2.中央事件匯流排 EventBus(基本不用)3.vuex(官方推薦狀態管理器)4.$parent和$children當然還有一些其他辦法，但基本不常用，或者用起來太複雜來。 介紹來通訊的方式，還可以擴充套件說一下使用場景，如何使用，注意事項之類的。你在工作中遇到過那些問題，是如何解決的？經常遇到的問題就是Cannot read property ‘prototype’ of undefined解決辦法透過瀏覽器報錯提示程式碼定位問題，解決問題Vue專案中遇到檢視不更新，方法不執行，埋點不觸發等問題一般解決方案檢視瀏覽器報錯，檢視程式碼執行到那個階段未之行結束，閱讀原始碼以及相關文件等然後舉出來最近開發的專案中遇到的算是兩個比較大的問題webpack配置入口出口module.exports={    //入口檔案的配置項    entry:{},    //出口檔案的配置項    output:{},    //模組：例如解讀CSS,圖片如何轉換，壓縮    module:{},    //外掛，用於生產模版和各項功能    plugins:[],    //配置webpack開發服務功能    devServer:{}}簡單描述了一下這幾個屬性是幹什麼的。描述一下npm run dev / npm run build執行的是哪些檔案透過配置proxyTable來達到開發環境跨域的問題，然後又可以擴充套件和他聊聊跨域的產生，如何跨域最後可以在聊聊webpack的最佳化，例如babel-loader的最佳化，gzip壓縮等等webpack3和webpack4的區別1.modewebpack增加了一個mode配置，只有兩種值development | production。對不同的環境他會啟用不同的配置。2.CommonsChunkPluginCommonChunksPlugin已經從webpack4中移除。可使用optimization.splitChunks進行模組劃分（提取公用程式碼）。但是需要注意一個問題，預設配置只會對非同步請求的模組進行提取拆分，如果要對entry進行拆分需要設定optimization.splitChunks.chunks = 'all'。3.webpack4使用MiniCssExtractPlugin取代ExtractTextWebpackPlugin。4.程式碼分割。使用動態import，而不是用system.import或者require.ensure5.vue-loader。使用vue-loader外掛為.vue檔案中的各部分使用相對應的loader，比如css-loader等6.UglifyJsPlugin現在也不需要使用這個plugin了，只需要使用optimization.minimize為true就行，production mode下面自動為trueoptimization.minimizer可以配置你自己的壓縮程式以上大概就是一面的一些比較重要的題目了，還有一些很簡單的問題和程式碼執行的問題就沒有寫出來了電話二面陳述輸入URL回車後的過程1.讀取快取： 搜尋自身的 DNS 快取。(快取中找到IP 地址就跳過了接下來查詢 IP 地址步驟，直接訪問該 IP 地址。)2.DNS 解析:將域名解析成 IP 地址3.TCP 連線：TCP 三次握手，簡易描述三次握手  客戶端：服務端你在麼？   服務端：客戶端我在，你要連線我麼？   客戶端：是的服務端，我要連結。   連線打通，可以開始請求來  4.傳送 HTTP 請求5.伺服器處理請求並返回 HTTP 報文6.瀏覽器解析渲染頁面7.斷開連線：TCP 四次揮手關於第六步瀏覽器解析渲染頁面又可以聊聊如果返回的是html頁面根據 HTML 解析出 DOM 樹根據 CSS 解析生成 CSS 規則樹結合 DOM 樹和 CSS 規則樹，生成渲染樹根據渲染樹計算每一個節點的資訊根據計算好的資訊繪製頁面陳述一下http基本概念：HTTP，全稱為 HyperText Transfer Protocol，即為超文字傳輸協議。是網際網路應用最為廣泛的一種網路協議所有的 www 檔案都必須遵守這個標準。http特性：HTTP 是無連線無狀態的HTTP 一般構建於 TCP/IP 協議之上，預設埠號是 80HTTP 可以分為兩個部分，即請求和響應。http請求：HTTP 定義了在與伺服器互動的不同方式，最常用的方法有 4 種分別是 GET，POST，PUT， DELETE。URL 全稱為資源描述符，可以這麼認為：一個 URL 地址對應著一個網路上的資源，而 HTTP 中的 GET，POST，PUT，DELETE 就對應著對這個資源的查詢，修改，增添，刪除4個操作。HTTP 請求由 3 個部分構成，分別是：狀態行，請求頭(Request Header)，請求正文。HTTP 響應由 3 個部分構成，分別是：狀態行，響應頭(Response Header)，響應正文。HTTP 響應中包含一個狀態碼，用來表示伺服器對客戶端響應的結果。狀態碼一般由3位構成：1xx : 表示請求已經接受了，繼續處理。2xx : 表示請求已經處理掉了。3xx : 重定向。4xx : 一般表示客戶端有錯誤，請求無法實現。5xx : 一般為伺服器端的錯誤。比如常見的狀態碼：200 OK 客戶端請求成功。301 Moved Permanently 請求永久重定向。302 Moved Temporarily 請求臨時重定向。304 Not Modified 檔案未修改，可以直接使用快取的檔案。400 Bad Request 由於客戶端請求有語法錯誤，不能被伺服器所理解。401 Unauthorized 請求未經授權，無法訪問。403 Forbidden 伺服器收到請求，但是拒絕提供服務。伺服器通常會在響應正文中給出不提供服務的原因。404 Not Found 請求的資源不存在，比如輸入了錯誤的URL。500 Internal Server Error 伺服器發生不可預期的錯誤，導致無法完成客戶端的請求。503 Service Unavailable 伺服器當前不能夠處理客戶端的請求，在一段時間之後，伺服器可能會恢復正常。大概還有一些關於http請求和響應頭資訊的介紹。Vue路由守衛有哪些，怎麼設定，使用場景等常用的兩個路由守衛：router.beforeEach 和 router.afterEach每個守衛方法接收三個引數：to: Route: 即將要進入的目標 路由物件from: Route: 當前導航正要離開的路由next: Function: 一定要呼叫該方法來 resolve 這個鉤子。在專案中，一般在beforeEach這個鉤子函式中進行路由跳轉的一些資訊判斷。判斷是否登入，是否拿到對應的路由許可權等等。擴充套件描述路由傳參，新開頁面，程式設計式導航等等。陣列去重第一種： 透過ES6新特性Set()例如： var arr = [1, 2, 3, 1, 2]; var newArr= [...new Set(arr)]ES6新特性Set()去重第二種：封裝函式利用 {} 和【】function uniqueEasy(arr) {    if(!arr instanceof Array) {        throw Error('當前傳入的不是陣列')    }    let list = []    let obj = {}    arr.forEach(item =&gt; {        if(!obj[item]) {            list.push(item)            obj[item] = true        }    })    return list}封裝函式利用 {} 和【】當然還有其他的方法，但我在專案中一般使用以上兩種基本滿足Set, Map解構ES6 提供了新的資料結構 Set。它類似於陣列，但是成員的值都是唯一的，沒有重複的值。 Set 本身是一個建構函式，用來生成 Set 資料結構。ES6 提供了 Map 資料結構。它類似於物件，也是鍵值對的集合但是“鍵”的範圍不限於字串，各種型別的值（包括物件）都可以當作鍵。對陣列排序第一種方法利用sort方法，例如：var arr = [1,2,3,2,3,7,1,23,2 ,4]sort方法排序第二種手寫氣泡排序var arr = [1, 2, 3, 2, 3, 7, 1, 23, 2, 4]function sort(arr) {for(let i = 0; i &lt; arr.length; i++){for(let j = 0; j &lt; arr.length - i - 1; j++) {    if(arr[j] &gt; arr[j + 1]) {      let temp = arr[j]        arr[j] = arr[j + 1]        arr[j + 1] = temp      }    }}}console.log(arr)手寫氣泡排序說一說js是什麼語言JavaScript是一種直譯式指令碼語言，是一種動態型別、弱型別、基於原型的語言，內建支援型別。它的直譯器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的指令碼語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。js語言是弱語言型別， 因此我們在專案開發中當我們隨意更該某個變數的資料型別後有可能會導致其他引用這個變數的方法中報錯等等。後續大型專案開發中用TS比較多，TS是JS的超集說說ES6新特性1.ES6引入來嚴格模式    變數必須聲明後在使用    函式的引數不能有同名屬性, 否則報錯    不能使用with語句 (說實話我基本沒用過)    不能對只讀屬性賦值, 否則報錯    不能使用字首0表示八進位制數,否則報錯 (說實話我基本沒用過)    不能刪除不可刪除的資料, 否則報錯    不能刪除變數delete prop, 會報錯, 只能刪除屬性delete global[prop]    eval不會在它的外層作用域引入變數    eval和arguments不能被重新賦值    arguments不會自動反映函式引數的變化    不能使用arguments.caller (說實話我基本沒用過)    不能使用arguments.callee (說實話我基本沒用過)    禁止this指向全域性物件    不能使用fn.caller和fn.arguments獲取函式呼叫的堆疊 (說實話我基本沒用過)    增加了保留字（比如protected、static和interface）2.關於let和const新增的變數宣告3.變數的解構賦值4.字串的擴充套件    includes()：返回布林值，表示是否找到了引數字串。    startsWith()：返回布林值，表示引數字串是否在原字串的頭部。    endsWith()：返回布林值，表示引數字串是否在原字串的尾部。5.數值的擴充套件    Number.isFinite()用來檢查一個數值是否為有限的（finite）。    Number.isNaN()用來檢查一個值是否為NaN。6.函式的擴充套件    函式引數指定預設值7.陣列的擴充套件    擴充套件運算子8.物件的擴充套件    物件的解構9.新增symbol資料型別10.Set 和 Map 資料結構     ES6 提供了新的資料結構 Set。它類似於陣列，但是成員的值都是唯一的，沒有重複的值。 Set 本身是一個建構函式，用來生成 Set 資料結構。        Map它類似於物件，也是鍵值對的集合，但是“鍵”的範圍不限於字串，各種型別的值（包括物件）都可以當作鍵。11.Proxy    Proxy 可以理解成，在目標物件之前架設一層“攔截”，外界對該物件的訪問    都必須先透過這層攔截，因此提供了一種機制，可以對外界的訪問進行過濾和改寫。    Proxy 這個詞的原意是代理，用在這裡表示由它來“代理”某些操作，可以譯為“代理器”。    Vue3.0使用了proxy12.Promise    Promise 是非同步程式設計的一種解決方案，比傳統的解決方案——回撥函式和事件——更合理和更強大。    特點是：        物件的狀態不受外界影響。        一旦狀態改變，就不會再變，任何時候都可以得到這個結果。13.async 函式     async函式對 Generator 函式的區別：    （1）內建執行器。    Generator 函式的執行必須靠執行器，而async函式自帶執行器。也就是說，async函式的執行，與普通函式一模一樣，只要一行。    （2）更好的語義。    async和await，比起星號和yield，語義更清楚了。async表示函數里有非同步操作，await表示緊跟在後面的表示式需要等待結果。    （3）正常情況下，await命令後面是一個 Promise 物件。如果不是，會被轉成一個立即resolve的 Promise 物件。    （4）返回值是 Promise。    async函式的返回值是 Promise 物件，這比 Generator 函式的返回值是 Iterator 物件方便多了。你可以用then方法指定下一步的操作。14.Class     class跟let、const一樣：不存在變數提升、不能重複宣告...    ES6 的class可以看作只是一個語法糖，它的絕大部分功能    ES5 都可以做到，新的class寫法只是讓物件原型的寫法更加清晰、更像面向物件程式設計的語法而已。15.Module    ES6 的模組自動採用嚴格模式，不管你有沒有在模組頭部加上&quot;use strict&quot;;。    import和export命令以及export和export default的區別    關於ES6新特性有很多，你可以每個都和麵試官詳細聊聊細節Css3新特性1.過渡 transition2.動畫 animation3.形狀轉換 transform4.陰影 box-shadow5.濾鏡 Filter6.顏色 rgba7.柵格佈局 gird8.彈性佈局 flex等等還多...CSS3新特性用到的比較少，我自己一般都是用到什麼去查詢什麼，但是以上幾點常用的還是需要了解說一說你用過的UI框架Element-UI Vant Antd 我自己主要專案中用這幾類。大家可以擴充套件說明描述一下自己是如何二次封裝元件，封裝分頁，彈窗，提示等等。說一說什麼是跨域，怎麼解決因為瀏覽器出於安全考慮，有同源策略。也就是說，如果協議、域名或者埠有一個不同就是跨域Ajax 請求會失敗。為來防止CSRF攻擊1.JSONP    JSONP 的原理很簡單，就是利用 &lt;script&gt; 標籤沒有跨域限制的漏洞。    透過 &lt;script&gt; 標籤指向一個需要訪問的地址並提供一個回撥函式來接收資料當需要通訊時。    &lt;script src=&quot;http://domain/api?param1=am2=b&amp;callback=jsonp&quot;&gt;&lt;/script&gt;    &lt;script&gt;        function jsonp(data) {        console.log(data)    }    &lt;/script&gt;    JSONP 使用簡單且相容性不錯，但是隻限於 get 請求。2.CORS    CORS 需要瀏覽器和後端同時支援。IE 8 和 9 需要透過 XDomainRequest 來實現。3.document.domain    該方式只能用於二級域名相同的情況下，比如 a.test.com 和 b.test.com 適用於該方式。    只需要給頁面新增 document.domain = 'test.com' 表示二級域名都相同就可以實現跨域4.webpack配置proxyTable設定開發環境跨域5.nginx代理跨域6.iframe跨域7.postMessage這種方式通常用於獲取嵌入頁面中的第三方頁面資料。一個頁面傳送訊息，另一個頁面判斷來源並接收訊息說一說前端效能最佳化方案三個方面來說明前端效能最佳化一： webapck最佳化與開啟gzip壓縮    1.babel-loader用 include 或 exclude 來幫我們避免不必要的轉譯，不轉譯node_moudules中的js檔案    其次在快取當前轉譯的js檔案，設定loader: 'babel-loader?cacheDirectory=true'    2.檔案採用按需載入等等    3.具體的做法非常簡單，只需要你在你的 request headers 中加上這麼一句：    accept-encoding:gzip    4.圖片最佳化，採用svg圖片或者字型圖示    5.瀏覽器快取機制，它又分為強快取和協商快取二：本地儲存——從 Cookie 到 Web Storage、IndexedDB    說明一下SessionStorage和localStorage還有cookie的區別和優缺點三：程式碼最佳化    1.事件代理    2.事件的節流和防抖    3.頁面的迴流和重繪    4.EventLoop事件迴圈機制    5.程式碼最佳化等等說一說SessionStorage和localStorage還有cookie共同點：都是儲存在瀏覽器端、且同源的不同點：    1.cookie資料始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和伺服器間來回傳遞。    cookie資料還有路徑（path）的概念，可以限制cookie只屬於某個路徑下    sessionStorage和localStorage不會自動把資料傳送給伺服器，僅在本地儲存。    2.儲存大小限制也不同，cookie資料不能超過4K，sessionStorage和localStorage可以達到5M    3.sessionStorage：僅在當前瀏覽器視窗關閉之前有效；    localStorage：始終有效，視窗或瀏覽器關閉也一直儲存，本地儲存，因此用作持久資料；    cookie：只在設定的cookie過期時間之前有效，即使視窗關閉或瀏覽器關閉    4.作用域不同    sessionStorage：不在不同的瀏覽器視窗中共享，即使是同一個頁面；    localstorage：在所有同源視窗中都是共享的；也就是說只要瀏覽器不關閉，資料仍然存在    cookie: 也是在所有同源視窗中都是共享的.也就是說只要瀏覽器不關閉，資料仍然存在當然細說還有好多可以說的方面，就看你和麵試官怎麼聊了，但是關鍵點要說出來。說一說你用過的css佈局gird佈局，layout佈局，flex佈局，雙飛翼，聖盃佈局等，具體詳細描述我就不寫啦。Promise是什麼，解決了什麼，之前怎麼實現的Promise 是非同步程式設計的一種解決方案，比傳統的解決方案——回撥函式和事件——更合理和更強大。用來解決來之前在ajax請求中回撥請求產生的回撥地使得現在的程式碼更加合理更加優雅，也更加容易定位查詢問題。描述Promise物件代表一個非同步操作，有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗）。只有非同步操作的結果，可以決定當前是哪一種狀態，任何其他操作都無法改變這個狀態。缺點無法取消Promise，一旦新建它就會立即執行，無法中途取消。如果不設定回撥函式，Promise內部丟擲的錯誤，不會反應到外部。當處於pending狀態時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成）說說瀏覽器快取快取可以減少網路 IO 消耗，提高訪問速度。瀏覽器快取是一種操作簡單、效果顯著的前端效能最佳化手段很多時候，大家傾向於將瀏覽器快取簡單地理解為“HTTP 快取”。但事實上，瀏覽器快取機制有四個方面，它們按照獲取資源時請求的優先順序依次排列如下：Memory CacheService Worker CacheHTTP CachePush Cache快取它又分為強快取和協商快取。優先順序較高的是強快取，在命中強快取失敗的情況下，才會走協商快取實現強快取，過去我們一直用 expires。當伺服器返回響應時，在 Response Headers 中將過期時間寫入 expires 欄位，現在一般使用Cache-Control 兩者同時出現使用Cache-Control     協商快取，Last-Modified 是一個時間戳，如果我們啟用了協商快取，它會在首次請求時隨著 Response Headers 返回：每次請求去判斷這個時間戳是否發生變化。從而去決定你是304讀取快取還是給你返回最新的資料三面HRHR談薪水，問一些公司方面待遇方面，為啥要離職之類的。這個就要看你怎麼說來，說得好薪資多點。說不好薪資就要被壓一些，重點就是不要說上家公司的壞話。可以談談你日後的發展方向，準備專精於某個方面，例如資料視覺化之類的結尾面試題還在持續總結中，以上是部分總結的面試題，如果答案有錯誤請指出方便修正。請關注我，定時更新前端相關知識
2020 前端面試｜第一波面試題總結
資訊抽取 常識
自然語言理解 資訊抽取 常識