前端面试总结

1. 讲一下JS的闭包和它的应用场景吧

1.1 JS闭包是什么？

JS作用域分为全局作用域和函数作用域；我们在执行代码的时候，会创建当前执行上下文，也就是作用域的概念。
创建执行上下文分为两步：创建阶段和执行阶段。
创建阶段会创建作用域链，此时，将当前执行上下文放到作用域链的栈顶。作用域链中包含着当前执行上下文对象和所有父级执行上下文对象。

当前函数操作一个变量时，会沿着作用域链查找，当前作用链找不到，就去父级作用域链查找，这个就叫做闭包，简单说就是函数内部可以引用函数外部的参数和变量。

问我的时候，我答的是函数返回一个局部变量给外面用；没过

1.1.2 闭包的应用场景

1. 给对象设置私有属性

设置一个方法访问私有属性，我们不希望用户随便访问这个属性。

var Foo = function(){
      var name = 'fooname';
      var age = 12;
      this.getName = function(){
          return name;
      };
      this.getAge = function(){
          return age;
      };
  };
  var foo = new Foo();

  foo.name;        //  => undefined
  foo.age;         //  => undefined
  foo.getName();   //  => 'fooname'
  foo.getAge();    //  => 12

上述代码参考：
作者：甘洪翔
链接：https://www.zhihu.com/question/19554716/answer/24426087
来源：知乎

2. 为节点循环绑定click事件，在事件函数中使用当次循环的值或节点，而不是最后一次循环的值或节点

3. 防抖和节流函数中也有用到闭包

防抖：

function debounce(callback, delay){
    let timer
    return function(value){
        clearTimeout(timer)
        timer = setTimeout(function(){
            callback(value)
        }, delay)
    }
}

2. CSS3的新特性

flex布局、媒体查询、box-sizing、border-box、text-shadow、帧动画（@keyframes ）

3 属性选择器

3.1 属性选择器

根据元素特定属性选择元素。

选择符	简介
E[att]	选择具有att属性的E元素
E[att=‘val’]	选择具有att属性且属性值等于val的E元素
E[att^=‘val’]	匹配具有att属性且值以val开头的E元素
E[att$=‘val’]	匹配具有att属性且值以val结尾的E元素
E[att*=‘val’]	匹配具有att属性且值含有val的E元素

3.2 结构伪类选择器

根据文档结构来选择元素

选择符	简介
E:first-child	匹配父元素的第一个子元素，且为E
E:last-child	匹配父元中最后一个元素，且为E
E:nth-child(n)	匹配父元素中的第n个子元素，且为E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

3.3 伪元素选择器

帮助我们利用CSS创建新标签元素，而不需要HTML标签

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

• before和after创建的元素属于行内元素
• 新创建的这个元素在文档树中是找不到的，所以称为伪元素
• before和after必须有content属性
• 伪元素选择器权重与标签选择器一样，权重为1

3. HTML5有哪些语义标签？

• <header>
• <nav>：用作页面导航
• <aside>：当前页面或文章的附属信息部分；
• <section>：用于对网站或应用程序中页面上的内容分块；
• <footer>
• <article>