高端前端工程师必备知识点

一、css的position属性有哪些取值，它们的行为是什么？

1）取值

• position的取值有static、relative、absolute、fixed、inherit、sticky。

2）行为：

• static标准文档流，从左到右，自上而下排列；
• relative相对于自身移动。
• absolute相对于离它最近的 position 属性为 absolute、relative或者 fixed 移动。
• fixed相对于body移动。
• inherit继承父级的position属性。
• sticky正常情况是static，超过设置的top，left变成fixed定位。

3）为何会产生这些行为，上面各种相对物都称为包含块（containing block）。

• static、relative的包含块是它最近的块级、单元格或者行内块祖先元素的content区域创建。相对的移动也比较简单。
• fixed的包含块是当前可视窗口，可认为是body。
• absolute的包含块是离它最近的 position 属性为 absolute、relative或者 fixed或者body。
  当absolute包含块是块级元素，行内块，那么相对于包含块的内边距边界移动，即我们熟知的左上方，有下方移动。
  当absolute是行内元素，那么取决于direction属性，有ltr（从左到右排版），rtl（从右到左排版），包含块的宽度减少几个像素，一半宽度，甚至为负数，所以坚决不能用行内元素当做包含块。

4） position跟display、margin collapse、overflow、float这些特性相互叠加后的行为。

先看display重置规则：

设置值	转换值
inline-table	table
inline, run-in, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block	block
其他	同设定值

• display 的值为 none：position与float不起作用。
• position 的值是 absolute 或 fixed：当元素是绝对定位时，浮动失效，'display' 会被按规则重置。
• float存在：浮动元素大部分变成display:block

参考文献：http://www.w3help.org/zh-cn/kb/ 和 https://www.cnblogs.com/jackyWHJ/p/3756087.html

---

二、为什么尽量别用setInterval？

• setInterval无视代码错误；即使setInterval内有错误，还是继续执行，不暂停。
• setInterval无视网络延迟；即使你接口一直没请求成功，还是会轮询，最终你的客户端网络队列会塞满Ajax调用。
• setInterval不能保证代码一定执行；在轮询时间结束时，你某些函数还没执行，就会被忽略。
• setInterval不自由；无法设置你轮询的开始和结束条件。
  解决方法：使用setTimeout递归，这里提供个小例子：

const f = () => {
  if (true) {
      setTimeout(f, 5000)
  }
}          
setTimeout(f(), 5000);

---

webpack打包添加版本号
https://segmentfault.com/q/1010000004651295

---

三、必考原型继承相关内容？

1）
我们以 var p = new Person 为例来说：

var obj = {}
obj.__proto__ = Person.prototype
Person.call(obj)
var p = obj

简单来说：创建一个空对象obj，将Person的prototype属性赋予obj，通过call将Person的this指向obj。

2）

Object.create =  function (obj) {
    var F = function () {};
    F.prototype = obj;
    return new F();
};

简单来说：就是建一个空函数F，F.prototype=obj，然后返回F的实例。

这样的好处就是可防止多次调用父的实例，经典场景：寄生组合式继承。

3）
看如下例子：

// 第一种
function Person() {
  this.name=name;
  this.getName=function() {
    console.log(this.name)
  }
}

// 第二种
function Person() {
  this.name=name;
}
Person.prototype.getName=function() {
    console.log(this.name)
  }

第二种的好处就是，每一次调用实例new Person()，都不会触发getName方法，只有需要调用才触发，提升了性能；而第一种调用实例就会触发一次。

---

未完待续...