記錄一次杭州順網科技的面試過程

css

如何水平垂直居中，請儘可能多說幾種方法？很尷尬，我屢次面試都被問到這個問題，fuck
定位（回答了）、table-cell佈局、flex佈局、translate+relative定位

w3c和ie盒模型區別 我回答反了 尷尬

jquery

1. jquery中如何只實現一次事件綁定 $('dom').one 這個方法我竟然一次也沒用過，也沒見過
2. 事件委託的原理 貌似回答錯了，事件冒泡和事件捕獲，不一樣瀏覽器機制不一樣，我二者竟然結合在一塊兒了，說先冒泡再捕獲，打臉哦
3. jsonp原理 勉強回答出來了，算正確吧

js

1. 原型鏈繼承
2. 閉包、做用域
3. this以及如何改變this執行

vue

1. vue如何實現原理 object.defineproperty 數據劫持，只回答出這麼一個知識點。
2. 說出v-for是如何實現的 懵逼的

模塊

1. webpack實現原理 剛學webpack還看錯，1年過去了，早忘記了
2. import 和export用法 面試題這個也作錯了。緊張。

以上是面試中筆試涉及到的知識點或者後面被問到的只是點。
如下是筆試題，貌似有2套，但我拿到的是另一套。也許是根據薪資和麪試的等級來出題的。我剛面試完回家，吃了一個泡麪，回憶下面試題。

面試題--筆試

. 考察原型鏈繼承的問題

function A() {
  this.name = 'a'
  this.color = ['green', 'yellow']
}
function B() {
  
}
B.prototype = new A()
var b1 = new B()
var b2 = new B()
b1.name = 'change'
b1.color.push('black')
問：
console.log(b1.name) // change
console.log(b2.name) // a
console.log(b1.color) // ["green", "yellow", "black"]
console.log(b2.color) // ["green", "yellow", "black"]

解析爲什麼：
B.prototype = new A() 實現了繼承，須要一箇中間變量來理解原型繼承更好理解。

var f = new A()
B.prototype = f

var f = new A()後，f.__proto__ 指向了A的原型（A.prototype），構造函數A執行的時候，this傳遞的是f，因此此時在f在有了構造函數A裏面的屬性和方法。B.prototype = f,能夠理解B的原型和f指向了同一個Object,(由於 f = new A（)實際返回的是一個Object對象，而這個對象的__proto__ 執行了A的原型)因此連等後，當b1 = new B(),因此當執行b1.name的時候會去原有的實例對象去找，若是找不到，就會向想沿着__proto__原型鏈找到B.prototype這個原型對象。而這個對象又指向了new A()

B.prototype指向new A()怎麼理解呢？
就是B.prototype.__proto__ ==== A.prototype。同時B.prototype做爲this傳遞到A構造函數，執行了一次A().讓A構造函數裏面的屬性和方法賦值了一份給B.prototype。從而達到了繼承了A構造函數和原型上的屬性和方法。

. 考察閉包，做用域的問題

// 經典考題
for(var i = 0 ; i < 5; i ++) {
  setTimeout(function() {
    console.log(i) // 5, 5, 5, 5, 5
  },1000)
}
// 如何打印出1，2，3，4，5
// 我答案是說出來了，用let 產生塊級做用域，以及採用一個函數自執行的方式。但爲何卡主了

.考察this指向問題，以及如何改變this指向

var obj = {
  name: 'zj',
  getName: function() {
     console.log(this.name)
  }
}
var fn = obj.getName
console.log(fn()) // undefined
// 如何讓fn() 打印出‘zj’ 利用call或apply或bind改變this指向
console.log(obj.getName()) // 'zj'

.es6模塊的問題，那套題我作錯了，其實很簡單，當時太緊張了。就不寫出來了，並且代碼很長，主要考察import 和 export 和變量的問題。
最後附錄如下公司的環境，反正也掛了。
其實面試題，我懂原理的比較少，就是你作出來了，但讓我說出爲什麼時這個答案挺困難的，特別是原型鏈（不過這個原型鏈雖然很基礎，但原型鏈的問題我好久沒研究過了，也多是學得比較死吧，記住的那種學習，因此徹底是懵逼的。）閉包讓我說爲何真挺困難的，雖然本身曾經也寫了博客的

續

回憶下我從去年年末，到今年年初收到的面試經歷吧，而後談談技巧。

1. 有贊 （電面5分鐘就pass,主要考算法，好比排序有幾種方式，複雜度等）
2. 阿里體育（電面30分鐘）
3. 支付寶（電面30分鐘，主要問基礎，最後被卡住的問題是jquery源碼和深拷貝，原諒我當初深拷貝用得真的不多啊）
4. 51公積金
5. 二維火（面試官人特別好，回答不上的會給你講解，主要問vue）
6. 淘粉吧（當天下午面試了4輪，不過1面最重要，當時覺得沒問題，最後一面卡在了canvers和css3特效上，以及當初他們要招聘作有開發小程序經驗的人，）
7. 順網科技

總結下他們面試的基本套路

. css

必定有水平垂直居中，盒模型，塊級和行內元素。
flex佈局

. 原生js

原型鏈，閉包，做用域，this，變量和函數提高
這我就不舉例了考察的問題不少，網上有
. jq
document.ready()方法 不寫這個方法會有什麼後果？
常見的一些api
jq的源碼（支付寶考察）
. 其餘
webpack 好比原理，或者說以前沒有webpack的時候，如何友好的解決，說白了就是爲什麼用webpack
這裏會延伸到require.js和sea.js，雖然如今用的公司已經不多了
http/tcp 和https
輸入url到底發生了什麼（涉及最後的瀏覽器渲染原理）
跨域解決方案最容易問到jsonp原理，nginx轉發等
es6語法，好比let和const與var區別
箭頭函數和通常函數區別

. mvvm框架（vue：由於我用的是vue）首先固然是原理啊（這裏很容易卡主哦）鉤子函數，分別說能在裏面實現什麼解釋vuex是什麼？vuex爲什麼是一個單項流過程mututations爲什麼只能是同步不能異步