前言

全系列分爲四個章節，分別是電話面試部分、一面部分、二面部分、三面部分。全系列不光有題目還有詳細答案，收藏轉發就完事了！

第一章：電話面試部分已經放出萬字長文系列萬字長文系列：Web前端百度面經（含答案）第一章

以及第二章：一面部分萬字長文系列寫給準備去跳槽的Web前端工程師（第二章）

希望這個系列能夠助力大家找到好的工作，年年一帆風順！！

接下來，長文預警~大家有所心理準備

正文

題目：結合頁面加載流程流程詳細說下過程中的性能優化

這個問題就比較細節化，可以參考我之前寫過的關於性能優化的文章，基本的優化方案裏邊都有Web前端性能優化：JavaScript細節篇Web前端優化小指南：html、css、js篇

這個問題回答期間面試官追問了一些具體的小細節問題，這裏就不再給出了，文章中基本都包含了，這裏就不展開篇幅講了

這種籠統的大方向問題建議條理化回答，可以按照自己習慣的或者固定的方面去展開講，否則這種大問題東一句西一句的容易讓面試不耐煩，越條理越好，我自己當時是按照HTML、CSS、JS、網絡通信，頁面加載的順序去說的，過程中面試官一直在記錄，估計是看有沒有說到他想要的那些點。

追問：開發過程中碰到過什麼棘手的性能方面的問題麼

這個問題當時都是回答的之前在開發過程中確實碰到的，感恩自己當時有心做了總結，總結請點擊記一次慘痛的Vue-cli + VueX + SSR經歷

這期間穿插着問了一點node，webpack的小知識點

題目：繼承的方式有哪些

提供個父類進行繼承

原型繼承

利用原型讓一個引用類型繼承另外一個引用類型的屬性和方法重點：新實例的原型等於父類的實例特點： 1.實例可繼承的屬性有：實例的構造函數的屬性，父類構造函數屬性，父類原型的屬性。（新實例不會繼承父類實例的屬性！） 2.基於原型鏈，既是父類的實例，也是子類的實例缺點： 1.無法實現多繼承 2.所有新實例都會共享父類實例的屬性

構造函數繼承

重點：用call()和apply()將父類構造函數引入子類函數（在子類函數中做了父類函數的自執行（複製））特點： 1、只繼承了父類構造函數的屬性，沒有繼承父類原型的屬性。 2、解決了原型鏈繼承缺點1、2、3。 3、可以繼承多個構造函數屬性（call多個）。 4、在子實例中可向父實例傳參。缺點： 1、只能繼承父類構造函數的屬性。 2、無法實現構造函數的複用。（每次用每次都要重新調用） 3、每個新實例都有父類構造函數的副本，臃腫。

組合繼承

特點：利用原型鏈繼承父類的原型屬性和方法，利用構造函數繼承實例屬性和方法缺點：調用了兩次父類構造函數，生成了倆實例

使用 ES6 extends 進行繼承

追問：new 的原理

在調用 new 的過程中會發生以下四件事： 新生成一個對象 將構造函數的作用域賦值給新對象（即綁定新對象的 this） 執行構造函數中的代碼（即爲這個新對象添加屬性） 返回新對象一個簡版的new

追問：ES6 extends 的原理

這個問題當時回答的不好，很多關鍵點沒有說出來，面試官也是很友好地幫我答疑解惑

ES6 中是通過 class 關鍵字去定義類，經過 bable 編碼之後其實還是通過構造函數去實現的，但是爲了規範類的使用，ES6中是不允許直接調用 class 創建的類，因爲編碼之後會產生一個 _classCallCheck 阻止你直接調用，會拋出錯誤繼承過程其實歸根結底也是類似原型繼承，過程請看下圖

首先 subClass.prototype.__proto__ = superClass.prototype 保證了 Child 的實例可以訪問到父類的屬性，包括內部屬性，以及原型屬性。其次，subClass.__proto__ = superClass，保證了Child.height 也能訪問到，也就是靜態方法。

題目：ES6 和 ES5

基礎的問題我就不展開說了，面試過程中涉及到的我列出來，很多基本的大家開發中肯定都已經很熟悉了

let 和 const解構賦值箭頭函數模板字符串for...of 循環展開運算符...Class 類extends繼承Modules題目：閉包的原理和優劣以及使用

閉包產生的原因

JS中存在全局作用域和函數作用域，當訪問一個變量時，解釋器會首先在當前作用域查找，如果沒有找到，就去父作用域找，直到找到該變量或者不在父作用域中(也是作用域鏈的概念)作用域中的每個子函數都會拷貝上級的作用域，形成一個完整的作用域鏈條當前作用域中的變量存在着指向父級作用域的引用，便產生了閉包，下面用一段代碼說明

閉包的表現形式

返回一個函數作爲函數參數傳遞在定時器、事件監聽、Ajax請求、跨窗口通信、Web Workers或者任何異步中，只要使用了回調函數，實際上就是在使用閉包立即執行函數表達式 保存了全局作用域和當前作用域，實際也是閉包閉包的優劣

優點 可以讀取函數內部的變量 可以讓這些局部變量保存在內存中，實現變量數據共享。缺點 由於閉包會使得函數中的變量都被保存在內存中，內存消耗很大，所以不能濫用閉包，否則會造成網頁的性能問題 閉包會在父函數外部，改變父函數內部變量的值。閉包的使用

匿名自執行函數，因爲外部無法引用其內部的變量，使用完會立即釋放進行結果緩存進行封裝工廠函數實現類的繼承函數柯里化題目：this 的指向問題

記住一點：this最終指向調用它的對象 通俗解釋：JS中存在上下文環境window或者函數，當執行的屬於window時，則取的window的上下文環境，如果執行的屬於函數，則取函數的上下文，this是堆棧的指針，堆棧裏有什麼就返回什麼具體分析 如果是一般函數,this指向全局對象window 在嚴格模式下"use strict",爲undefined 對象的方法裏調用,this指向調用該方法的對象 構造函數里的this,指向創建出來的實例 () => console.log(this) 裏面 this 跟外面的 this 的值一模一樣 事件監聽的時候，this是監聽元素，setTimeout的函數內this是window(非嚴格模式下)

題目：VUE 的生命週期

vue 生命週期流程圖(圖片來自網絡，侵聯刪)

創建實例，new Vue() 的過程中，首先執行 init()init() 過程首先是執行 beforeCreate ，初始化data、 props、 watch、computed,這些執行都是在 beforeCreate 階段和 create 階段，也是創建響應式數據的階段，這個階段不要去修改數據create 階段結束，會去判斷實例中有無 el option 選項，如果沒有會執行 $mount(), 如果有，直接執行下一步判斷 template, 若有，會把 template 打成一個個 render function ,其中的傳參h就是vue.createElement， 參數爲 標籤，對象(可以是props或事件)，內容render函數發生在 beforemounted 和 mounted 之間，所以當 beforeMount 時，$el 還只是HTML上的節點，mounted 時才把渲染的內容掛載到 DOM 上，實際就是執行了 renderfunctionbeforeMount 有了 renderfunction 才執行，執行完執行 mount , mounted 執行完，整個生命週期中主動執行的函數就已經完畢，剩下的比如 beforeUpdata、updata、beforDestory、destory 需要外部觸發題目：VUE computed原理

設置 computed 的 getter ，若執行了 computed 的函數，會去讀取 data 值，就會觸發 data 的 getter ，從而建立data的依賴關係首次mounted的值，會執行vm.computed對應的getter，沒有getter的是賦值函數若computed的屬性值依賴其他屬性值，會將target暫存在棧中，先進行其他的依賴收集題目：VUE watch流程

創建實例時會去處理watch，這點在前面生命週期中已經提到遍歷數據keys去創建監聽給監聽註冊回調(多種處理方式) name:{ handle(){} } 傳入爲對象去handler字段 name(){} 傳入爲函數直接監聽回調 name: 'getName' 傳入爲字符串就去實例上獲取回調調用vm.$watch 判斷是否立即執行回調 每個watch配發watcher(監聽的key，callback，options)監聽的數據變化時，通知watch-watcher更新，然後使用updata()更新數據題目：VUE 響應式數據處理流程

init()時，利用object.defineproperty監聽vue實例的響應式數據變化從而實現數據的劫持，其實是利用了數據的setter和getter當render function被渲染時，讀取實例中與視圖相關的響應式數據，從而觸發getter進行依賴收集正常的渲染和更新數據變化時，觸發setter，通知依賴收集中和視圖相關的watcher，告知重新渲染視圖，watcher再次通過updata渲染視圖題目：特定狀態下瀏覽器的兼容性

這個問題想必前端開發中大家都碰到過很多奇奇怪怪的兼容性問題，我也沒有回答地特別細緻，說了幾個日常開發中碰到過的，面試官結合實際情況問了幾個，具體問的已經記不清了，JS的也有，CSS的也有，IE的那些低版本的兼容性問題個人覺得不說也罷，畢竟用戶量少的又少。

尾聲

接下來就要迎來咱們系列的“大結局”，最後一篇終面部分啦。覺得系列不錯的記得點贊、收藏、分享哦~讓更多前端er，看到有用的文章~