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

一、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） $\color{#4A33EE}{new一个实例道理经历了什么？}$
我们以 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） $\color{#4A33EE}{object.create原理？}$

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

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

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

3） $\color{#4A33EE}{为何方法需要用prototype扩展？}$
看如下例子：

// 第一种
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方法，只有需要调用才触发，提升了性能；而第一种调用实例就会触发一次。

未完待续...

最后编辑于：2019.07.12 10:38:57