前端经典面试题合集（一）

1.谈谈变量提升

考察点：js基础知识，js执行机制，变量的提升
答：执行js代码时，会生成执行环境，在函数中的代码会产生函数执行环境，函数外的代码执行全局执行环境，我们看一个例子：

b() // call b   执行b函数，此时函数提升，已存入内存
console.log(a) // undefined 变量提升但未赋值

var a = 'Hello world'

function b() {
    console.log('call b')
}

此题需要注意，函数的变量提升直接将整个函数存入内存中，而变量则是只声明变量但是赋值undefined，我们来看下一题：

b() // call b second  
//执行b函数，此时相同函数会覆盖上一函数，函数提升优于变量提升。

function b() {
    console.log('call b fist')
}
function b() {
    console.log('call b second')
}
var b = 'Hello world'

同时还需注意，es6中let声明也会被js解析是进行变量提升，但是由于let的特性导致声明的变量不能在声明前使用。

2.函数的深拷贝

常用方式：JSON.parse(JSON.stringify(object)) 、 lodash中的cloneDeep函数
存在问题：
1.该方法会忽略undefined和symbol
2.不能够序列化函数
3.不能解决循环引用问题
接下来我们看看面试常考的手写递归函数进行深克隆。
我们先从一个对象的深克隆流程进行分析，
分析：首先，我们清晰对象中可以包含基础数据类型(string,number,null,undefined,bollen,function)和复杂数据类型(RegExp,Date,Synbol,Set,Map等等)，还有dom节点也可以存在于对象中，
因此，对于我们整个函数的设计，我们传入两个参数，一个为目标对象source，一个为我们需要复制到的目标变量target，未传时我们设计为undefined。
1.判断传入的target是否为undefined，如果是的话，我们判断source是不是dom节点，是的话，使用cloneNode方法进行复制，不是的话进行new source.constructor进行给target赋值source的相同类型。
2.通过Object.getOwnPrototyNames的方法获取到source的所有属性，包括不可枚举属性。
3.遍历我们获取到的属性，再次判断，有三种情况，第一种：dom节点，第二种：基本数据类型，第三种：复杂数据类型。
4.声明desc，通过Object.getOwnPropertypertyDescriptor获取到此属性的描述属性 ，第一种dom节点，使用cloneNode进行赋值，第二种设计一个数组，包含所有基本类型，如果使用Includes去处理typeof后的遍历的项返回值是true，那么则为基础类型，使用Object.defineProperty去复制对象的此条属性，第三种：进行switch判断，找到指定的类型进行相应的处理，我们都设置一个对象o，将desc的描述属性如果是true，我们就添加给o，如果get，set也是，则同样添加，最后通过Object.definePropertu加到target的此项复杂数据类型中，再去执行递归。
talk is cheap , show me the code

  function cloneObj(source, target) { //两个参数，第一个是目标对象，第二个是我们要将对象赋值的目标
    var list = ["string", "number", "null", "undefined", "bollen", "function"]
    if (target === undefined) {
      if (HTMLElement.prototype.isPrototypeOf(source)) {
        target = source.cloneNode(false)
      } else {
        target = new source.constructor() //将target赋值为和传入的source一样的类型
      }
    }
    //获取对象的所有属性，包括不可枚举的属性
    var names = Object.getOwnPropertyNames(source)
    for (var i = 0; i < names.length; i++) { //循环遍历我们获得的属性
      var desc = Object.getOwnPropertyDescriptor(source, names[i]) // 获得每一个属性的描述属性
      if (list.includes(typeof desc.value)) { //基本数据类型包括，则添加到target中
        Object.defineProperty(target, names[i], desc)
      } else { //不是基本属性
        var t;
        if (HTMLElement.prototype.isPrototypeOf(desc.value)) {
          t = desc.value.cloneNode(false)
        } else {
          switch (desc.value.constructor) {
            case RegExp:
              t = new RegExp(desc.value.source, desc.value.flags)
              break;
            case Date:
              t = new Date(desc.value)
              break;
            case Symbol:
              t = Symbol
              break;
            case Set:
              t = new Set(desc.value.values())
              break;
            case Map:
              t = new Map(desc.value.entries())
              break;
            default:
              t = new desc.value.constructor();
              break;
          }
        }
        var o = {}
        o.value = t
        desc.enumerable && (o.enumerable = desc.enumerable)
        desc.writable && (o.writable = desc.writable)
        desc.configurable && (o.configurable = desc.configurable)
        desc.set && (o.set = desc.set)
        desc.get && (o.get = desc.get)
        Object.defineProperty(target, names[i], o)
        cloneObj(desc.value, t)
      }
    }
    return target
  }