首先呢，统计一下情况：

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

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

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

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

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

理想公司：

***服：简历都没过（惨）还被一个蚂***外包招聘diss我这样的一年工作经验都外包都够呛（晕）

*赞：投了很多遍，简历全部卡在HR上了（惨）

*猫：没敢投（吓）

**车：一下午全部面完，环境一般，每轮面试都等了很长时间，两轮技术面后又和HR聊了一个多小时技术问题，表示很无奈，从此对大搜车印象大大折扣。回去等通知，一周之后说经验不符。敢情经验不符，你让我去面试个球（气）

*吧：HR主动找，问

你会 React ？我答会你会移动端吗？我答会你有过 H5 经验吗？我答有对不起，面试官说经验不符？？？（懵）复制代码

**顺：只招应届生了

考题汇总：

this指向 * 10 (必考有没有，这都不知道还学啥JavaScript--笑)

同步异步或者事件机制 * 8

Vue双向绑定实现原理 * 8

箭头函数 * 6（考察 ES6 使用情况）

callapplybind的使用和区别 * 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.默认绑定

varname ='lufei'functionshow(){varname ='namei'console.log(this.name)}show()// lufei

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

2.隐式绑定

functionshow(){varmember ='namei'console.log(this.member)}varmember ='zoro'varcaomao = {member:'lufei',showMember: show}caomao.showMember()// lufei

这里最后通过caomao来调用这个函数，函数中的this则被绑定到caomao这个对象上

3.显式绑定

varcaomao = {member:'lufei'}varmember ='zoro'functionshow(){varmember ='namei'console.log(this.member)}show.call(caomao)// lufei

通过call，apply，bind我们可以显示的改变this的绑定

4.new绑定最后一种是使用new调用函数，或者说是构造函数调用时

functionSeaPoacherBoat(member) {    this.member = member}var caomao = new SeaPoacherBoat('lufei')console.log(caomao.member) // lufei

这段代码会执行以下操作：

创建一个全新的对象

进行原型（prototype）链接

将 新对象 绑定到函数调用的this

如果没有返回其他对象，则自动返回一个新对象

它们绑定的优先级是new> 显示绑定 > 隐式绑定 > 默认，这也是很容易理解的，new是生成了一个全新的对象优先级是最高的，显示绑定函数要起作用优先级一定要高于隐式绑定，默认绑定是最低的这个也无可厚非

最后一句话总结this是运行期间绑定，和它声明的环境无关，只与调用它的对象有关

我们知道了它的指向，要想改变它怎么办呢？

改变this指向最直接的方法是call,apply,bind，来看一下下面这段代码

varname ='草帽海贼团'varcaomao = {name:'路飞'}functionprintMember(arg1, arg2){varname ='娜美'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最后返回的是一个函数，只有调用这个函数后才算执行。

有一种特殊情况就是把null和undefined作为this的绑定对象传人进去，这样的实际情况是采用的默认绑定原则那么这有什么用途呢？常见用于展开数组来，看一段代码

functionprint(a, b){console.log(a, b)}print.apply(null, [1,2])

还有呢, 使用bind用于柯里化

varfoo = print.bind(null,1)foo(2)

也就是延迟执行最终的结果

是不是所有函数都可以绑定this呢？

没错你可能很快想到就是箭头函数，普通函数来说，this是运行期绑定，而ES6新规则里箭头函数并没有绑定this，它是不存在this的绑定的。那在箭头函数中存在this会怎么样呢

// 情景一，全局范围内调用箭头函数varfoo =()=>{console.log(this) }foo()// window// 

情景二，对象中调用functionmonkey(){varbar =()=>console.log(this)    bar()}varobj = {monkey: monkey}varother = {obj: obj}other.obj.monkey()// { monkey }

之前很多人对箭头函数中的this都有一些误解，认为箭头函数中的this自身绑定或者是任何绑定在最终调用方式上。其实不然，从上面代码中我们可以看出箭头中的this绑定在离最近外层的对象 obj 上, 而不是最终调用对象 other 上。

我们知道了this的指向的对象调用它的函数，那么调用它的时候到底发生了什么？我们需要知道JS执行机制到底是怎么样的

console.log(run)varrunfunctionrun(run){varrun =2this.run = runconsole.log(this,arguments)console.log(run)}run('1')console.log(run)run =3console.log(run）

我们来分析一下它的运行方式首先开始预解析，它有个规则是变量声明提升，我们可以知道函数声明会被提升到最上面，其次是变量。声明后的变量不会重复声明，所以第二次声明的变量不生效，我们手动来做一次转换

// 提升函数声明functionrun(run) {    console.log(this, arguments)    var run = 2    this.run = run    console.log(run)}// 提升变量声明var runconsole.log(run)run('1') console.log(run)run = 3console.log(run)

所以第一个 log 会打印出函数而不是变量

开始按顺序执行下面的语句，此时遇到一个run()的调用将run推入到执行栈中,进行以下几个步骤：

绑定this和 初始化参数， 根据之前谈到的规则，this绑定到调用它的全局对象window，所以第二个 log 打印出window对象和传递过来的参数

同样在函数作用域中开始执行预解析，执行语句，函数中又定义了一个run。我们知道作用域原理是就近查找，存在一个屏蔽作用，run函数作用域中的run此刻就是2，所以第三个 log 会打印出2，this.run = run将全局中的run赋值为2

执行完成后，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，另一部分来自平时看过的文章和平时的总结。以后会持续更新，也算是对自己技术相关原理的总结。推荐大家去认真看看这本书，相信你会有更大的收获。

高清电子书资源（请私聊，我单独发给你）

下期预告（待定）

“我自己是一名从事了6年web前端开发的老程序员（我的微信：webxxq），今年年初我花了一个月整理了一份最适合2019年自学的web前端全套培训教程（视频+源码+笔记+项目实战），从最基础的HTML+CSS+JS到移动端HTML5以及各种框架和新技术都有整理，打包给每一位前端小伙伴，这里是前端学习者聚集地，欢迎初学和进阶中的小伙伴（所有前端教程关注我的微信公众号：web前端学习圈，关注后回复“2019”即可领取）。

函数又来自哪？同时数组又来自哪？原型链又是什么东西？

我们已经有了函数，为什么还要箭头函数？箭头函数仅仅是替代函数写法吗？

我们知道 Vue 通过Object.defineProperty()劫持对象，那么它数组又是怎么劫持的呢？

函数有个执行栈，我们知道同步函数是在执行栈里执行，那异步函数呢？

说到异步，怎么实现异步的？异步与同步最大的区别在于什么？

回调函数可以实现异步，为什么还要用Promise?

Promise异步就很好用了，为啥又有async和await