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

栏目: JavaScript · 发布时间: 5年前

内容简介:首先呢,统计一下情况:本人校招进入新三板上市企业工作一年,并有半年多一线互联网实习经验来到杭州投出简历 24 封,收到面试邀约 10 次

首先呢,统计一下情况:

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

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

result = 正式offer * 2 + 口头offer * 1

令人头疼的是并没拿到自己想要的 offer,理想的公司大多连面试机会都不给...

伤脑筋...明天还有两家电话面试,过了大半个月,还是打算继续面下去...

理想公司:

HR
你会 React ?我答会
你会移动端吗?我答会
你有过 H5 经验吗?我答有
对不起,面试管说经验不符
???(懵)
复制代码

考题汇总

  • this 指向 * 10 (必考有没有,这都不知道还学啥JavaScript--笑)
  • 同步异步或者事件机制 * 8
  • Vue 双向绑定实现原理 * 8
  • 箭头函数 * 6
  • 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
  • getComputedStyle * 1
  • rem * 1
  • 其他忘记了...

聊聊面试题

this 指向什么? 一起源于 this

我觉得 You dou't kown JavaScript 这本书讲等最清楚了

首先是两个误解:

this
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
复制代码

通过 call,apply,bind 我们可以显示的改变 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)
复制代码
关于这些天杭州各厂面试汇总(从JavaScript各种原理到框架源码)
我们来分析一下它的运行方式 首先开始预解析,它有个规则是 变量声明提升 ,我们可以知道函数声明会被提升到最上面,其次是变量。 声明后的变量不会重复声明

,所以第二次声明的变量不生效,我们手动来做一次转换

// 提升函数声明
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 会打印出2, this.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 内推,代码练习,文章订阅...

技术实现

  • 前端 React + antd + webpack / Vue + ElementUI + webpack
  • 后端 node + koa + moogoDB
  • data端 python/node 爬虫

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Beautiful Code

Beautiful Code

Greg Wilson、Andy Oram / O'Reilly Media / 2007-7-6 / GBP 35.99

In this unique work, leading computer scientists discuss how they found unusual, carefully designed solutions to difficult problems. This book lets the reader look over the shoulder of major coding an......一起来看看 《Beautiful Code》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具