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
}