1.如何实现下列函数
已知 f(2)(3) + 5 === 10
又已知 f(2) + 5 === 7
请问怎么实现 'f' 这个函数
看到这个题目一脸懵逼，为什么一个函数又可以返回一个函数，又可以返回一个常数，后来实在想不出来，人人网的大哥就告诉我利用 函数是一个对象，利用 toString 方法对其改写
function f(a) {
var res = function(b) {
return a + b;
}
// res函数是一个对象，这个对象设置另一个函数
// 这个方法要和 '+' 进行类型转换
res.toString = function() {
return a;
}
return res;
}
# 现在
f(2)(3) + 5 === 10
f(2) + 3 === 5
# 如果直接调用函数
f(2)
// 返回
f 2
2.this指向问题
面试题目
var x = 1
var obj = {
a: {
x: 2,
b: {
x: 3,
sayThis: function() {
console.log(this.x)
}
}
}
}
var s = obj.a.b
s.sayThis()
obj.a.b
# 请问打印的值是什么
我的答案是
3
3
原因是
obj.a.b 是引用类型，所以两处的应该是一样的，都是指向对象obj.a.b内部的x
但是面试官大哥告诉我，因为对象s是定义在window下的，所以s应该指向的是window下的 'x',所以答案是
1
3
后来我回家之后发现我的答案是对的
今天是2017-10-08 突然想到那天的题目实际上是
var s = obj.a.b.sayThis // 这个对象是在window下定义的
s()
obj.a.b.sayThis()
# 打印结果是
1
3
3.闭包的问题
function fun() {
var i = 0;
return function() {
console.log(i++)
}
}
var f1 = fun()
var f2 = fun()
f1()
f1()
f2()
请问打印什么
我一开始看成了这个,因为经常看到的下面这个例子
function fun() {
var arr = []
for (var i = 0; i <= 4; i++) {
arr.push(function() {
console.log(i);
})
}
return arr;
}
var funArr = fun();
for (var i = 0; i < funArr.length; i++) {
funArr[i]()
}
// 结果
5
5
5
5
5
所以想到没想，就将上面的3个函数的结果写为了
2
2
2
后来才发现这2个例子不一样，本题答案是
0
1
0
4.BFC
问我 BFC 是什么，虽说经常看到这个东西，一开始以为是清楚浮动用的，后来实在想不到，就让面试官大哥直接告诉我了
直接也差了一下文档，BFC(Block Formatting Context) 是Web页面中盒模型布局的CSS渲染模式
一个BFC是一个html盒子并且自杀后满足下列条件中的任何一个：
- float的值不为0
- position的值不为static或者relative
- display的值为 table-cell, table-caption, inline-block, flex 或者 inline-flex中的一个
- overflow的值不为visible
参考文章：
- 理解CSS中BFC
- CSS深入理解流体特性和BFC特性下多栏自适应布局 讲了很多关于布局的东西 很不错
5.下面图片地下空白是什么
// html
<div class="container">
<span>1</span>
</div>
// css
.container {
width: 400px;
background-color: lightgreen;
}
红色框部分是为什么会出现，我一开始以为是图片的高度不够，后来才知道是 vetical-align 的原因，因为这个值的默认值是 baseline, 下面设置其为 bottom 即可
img {
vetical-align: bottom
}
6.数字格式化
把数字格式户
-
1234567899每4位顺着就加一个空格1234 5678 99 -
1234567899每4位就倒着加一个逗号1,234,567,899
我知道这个格式化数据考的是正则，奈何我正则很垃圾，基本上都是直接网上抄一下，现在让我手写有点懵逼
# 首先返回的是一个字符串， 肯定现将数字转换为字符串
#1
'1234567899'.replace(/(.{4})/g, '$1 ')
"1234 5678 99"
'123'.replace(/(.{4})/g, '$1 ')
"123"
# 2
'1234567899'.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
"1,234,567,899"
'12345'.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
"12,345"
或者
// ?!^ 表示不能是开头的位置
// ?=(\d{3}) 表示3位数字前面的位置
'12345'.replace(/(?!^)(?=(\d{3})+$)/g, ',')
"12,345"
-
?=称之为positive lookahead, 中文名称之为 正向先行断言 -
?!称之为negative lookback, 中文名称之为 负向先行断言
参考文章：
7.事件冒泡和事件捕获的区别 以及如何用js实现事件委托
文章：
8.如何在容器宽高已知的情况下 让文字居中
一开始我就问可不可以使用 flex，面试官说可以，我就说
// html
<div>
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti
quibusdam ullam doloremque nam nesciunt repellat consectetur enim at,
autem libero, magnam numquam officia eligendi, laborum nulla, iste
quasi corporis accusamus.
</span>
</div>
// css
.container {
width: 400px;
height: 500px;
padding: 10px;
background-color: lightgreen;
display: flex;
justify-content: center;
align-items: center;
}
面试官还告诉我另一种方式
// html
<div>
<span>
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti
quibusdam ullam doloremque nam nesciunt repellat consectetur enim at,
autem libero, magnam numquam officia eligendi, laborum nulla, iste
quasi corporis accusamus.
</span>
</span>
</div>
9.为什么span之间会有空格，如何解决
看到这个问题一脸懵逼，我也不知道为什么，以为是 padding | margin 的原因
// html
<div class="container">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
// css
.container {
width: 400px;
height: 500px;
padding: 10px;
background-color: lightgreen;
}
我的解决办法是
span {
margig: 0;
padding: 0;
}
估计面试我的大佬觉得这小伙子是不是傻子，这么简单会让你做吗
回来谷歌了一下，找到了答案
下面是解决办法
# 解决办法1
在父容器中添加 'font-size:0' 样式，然后再定义span字体的大小
// html
<div class="container" style="font-size: 0;">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
// css
span {
font-size: 14px;
}
# 解决办法2
使用注释的方式
<div class="container">
<span>1</span><!--
--><span>2</span><!--
--><span>3</span>
</div>
10.如何让一个盒子左右可以拖动
这个个人感觉实现起来比较难，可以参考以下以下链接：
总结
还有一些布局方面的题目没有写下来，待改天补充。感觉一次面试能够学到很多平常注意不到的一些细节，很感谢人人网的那位面试官大佬细心的讲解，感觉大佬十分的平易近人，真心学到了很多知识点，也暴露了自己在js，css方面的不足。
以下是以后重点学习的地方：
- 了解基础原理
- 学好正则表达式
最后向大佬们学习~
2017年9月30日 23:32:50
