记录一次杭州顺网科技的面试过程

Posted 2020-12-07 10manongit

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为何只能是同步不能异步