面试题集

• 请描述下JS的原型链是什么？
  答：说白了，其实就是有限的实例对象和原型之间组成有限链，就是用来实现共享属性和继承的。

• JS怎么实现继承的？有哪几种方式，分别有什么区别，你觉得哪种方式最好？
  答：通过Object.create函数，这个函数有个特性：创建出来的对象的原型指向传进去的参数。

  • Cat.prototype = Object.create(Animal.prototype);
  • Cat.prototype.constructor = Cat;

• 请描述下this对象是什么，不同场景的区别。
  答：this是当前执行上下文对象。

  1. 在全局作用域下，它指向window。
  2. 在函数调用时，谁调用的就指向谁。
  3. 在通过apply或call调用时，this指向第一个参数。
  4. 在通过bind返回的函数里，this始终指向在bind函数生成时传进去的第一个参数。

• CSS怎么实现水平垂直居中？

  • 水平居中：
    行内元素：通过设置父元素的text-align: center;
    定宽块状元素：设置自己的左右margin为auto
    不定宽块元素：
    1. 加入 table 标签
    2. 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
    3. 通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
    4. 设置自己的 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，然后设置自己的 transform: translate(-50%, 0); 向左位移50%，即达到居中的目的
  • 垂直居中：
    父元素高度确定的单行文本：通过设置父元素的 height 和 line-height 高度一致来实现
    父元素高度确定的多行文本（方法一）：包裹一层 table (包括tbody、tr、td)标签，利用td默认的 vertical-align：middle 特性来实现
    父元素高度确定的多行文本（方法二）：可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。
    还有一种方式：通过设置 position: relative; top:50%，transform: translate(0, -50%)，也可以达到垂直居中的效果。

• 请描述下CSS的transform、translate、transition分别是什么？

  • transform：变形属性，像rotate、scale、skew、translate 都是该属性的变形函数值，例如可以设置：transtform: rotate(90deg);
  • translate：是位移变形函数，例如可以设置：transform: translate(-50%, -50%);
  • transition：过渡属性，例如可以设置：transition: width 3s ease-in 1s;

• 如何理解闭包？

  • 定义和用法：当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其他变量，如果返回的这个函数在外部被执行，就产生了闭包。
  • 表现形式：使函数外部能够调用函数内部定义的变量
  • 范例：

  function add () {
      var count = 0;
      return function () {
          count += 1;
          alert(count);
      }
  }
  

• 用ES6去除数组重复元素？

  var arr = [1, 2, 3, 2, 1, 4, 5, 4];
  var arr2 = [...new Set(arr)];
  
  

• 请描述下let和var的区别？

  • let不允许重复定义，var允许
  • let没有变量提升，var有
  • let有块级作用域，var没有，例如for循环中的i定义：

  for (var i = 0; i < 10; i ++) {
      // ...
  }
  console.log(i); // 输入10
  
  ---------------------------------------
  
  for (let i = 0; i < 10; i ++) {
      // ...
  }
  console.log(i); // ReferenceError: i is not define.
  

• 浏览器是如何渲染页面的？有哪些步骤？

  1. 解析HTML文件，创建DOM树。(自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）)
  2. 解析CSS。
  3. 将HTML和CSS合并，构建渲染树（Render Tree）。
  4. 绘制渲染树。

• 一个网站经过哪些流程上线？
  答：市场调研、需求讨论、功能模块划分、技术选型（前后端）、版本迭代（开发、测试、部署（域名解析）、发布）

• css权值？
  !important: 10000
  style: 1000
  id: 100
  class: 10
  tag: 1
  *: 0

• css中em和rem的区别？
  em 是基于父元素的font-size样式比例
  rem 是基于html的font-size样式比例
  [扩展链接](https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&srcqid=2307799849209245210&tn=02003390_1_hao_pg&wd=css rem 自适应&oq=css权值&rsv_pq=df1b940a00003fb1&rsv_t=afadPSy4sK/OB7GDsi3Y9ftu06PuSCRVbw75B5Vosh18Q+66gr3X1GGfzZpANSI4UtaZLl7QPZ4&rqlang=cn&rsv_enter=1&rsv_sug3=11&rsv_sug1=10&rsv_sug7=100&rsv_sug2=1&prefixsug=rem使用&rsp=2&inputT=5039&rsv_sug4=5040)

• 伪类和伪元素的区别？
  伪类：用于向某些选择器添加特殊的效果
  伪元素：用于将特殊的效果添加到某些选择器

• :和::的区别？

  伪类
  :: 伪元素

• 怎么实现一个倒三角？
  用border，给border的左、下、右的颜色设为透明（transparent）

• 描述下js事件流？
  捕获、目标、冒泡
  preventDefault
  stopPropagation
  traget
  currentTarget
  扩展链接

• 描述下你是怎么理解h5的？
  简单理解就是HTML(超文本标记语言)的第五次重大修改的版本，04年正式提出，07正式被w3c接纳，相比html4，主要增加了新元素互操作性，主要是针对移动设备和多媒体，更好的语义化和SEO，有更完善的标签和更强大的API。