2017年前端面试经历6-京东无线

京东的机会其实挺多也挺不错的，京东总部在亦庄，实在无法考虑。每天来回的时间最少也得三个多小时。后来发现在京东在北辰还有办公地点，离家很近，坐地铁去不能更方便。于是也参加了两次面试。

第一个是京东的无线团队，这个有点特殊，这个团队是京东在上海的团队，但是这个团队需要在北京招聘研发人员留守，所以人在北京，每天业务沟通都要通过电话会议或者其他通讯工具，实在是有些别扭

这次面试比较水，现场面试的姑娘和电话面试的小伙应该是没有沟通好，电话面试问的比较多，反而是现场面试其实没有聊什么干货。

面试无疾而终，后面一个京东的另外的团队面试结果不错，留在以后说。

11号晚上去五棵松看球的时候，京东的电话就来了，现场太吵，改在了第二天。没想到他是想电话面试，电话面试了差不多40分钟，回来冻的手都抖了

没过一会，就接到电话通知我电话初试过了，约了下周一上午的二面。很奇怪，他们的固话和手机都是上海的运营商。

不过不靠谱的是，周一上午我一道早跑到他们在北辰的公司，打电话联系面试官，告诉我她有事情没办法面试，她就是给忘了。她可能不知道在北京跑一趟面试又要请假，有多浪费时间和精力。

这种事情总能让我不快，也能从侧面打消我的紧张感。其实无所谓了，反正这一周就这四个面试，面完就得了。

第二天去了面试，这个姑娘实在是有点敷衍，明显对我不感兴趣，觉得我的实际经验太少，项目上感觉也没什么好问的。对于我来说，面试没有什么收获，太水了，还不如电话面试的时间长。

她们这是为了京东上海团队在北京的分支招人，奇奇怪怪的组织架构，不去就算了，只是工作位置实在不错，离家很近。

电话面试部分
继承的方式

使用构造函数创建实例

使用 call 或 apply

使用原型链 prototype

拷贝

如何使用原型链实现继承

1let P = function(){};
2let C = function(){};
3
4C.prototype = new P();
5C.prototype.constructor = C

上面的方法可以继承原型链上的属性和方法

1let P = function(){};
2let C = function(){P.call(this)};

上面的方法可以继承函数本身的属性和方法

undefined 和 null 的区别

1、undefined表示“缺少值”，就是此处有应该有值但是未定义，null表示“没有值”， 就是此处不应该有值；

2、转换为数字是，undefined 是 NaN， null 是 0

3、typeof结果不同

1typeof undefined; // ‘undefined’
2typeof null; // ‘object’

详见这里。

JS基本数据类型

5种基本数据类型：

Boolean

Number

String

undefined

null

1种复杂数据类型：
-Object
- function
- array
- object
- Date

闭包的用途

读取函数内部的变量

让这些变量的值始终保持在内存中。

一道闭包理解题

1var name = “The Window”;　　
2var object = {　　　　
3 name: “My Object”,
4 getNameFunc: function() {　　　　　　
5 return function() {　　　　　　　　
6 return this.name;　　　　　　
7 };　　　　
8 }　　
9};　　
10alert(object.getNameFunc()());

一道作用域的理解题

1var name = “The Window”;
2
3var object2 = {
4 name: “My Object”,
5 getNameFunc: {
6 name: ‘inner’,
7 func: function() {
8 return this.name
9 }
10 }
11};
12
13alert(object2.getNameFunc.func());
14
15var test = object2.getNameFunc.func;
16alert(test());
17
18var test2 = object2.getNameFunc;
19alert(test2.func())

JS中的假值

false

0

null

undefined

”

NaN

注意，只包含空格的字符串” ” 、空对象{}、空数组[]都是true

关于 float 属性

float定义了元素向哪个方向浮动，占据一定空间，其余内容围绕该元素排列

关于 clear 属性

规定元素的哪一侧不允许出现其他浮动元素

如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

react 优化

适当拆分组件

使用 CSS3 动画

Pure Render Decorator

Pure Component

immutable.js

无状态组件

箭头函数和普通函数的区别

箭头函数的 this 就是定义时所在的对象，而不是使用时所在的对象

箭头函数不能用作构造函数，

箭头函数不能使用 arguments 对象，该对象不存在，但可以使用 rest 对象

arguments 是一个类数组对象，而 rest 对象是真正的数组

对应的一道思考题：

1var a = 100;
2
3function foo() {
4 setTimeout(function() {
5 console.log(this.a)
6 }, 100)
7}
8foo.call({
9 a: 1
10});
11
12function bar() {
13 setTimeout(() => {
14 console.log(this.a)
15 }, 100)
16}
17bar.call({
18 a: 1
19})

题目中，setTimeOut 中的普通函数的 this 是调用时确定的，该函数的调用者是 window，所以 foo函数在 call 时，foo 函数的 this 指向 {a:1}, 但匿名函数的 this 还是指向 window

而箭头函数是没有自己的 this 的，它的 this 是沿作用域向上寻找，找到父作用域的 this 当做自己的 this 使用，所以 bar 在 call 的时候，bar 的 this 指向该对象，箭头函数的 this 也指向该对象

react 生命周期

创建：

getDefaultProps

getInitalState

componentWillMount

render

componentDidMount

更新

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

componentWillUnmount

面试部分
对 SPA 单页面应用的理解

SPA(Single Page Application) 将所有的活动局限在一个 web 页面中，在该页面初始化时加载对应的 HTML/CSS/JS，页面加载完成后，SPA 不会因为用户的操作而进行页面的重新加载而跳转，而是利用 JS 控制 HTML 来实现 UI 上的交互。

SPA 的无刷新跳转借助 Ajax，浏览记录的前进和后退依靠浏览器的 history 机制，借助 hash 推动界面动态加载

SPA 的优点：

用户体验好，内容的改变只需要局部加载，不需要加载整个页面

基于上面一点，对服务器压力减小

SPA 的缺点：

不利于 SEO，因为 html 内容少

初始化加载过程慢

页面复杂度和逻辑复杂度提高