一次有意义的前端面试总结

[meishadevs]

我今天去参加了位于深圳某公司的前端开发工程师岗位的面试，这是我来深圳后参加的第二次面试，感觉这次面试经历比较有趣，也通过这次面试学到了很多东西，所以决定以博客的形式记录下来。

获得面试机会

该从哪里讲起呢，就从看到那个公司的招聘信息讲起吧，当我还在江西老家的时候就打算年后来深圳找工作，所以我在来深圳之前就通过 Boss 直聘和一些技术社区查找深圳的前端开发工程师的招聘信息，并投递了部分简历，在某个技术论坛上看到这个公司招聘前端工程师，我便通过 Email 投了一份简历过去，几天后对方回复了我一份邮件，大意是问我何时有空去面试，我当时还在江西老家，告知对方我要在正月十五才会去深圳后，对方很爽快的表示我到深圳后再告知对方，再安排其他时间面试，我到了深圳后发 Email 告诉对方我来深圳了，在元宵节假期结束后的的第一天上班时，对方发来了回复邮件，让 HR 为我安排面试时间，下午 HR 便打电话给我，通知我去面试，并通过 Email 将面试的时间和地址发给了我，感觉比 Boss 直聘上的通知方式要正式的多，在 Boss 直聘上如果对方通知你去面试直接就说你过来面试吧，还要自己再问对方，对方才会告知你面试的地址。

满是陷阱的笔试

乘地铁到高新园站出来后便来到了那个公司的所在地，一栋非常高端的写字楼，那个公司就在这个写字楼里，进入公司后便开始笔试，感觉笔试题都很基础，但是里面有很多陷阱，比如第一题要求写出 10 + '20' 的值，然后将计算的结果再加 '20'，这题主要考察数字与字符串之间的运算，在 JavaScript 中字符串加上数字，首先需要将数字转换成字符串，然后再进行相加运算，相加的结果仍能是字符串，所以 10 + '20' = '1020'，结果再加上'20'为 '1020' + '20' = '102020'。还有一题要求写出 add(4)(5)的实现函数，看到这题后我一脸懵逼，函数不都是只有一个括号吗，这里怎么出现了两个括号，面试结束后我通过在一个前端交流群里问了这个问题，这题考察的是函数柯里化，还有一题要求使用 ES6 的语法实现数组去重等，通过这次面试我也发现了我的很多知识盲区。

糟糕的自我介绍

笔试结束后 HR 拿着我的简历和做的笔试题指引我来到了一个会议室，当我在会议室坐下后不久，会议室里进来了一位女士，她就是我今天面试的面试官，互相打了个招呼后，她首先让我做自我介绍，然后我便说道我叫 xxx，今年 xx 岁，来自江西，有一年工作经验，过来是应聘前端开发工程师职位，我说完后她让我再介绍一下之前的工作经历和做过的项目，我因为提前没准备好，说的吞吞吐吐，这次我学到了做自我介绍时要简要的介绍一下个人信息、工作经历和之前做过的项目。

有意义的面试

自我介绍完成后她便拿着我的简历问我问题。
面试官：你知道盒模型吗？
我：盒模型是由 margin、border、padding、width 巴拉巴拉一大堆。
面试官：我是问你标准盒模型和怪异模型你了解吗？
我：标准盒模型 width=padding+border+(当时太紧张了，不知道如何回答了)。
面试官：你知道 JavaScript 中的事件绑定方式吗？
我：onclick。
面试官：onclick 不能算是事件绑定的方式。
我：addEventListener。
面试官：还有吗？
我：我知道的就这么多。
面试官：知道 rem 和 em 吗，他们两个有什么区别？
我：rem 表示的是相对于网页的根节点然后巴拉巴拉一大堆。
面试官：知道原型吗？
我：知道，在 JavaScript 中的继承就是通过原型实现的。
面试官：那你说说 JavaScript 中实现继承的方式有哪些？
我：巴拉巴拉一大堆。
面试官：知道数据的存储方式吗？
我：localStorage、seesionStorage、Cookie。
面试官：localStorage 和 sessionStorage 之间有什么区别？
我：localStorage 可以实现数据的永久保存，sessionStorage 存放的数据，当浏览器关闭后会自动丢失。
面试官： 知道元素层叠吗？
我：一脸懵逼，后来不知怎么回事就想起来了，我顺便问了一句是指两个元素，一个在上面一个在下面，两个元素的距离为那个 margin 值大的那个元素的 margin 值吗？
面试官：如何解决这个问题？
我：能用 padding 就尽量不要用 margin。
面试官：知道 call 和 apply 吗？
我：你能不能在纸上写一下(当时没听懂)，两个都可以让对象调用函数，其中 apply 中的第一个参数为调用函数的对象，第二个参数为函数传递的数据，其中 apply 传递数据是数组，call 巴拉巴拉。
面试官：知道跨域吗？
我：知道。
面试官：如何解决跨域问题？
我：使用 JSONP 和在服务器端设置 CORS。
面试官：看你简历中还提到了你会组件化开发，那你介绍一下你的项目中哪里设使用了组件化开发？
我：header 组件用于头部、footer 组件用于脚部、banner 组件用于轮播图。
面试官：介绍一个组件，并说一个如何设计它的外部接口？
我：那就介绍 banner 组件吧。
面试官：好。
我：banner 组件可以设计一个 JSON 数组，数组中的对象可以设计 url 属性表示点击图片后跳转的链接，image 属性表示图片的地址巴拉巴拉。。。
面试官：好了你回去等通知吧。

最后附上我能想起来的笔试题和面试题

1、10 + '20' = ? 再加 '20' 呢？

10 + '20' = '1020' 
'1020' + '20' = '102020'

2、请写出 Ajax 请求中用到的函数

var xhr = new XMLHttpRequest();
xhr.open('GET/POST', 'http://localhost:8080?username=meishadevs', true);
xhr.onreadystatechange = function() {};
xhr.send();

3、使用正则表达式提取出 url 值为 https://map.baidu.com/x/y/z 中的 map.baidu.com

/https:\/\/([^\/]+)/.exec('https://map.baidu.com/x/y/z')[1]
'https://map.baidu.com/x/y/z'.match(/https:\/\/([^\/]+)/)[1]

执行结果

4、使用 ES6 的方法实现数组去重

let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3];
let set = new Set(array);
let arr = Array.from(set);

5、设计一个函数实现 add(3)(4)

function add(a) {
	return function(b) {
		return a + b;
    }
}

add(3)(4)

ES6 的写法

add = a => b => a + b
add(3)(4)

对 ES6 写法做一个变形

add = a => (b => a + b)

再变

add = function (a) {
	return (b => a + b)
}

再变

add = function (a) {
	return function (b) {
		return a + b;
	}
}

6、使用 Ajax 实现一个表单提交功能，并跳转到提交的地址，（可以使用 jQuery 或 Zepto）

7、在完成第 6 题后使用 Promise 再实现一遍

8、JavaScript 中的基本数据类型

Number、String、Boolean、Null、Undefined

9、一道响应式布局的题目

10、call、apply 的作用与区别
call 和 apply 都是为了改变函数体内部 this 的指向，它们的第一个参数都是调用函数的对象，call 方法接收由若干个参数组成的参数列表，apply 方法接收的是一个包含多个参数的数组

例如使用call获取一组数字中的最大值

Math.max.call(null, 1, 3, 5, 8, 2)

例如使用apply获取一组数字中的最大值

Math.max.apply(null, [1, 3, 5, 8, 2])

11、标准盒模型和怪异盒模型的区别
标准盒模型的 box-sizing 属性的值为 content-box
怪异盒模型的 box-sizing 属性的值为 border-box
标准盒模型中 width = 内容的宽度
怪异盒模型中 width = 内容的宽度 + padding + border

12、em 与 rem 的区别
rem 表示根节点(html 标签)的字体大小的倍数
当 em 作为 font-size 的单位时，表示相对于父元素的 font-size 值的倍数
当 em 作为其他属性单位时，代表自身字体大小的倍数

13、localStorage 与 sessionStorage 的区别
使用 localStorage 保存的数据，除非手动清除，否则会永久保存
使用 sessionStorage 保存的数据仅在当前会话下有效，关闭页面或浏览器后会被清除

14、元素层叠
参考张鑫旭大神的文章：深入理解 CSS 中的层叠上下文和层叠顺序

15、使用原型现继承

使用 __proto__ 实现继承

//创建 animal 对象
var animal = {
    name: "animal",
    
    eat: function () {
        console.log(this.name + " is eating");
    }
};

//创建 dog 对象
var dog = {
    name: "dog",

    //指向 animal 对象（ dog 继承自 animal ）
    __proto__: animal
};

//创建 cat 对象
var cat = {
    name: "cat",

    //指向 animal 对象(cat 继承自 animal)
    __proto__: animal
};

dog.eat();
cat.eat();

使用 prototype 实现继承

//创建 animal 对象
var animal = {
    name: "animal",

    eat: function () {
        console.log(this.name + " is eating");
    }
};

//创建构造函数 Dog
function Dog() {
    this.name = "dog";
}

//创建构造函数 Cat
function Cat() {
    this.name = "cat";
}

//设置 Dog 的原型为 animal(Dog 继承自 animal)
Dog.prototype = animal;

//设置 Cat 的原型为 animal(Cat 继承自 animal)
Cat.prototype = animal;

//创建 dog 对象
var dog = new Dog();

//创建 cat 对象
var cat = new Cat();

dog.eat();
cat.eat();

16、JavaScript 中事件绑定的方式

button.onclick = function() {}

button.addEventListener("click", function () {});

17、设计一个函数实现判断一个数据的数据类型是不是数组

function isArray(num) {
	return num instanceof Array;
}

总结

1、自我介绍没准备好，只介绍了我的个人信息，没有介绍工作经历和做过的项目，说话吞吞吐吐， 2、笔试和面试的问题大部分都是前端开发中的基础知识，只有少部分 ES6 和 jQuery 的内容，可见我前端基础掌握的不够好
3、没有提前计划好，导致块要超过约定的时间时才到面试地点 4、不管是面试还是笔试不知道的就说不知道，不清楚的地方要多问

参考链接

• 深入理解 CSS 中的层叠上下文和层叠顺序
• Javascript：一个屌丝的逆袭
• javascript 王国的一次旅行，一个没有类的世界怎么玩转面向对象？
• javascript 王国之函数教主

[saozhu]

扫了一眼排版，先赞一个慢慢看

[kunluanbudang]

@Livid

[throns]

感觉不像面试经历，面试问题和面试官的提问都记得那么清楚.....

[519395527]

tcl 大厦 上周我才面过 哈哈哈

[coffeSlider]

记忆力真好，我是面完就忘。

[kimown]

嗯，感谢分享，多看多背 /(ㄒoㄒ)/~~

[noe132]

看完了，感觉问的东西算是很基础很基础的了，感觉像 2013 年的 js 面试。。。


我现在写前端，都是各种模块化组件化，各种类，继承。。根据需要，我还自己写了一个 babel plugin 用来解析 import 语句。

现在都 2018 了
但还是可以参考参考这篇 how it feels to learn javascript i 2016
https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f

[pcar]

好文

[meishadevs]

@519395527 你也去哪个公司面试了啊

[yunzhihui666]

综合评价：你做事非常认真，做题目认真，总结也认真，是一个前端工程师非常良好的品质。
同时，趁势打个小广告，我们还缺一个高级前端工程师，欢迎查阅： document.location.protocal + '//' + document.location.hostname + '/t/432673'

[codermagefox]

@noe132 #7 老哥，初级你还想问个啥...

[yunzhihui666]

综合评价：你做事非常认真，做题目认真，总结也认真，是一个前端工程师非常良好的品质。
如果你对我们的面试还满意，我不介意你把我们公司的全称打上嘛：云智惠（北京）投资管理有限公司，我们还缺一个高级前端工程师，欢迎查阅：document.location.protocol + '//' + document.location.hostname + '/t/432673'

[Mutoo]

@yunzhihui666 /t/432673

[Exia]

话说有些原生的 JavaScript 不查查我都不知道写呢，函数柯里化看过也忘记了。
总觉得问题都是网上能找到答案的东西，背感觉还是不是很好。
开发中用到很多框架或是技术，这些也是一些时间的积累，有经验了，很多就变体力活了，当然不断优化也是个方向，然后慢慢就会干点别的开发事情了呢。

[jarnanchen]

我觉得楼主基本功还是很扎实的。祝你面试成功

[meishadevs]

@jarnanchen 我面试时没回答好，后面的题目的答案大部分是从网上找的

[meishadevs]

@yunzhihui666 我这篇博客几天前就写好了，怕泄密所以一直不敢发在 V2EX 上，也是怕泄密所以没在博客中写公司的名字

[Arrowing]

@meishadevs 作为一年经验的前端开发者，楼主我觉得你基础很扎实了。
你文中的女士（不是我）已经看到你的博客啦，哈哈，祝你好运~

[attackonFourier]

我觉得都还是很基础的东西了吧
原型这块 __proto__内置的原型链 除了 console 台 在代码中是无法访问的 至于为什么要有内置的原型链 是为了保证继承的特性
还有一个是外部原型链 供用户操作的 就是通过实例对象通过 constructor 回溯的

继承的话 除了原型继承 常用的就是类抄写的方式了 不过类抄写是用空间换时间的方案了 而且没有内置的 instanceof 来维护父类 需要自己去做这块的处理

[meishadevs]

@attackonFourier 谢谢你的纠错，__proto__ 的用法我是在 https://mp.weixin.qq.com/s?__biz=MzAxOTc0NzExNg==&mid=2665513786&idx=1&sn=6f51ad314e3ef3e1575e032568477f3a&scene=0#wechat_redirect&rd2werd=1#wechat_redirect 上看到的

[8qwe24657913]

@attackonFourier __proto__不是只有 console 才能访问的 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto

[meishadevs]

@8qwe24657913 谢谢，学习中

[attackonFourier]

@8qwe24657913 你给 mdn 代码里有一句话
var shape = {};

// Set the object prototype.
// DEPRECATED. This is for example purposes only. DO NOT DO THIS in real code.
shape.__proto__ = circle;

[g1165297373]

@noe132 1-2 年的前端开发，这些是很好的面试题的，上来就是 react，vue 的，很多人这些并不一定答得上来

[8qwe24657913]

@attackonFourier 你那是因为动态修改[[Prototype]]会破坏优化(见最上面的 warning)，像楼主一样在对象字面量里用是可以的 The __proto__ property can also be used in an object literal definition to set the object [[Prototype]] on creation, as an alternative to Object.create().

[conanskyforce]

我去，咋感觉像 3 年前的前端面试，不过楼主还是挺用心

[simple11]

赞排版 看完了

[callmexiaobo]

排版不错，看的很舒服，同为江西老表赞一个

[sepld]

新手虽然不怎么懂前端，但是看的很认真

[LeungJZ]

你不会是带了个录音笔去面试吧，记得这么清楚。

[luohuanlhh]

mark

[dongliangnerd]

@codermagefox 如果一年不是划水过来的，这个确实太简单了

[codermagefox]

@dongliangnerd #32 我一年，全都能做出来，但是我还是觉得这种程度就差不多了....一年你还真让人面试造火箭啊，我面试的时候就被问过一些很难的，人家开的薪资水平也相对的高很多，就一般来说这种难度差不多了。

[dongliangnerd]

@codermagefox 这个要求还是要看个人，自己怎么舒服怎么来呗。我还是想对自己以及以后一起长时间伙伴稍微提高一点标准，不管是从个人发展还是交流的舒适度和不加班的效率追求

[TimCheng]

我想邀请你来来掘金参加秋招求职面试征文活动，你感兴趣的话加我微信：cx923373725 活动链接👉🏼 https://juejin.im/post/5aaf2a95f265da239b413aa1

[kaisinx]

hey，是你啊！工作怎么样了？

[meishadevs]

@kaisinx 找到工作了

[tianyao123]

很基础的题目啊

[aaronlam]

使用 prototype 实现继承里的 Cat/Dog.prototype.constructor 要修改回对应的构造器把？