面试

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.下面图片地下空白是什么

img.jpg

// html
  <div class="container">
    ![](http://fillmurray.com/300/300)
    <span>1</span>
  </div>

// css
.container {
  width: 400px;
  background-color: lightgreen;
}

红色框部分是为什么会出现，我一开始以为是图片的高度不够，后来才知道是 vetical-align 的原因，因为这个值的默认值是 baseline, 下面设置其为 bottom 即可

img {
  vetical-align: bottom
}

vetical-align.jpg

• vertical-align

6.数字格式化

把数字格式户

1. 1234567899 每4位顺着就加一个空格 1234 5678 99
2. 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, 中文名称之为 负向先行断言

参考文章：

1. js 每隔四位加一个空格
2. Number Formatting Using string.replace in JavaScript

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空格.jpg

我的解决办法是

span {
  margig: 0;
  padding: 0;
}

估计面试我的大佬觉得这小伙子是不是傻子，这么简单会让你做吗

回来谷歌了一下，找到了答案

• css - get rid of spaces between spans - stackoverflow

下面是解决办法

# 解决办法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.如何让一个盒子左右可以拖动

这个个人感觉实现起来比较难，可以参考以下以下链接：

• How do I make a div width draggable? - stackoverflow
• jsfiddle代码 使用了jquery-ui
• 使用jquery实现

总结

还有一些布局方面的题目没有写下来，待改天补充。感觉一次面试能够学到很多平常注意不到的一些细节，很感谢人人网的那位面试官大佬细心的讲解，感觉大佬十分的平易近人，真心学到了很多知识点，也暴露了自己在js，css方面的不足。

以下是以后重点学习的地方：

• 了解基础原理
• 学好正则表达式

最后向大佬们学习~

2017年9月30日 23:32:50