6月第一周趣问

这周开始想不定期更新一个新板块，就是把平时开发或者听到的有趣的面试题汇总起来，这周听到组里一前端同事面试中遇到了几个有趣的问题先行更新下：

1.div居中，内部文字左对齐

光看标题无法理解这题目的意思，详细描述一下的该题：

一个div容器，里面的字体少了居中，多了的话够一行的沾满一行，剩下的靠左，以下是图示：

1
2
3
4
|  xxx  |
和
|xxxxxxxx|
|xxx         |

主要思路其实就是2个容器，子容器设置为inline-block，并且内容居左，父容器居中，以下是代码实现：

1
2
3
4
5
6
7
8
9
.container {
     text-align: center;
 }

.text {
    display: inline-block;
    text-align: left;
    word-break: break-all;
}

2.普通函数和剪头函数的区别

(1)函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

普通函数：

1
2
3
4
5
6
7
8
9
10
11
function foo2() {
  console.log(this); // foo
  setTimeout(function () {
    console.log(this); // window
    console.log('id:', this.id); // 21
  }, 100);
}

var id = 21;

foo2.call({ id: 42 });

箭头函数：

1
2
3
4
5
6
7
8
9
10
11
function foo1() {
  console.log(this); // foo
  setTimeout(() => {
    console.log(this); // foo
    console.log('id:', this.id); // 42
  }, 100);
}

var id = 21;

foo1.call({ id: 42 });

(2)箭头函数不会创建自己的this,而是默认绑定函数的宿主对象（或者绑定函数的对象）

箭头函数里面根本没有自己的this，而是引用外层的this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function foo() {
  return () => {
    return () => {
      return () => {
        console.log('id:', this.id);
      };
    };
  };
}

var f = foo.call({id: 1});

var t1 = f.call({id: 2})()(); // id: 1
var t2 = f().call({id: 3})(); // id: 1
var t3 = f()().call({id: 4}); // id: 1

上面代码之中，只有一个this，就是函数foo的this，所以t1、t2、t3都输出同样的结果。因为所有的内层函数都是箭头函数，都没有自己的this，它们的this其实都是最外层foo函数的this。

(3)如果有对象嵌套的情况，则this绑定到最近的一层对象上

(4)不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

(5)不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

(6)不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

(7)除了this，以下三个变量在箭头函数之中也是不存在的，指向外层函数的对应变量：arguments、super、new.target

1
2
3
4
5
6
7
8
function foo() {
  setTimeout(() => {
    console.log('args:', arguments);
  }, 100);
}

foo(2, 4, 6, 8)
// args: [2, 4, 6, 8]

上面代码中，箭头函数内部的变量arguments，其实是函数foo的arguments变量。

(8) 无法使用bind、call、apply改变指向

1
2
3
4
5
6
(function() {
  return [
    (() => this.x).bind({ x: 'inner' })()
  ];
}).call({ x: 'outer' });
// ['outer']

3.尾递归

这个我准备写一个单独的文章：

白话讲解尾递归

4.react组件多继承

(1)Mixins

(2)HOC

5.git revert

（1）revert 详解

git revert 撤销 某次操作，此次操作之前和之后的commit和history都会保留，并且把这次撤销
作为一次最新的提交。

1
2
3
git revert HEAD                # 撤销前一次 commit
git revert HEAD^               # 	撤销前前一次 commit
git revert commit （比如：bca867bcbae6e1942ef89423506777fb337fb651）# 撤销指定的版本，撤销也会作为一次提交进行保存。

git revert是提交一个新的版本，将需要revert的版本的内容再反向修改回去，
版本会递增，不影响之前提交的内容

（2）git revert 和 git reset的区别

[1] git revert是用一次新的commit来回滚之前的commit，git reset是直接删除指定的commit。

[2] 在回滚这一操作上看，效果差不多。但是在日后继续merge以前的老版本时有区别。因为git revert是用一次逆向的commit“中和”之前的提交，因此日后合并老的branch时，导致这部分改变不会再次出现，但是git reset是之间把某些commit在某个branch上删除，因而和老的branch再次merge时，这些被回滚的commit应该还会被引入。

[3] git reset 是把HEAD向后移动了一下，而git revert是HEAD继续前进，只是新的commit的内容和要revert的内容正好相反，能够抵消要被revert的内容。

Share