阅读 6780

关于这些天杭州各厂面试汇总(从JavaScript各种原理到框架源码)

首先呢,统计一下情况:

本人校招进入新三板上市企业工作一年,并有半年多一线互联网实习经验

来到杭州投出简历 24 封,收到面试邀约 10 次

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》 这本书讲等最清楚了

首先是两个误解:

  1. this 指向自身,根据英语翻译来说,这是一种自然的想法,其实不然,这是一个误解。
  2. this 指向函数作用域,这个在某种情况下是正确的

其次是四种情况

  1. 默认绑定
var name = 'lufei'
function show() {
    var name = 'namei'
    console.log(this.name)
}
show()
// lufei
复制代码

可以看出最后 this 绑定在全局对象上,所以结果是 lufei

  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 更新 工作已确定,帮忙内推的朋友多谢了...去了一家小型待遇还不错的小公司

关注下面的标签,发现更多相似文章
评论