關於這些天杭州各廠面試彙總(從JavaScript各類原理到框架源碼)

首先呢,統計一下狀況:前端

本人校招進入新三板上市企業工做一年,並有半年多一線互聯網實習經驗git

來到杭州投出簡歷 24 封,收到面試邀約 10 次github

result = 正式offer * 2 + 口頭offer * 1面試

使人頭疼的是並沒拿到本身想要的 offer,理想的公司大多連面試機會都不給...算法

傷腦筋...明天還有兩家電話面試,過了大半個月,仍是打算繼續面下去...數組

理想公司:

  • ***服:簡歷都沒過(慘)還被一個螞***外包招聘diss我這樣的一年工做經驗都外包都夠嗆(暈)
  • *贊:投了不少遍,簡歷所有卡在HR上了(慘)
  • *貓:沒敢投(嚇)
  • **車:一下午所有面完,環境通常,每輪面試都等了很長時間,兩輪技術面後又和HR聊了一個多小時技術問題,表示很無奈,今後對大搜車印象大大折扣。回去等通知,一週以後說經驗不符。敢情經驗不符,你讓我去面試個球(氣)
  • *吧:HR主動找,問
你會 React ?我答會
你會移動端嗎?我答會
你有過 H5 經驗嗎?我答有
對不起,面試官說經驗不符
???(懵)
複製代碼
  • **順:只招應屆生了

考題彙總:

  • this 指向 * 10 (必考有沒有,這都不知道還學啥JavaScript--笑)
  • 同步異步或者事件機制 * 8
  • Vue 雙向綁定實現原理 * 8
  • 箭頭函數 * 6(考察 ES6 使用狀況)
  • call apply bind 的使用和區別 * 6 (問到this極可能問到這些)
  • 經常使用 Array 函數 * 6
  • Vuex 應用及其原理 * 6
  • Vue 父子兄弟通訊 * 5
  • Redux 原理 * 5
  • dom 事件 * 5
  • Vdom 原理及diff算法 * 5
  • Promise機制 * 5
  • 原型鏈及面向對象相關知識 * 4
  • HTTPS 安全性 * 3
  • 閉包 * 3
  • 變量提高 * 3
  • HTTP 狀態碼 * 2
  • Proxy 和 其餘一些 ES6 新特性
  • 防抖與節流 * 1
  • 深淺拷貝原理和實現 * 1
  • getComputedStyle * 1
  • rem * 1 (考察關於移動端佈局到問題)
  • 其餘忘記了...

聊聊面試題

this 指向什麼? 一塊兒源於 this

《You dou't kown JavaScript》 這本書講等最清楚了安全

首先是兩個誤解:bash

  1. this 指向自身,根據英語翻譯來講,這是一種天然的想法,其實否則,這是一個誤解。
  2. this 指向函數做用域,這個在某種狀況下是正確的

其次是四種狀況閉包

  1. 默認綁定
var name = 'lufei'
function show() {
    var name = 'namei'
    console.log(this.name)
}
show()
// lufei
複製代碼

能夠看出最後 this 綁定在全局對象上,因此結果是 lufeiapp

  1. 隱式綁定
function show() {
    var member = 'namei'
    console.log(this.member)
}
var member = 'zoro'
var caomao = {
    member: 'lufei',
    showMember: show
}

caomao.showMember()
// lufei
複製代碼

這裏最後經過 caomao 來調用這個函數,函數中的 this 則被綁定到 caomao 這個對象上

  1. 顯式綁定
var caomao = {
    member: 'lufei'
}
var member = 'zoro'
function show() {
    var member = 'namei'
    console.log(this.member)
}
show.call(caomao)
// lufei
複製代碼

經過 callapplybind 咱們能夠顯示的改變 this 的綁定

  1. new 綁定 最後一種是使用 new 調用函數,或者說是構造函數調用時
function SeaPoacherBoat(member) {
    this.member = member
}
var caomao = new SeaPoacherBoat('lufei')
console.log(caomao.member) // lufei
複製代碼

這段代碼會執行如下操做:

  1. 建立一個全新的對象
  2. 進行原型(prototype)連接
  3. 將 新對象 綁定到函數調用的 this
  4. 若是沒有返回其餘對象,則自動返回一個新對象

它們綁定的優先級是 new > 顯示綁定 > 隱式綁定 > 默認,這也是很容易理解的,new 是生成了一個全新的對象優先級是最高的,顯示綁定函數要起做用優先級必定要高於隱式綁定,默認綁定是最低的這個也無可厚非

最後一句話總結 this 是運行期間綁定,和它聲明的環境無關,只與調用它的對象有關

咱們知道了它的指向,要想改變它怎麼辦呢?

改變 this 指向最直接的方法是 call, apply, bind,來看一下下面這段代碼

var name = '草帽海賊團'
var caomao = {
    name: '路飛'
}

function printMember(arg1, arg2) {
    var name = '娜美'
    console.log(this.name)
    console.log(arg1, arg2)
}

printMember('山治', '索隆') // 草帽海賊團 山治 索隆
printMember.call(caimao, '山治', '索隆') // 路飛 山治 索隆
printMember.apply(caimao, ['山治', '索隆']) // 路飛 山治 索隆
printMember.bind(caimao, '山治', '索隆')() // 路飛 山治 索隆 
複製代碼

根據上面代碼,this 如今指向的 window 對象,因此打印的是草帽海賊團而不是娜美 下面咱們經過三種方式將 this 指針綁定到 caomao 這個對象,因此最後打印的都是路飛

很明顯它們的區別無非就在於形式的不一樣,以call爲基礎來講,apply 是將後面的參數合成一個數組一塊兒傳人函數,bind最後返回的是一個函數,只有調用這個函數後纔算執行。

有一種特殊狀況就是把 nullundefined 做爲this的綁定對象傳人進去,這樣的實際狀況是採用的默認綁定原則 那麼這有什麼用途呢?常見用於展開數組來,看一段代碼

function print(a, b) {
    console.log(a, b)
}

print.apply(null, [1, 2])
複製代碼

還有呢, 使用bind用於柯里化

var foo = print.bind(null, 1)

foo(2)
複製代碼

也就是延遲執行最終的結果

是否是全部函數均可以綁定this 呢?

沒錯你可能很快想到就是箭頭函數,普通函數來講,this是運行期綁定,而 ES6新規則裏箭頭函數並無綁定 this,它是不存在 this的綁定的。那在箭頭函數中存在this 會怎麼樣呢

// 情景一,全局範圍內調用箭頭函數
var foo = () => { console.log(this) }
foo() // window

// 情景二,對象中調用
function monkey() {
    var bar = () => console.log(this)
    bar()
}

var obj = {
    monkey: monkey
}
var other = {
    obj: obj
}

other.obj.monkey() // { monkey }

複製代碼

以前不少人對箭頭函數中的 this 都有一些誤解,認爲箭頭函數中的 this 自身綁定或者是任何綁定在最終調用方式上。其實否則,從上面代碼中咱們能夠看出箭頭中的 this 綁定在離最近外層的對象 obj 上, 而不是最終調用對象 other 上。

咱們知道了 this 的指向的對象調用它的函數,那麼調用它的時候到底發生了什麼?咱們須要知道JS執行機制究竟是怎麼樣的

console.log(run)
var run
function run(run) {
    var run = 2
    this.run = run
    console.log(this, arguments)
    console.log(run)
}
run('1') 
console.log(run)
run = 3
console.log(run)
複製代碼

咱們來分析一下它的運行方式 首先開始預解析,它有個規則是 變量聲明提高,咱們能夠知道函數聲明會被提高到最上面,其次是變量。 聲明後的變量不會重複聲明,因此第二次聲明的變量不生效,咱們手動來作一次轉換

// 提高函數聲明
function run(run) {
    console.log(this, arguments)
    var run = 2
    this.run = run
    console.log(run)
}
// 提高變量聲明
var run
console.log(run)
run('1') 
console.log(run)
run = 3
console.log(run)
複製代碼

因此第一個 log 會打印出函數而不是變量

開始按順序執行下面的語句,此時遇到一個run()的調用 將run推入到執行棧中,進行如下幾個步驟:

  1. 綁定 this 和 初始化參數, 根據以前談到的規則,this 綁定到調用它的全局對象 window,因此第二個 log 打印出 window對象和傳遞過來的參數

  2. 一樣在函數做用域中開始執行預解析,執行語句,函數中又定義了一個run。咱們知道做用域原理是就近查找,存在一個屏蔽做用,run 函數做用域中的 run 此刻就是 2,因此第三個 log 會打印出 2this.run = run 將全局中的 run 賦值爲 2

  3. 執行完成後,run 函數出棧,繼續執行全局語句,run 的值已經被改變成 2,因此此刻第四個 log 也打印出了 2,最終又被改變成 3,因此最後一個 log ,打印出了 3

聊聊框架

Vue 和 React 你學哪個? 哎呀!頭疼, 能不能不要選啊,選 React 都說 React待遇好,大廠都愛React

HR問,你Vue 多少經驗?沒有,bye~,不符合項目經驗。那就學 Vue 唄,好上手,愈來愈流行。

HR問,你React 多少經驗?沒有,bye~,不符合項目經驗。- -

你們仰望天空嘆息到,學不動了...不怕學不動了,就怕學到的東西立刻就過期了。

因此只有學到真正底層基礎思想的東西纔是真正重要的。

就算哪天沒有這些框架了也能立刻擼一個出來。

分享想法

最近找工做萌生了一個 開源 idea

  • 痛點一:每次製做須要去找模版,去製做模版,而對於咱們前端而言,更加擅長製做個性在線簡歷,可不能夠考慮使用前端技術製做一個在線簡歷模版,開源免費供你們使用,你們開發本身的主題,你們不須要花錢去模版網站找那些並不適合本身的簡歷模版。

  • 痛點二:對於前端來講,知識點太雜,面試考點太多。簡歷不僅僅是一個介紹,也是咱們技術的一個總結。經過開發一個工具自動識別咱們簡歷裏面的技術點,模擬面試官給出一些面試考察的題目,讓咱們知道本身的不足,持續的學習和進步。

  • 痛點三:對於簡歷,咱們不該該一份簡歷進行海投,應該針對不一樣的崗位職責進行修改。因此咱們能夠開發一個輸入職位地址,自動匹配簡歷與崗位中的差別並標記。這樣咱們就知道自身與崗位職責之間又多大差距,而後努力去接近它。同時咱們須要對不一樣簡歷進行管理。

以上都是目前各大招聘網站和簡歷製做網站所沒有的需求,這是咱們技術人員和求職者自身的訴求。

而目前各大招聘網站更加註重招聘者的需求,每每不會管應聘者的需求,甚至要求各類付費的一些功能。

這個開源項目不是爲了取代招聘網站,而是作一個從學習->工做->求職環節的一個補充。

需求

  • v1.0.0 在線簡歷編輯功能,本身製做主題功能...

  • v2.0.0 技術匹配識別功能,模擬面試功能,面試評分功能...

  • v3.0.0 簡歷管理功能,職位匹配功能...

  • v4.0.0 內推,代碼練習,文章訂閱...

技術實現

待定...

開源計劃

github.com/suoyuesmile…

感謝閱讀

第二次發文章,技術不到位多多海涵,裏面技術點一部分來自 You don't kown JavaScript,另外一部分來自平時看過的文章和平時的總結。之後會持續更新,也算是對本身技術相關原理的總結。推薦你們去認真看看這本書,相信你會有更大的收穫。

高清電子書資源(請私聊,我單獨發給你)

下期預告(待定)

函數又來自哪?同時數組又來自哪?原型鏈又是什麼東西?

咱們已經有了函數,爲何還要箭頭函數?箭頭函數僅僅是替代函數寫法嗎?

咱們知道 Vue 經過 Object.defineProperty() 劫持對象,那麼它數組又是怎麼劫持的呢?

函數有個執行棧,咱們知道同步函數是在執行棧裏執行,那異步函數呢?

說到異步,怎麼實現異步的?異步與同步最大的區別在於什麼?

回調函數能夠實現異步,爲何還要用 Promise?

Promise 異步就很好用了,爲啥又有 asyncawait

------------------------------更新-------------------------------------

2019.7.3 更新 工做已肯定,幫忙內推的朋友多謝了...去了一家小型待遇還不錯的小公司

相關文章
相關標籤/搜索