大家都知道‘不忘初心，方得始终’，但多少人知道‘初心易得，始终难守’。时代在变化，技术在发展，基础没变。学习新技术的时候，不应把基础落下。
1.前言
因为机缘巧合，让当了无数次面试者的我，当上了面试官，也和几个面试者交流过。既然要应对面试者，我就当然要准备面试题了，好让我大概知道面试者是什么水平。这个时候，也该详解下，自己的写的那些题目。因为题目是我自己写的，并不是网上摘的，所以知识点比较基础，也不全面。如果大家对面试题有什么建议，欢迎指点。
2.考点-面向对象
需求：定义‘我吃火锅’
面向过程的思想是：动作(我,吃火锅)
代码实现方面：
//面向过程
let eat=function(who,someThing){
console.log(`${who}吃${someThing}`);
}
eat('我','火锅');//我吃火锅
使用面向对象的方式改写一下这个实例。
这道题，只希望有一个面向对象的意思在这里就行了，我期待的答案是这样的。
let person={
name:'守候',
eat:function(someThing){
console.log(`${this.name}吃${someThing}`);
}
}
person.eat('火锅');
更好的方式看下面这篇文章：JavaScript：面试频繁出现的几个易错点。这里不展开讲。
3.考点-预解析
根据以下代码，写出结果
这道题我印象很深刻，因为是我在一年多以前，在Q群看到有人说直自己各种精通的时候，我就出这道题来提问，一抓一个准，至今那些各种精通的人，没一个回答出来的。即使是面试题，也有人掉坑。
之前发布一篇文章的时候，有提及过这个面试题，也被人骂过，大概的意思是：现在都什么年代了，ES都不知道更新多少版本了，谁还这么写代码？看到这个我并没有回应，也没打算和谁对撕。但是我脑子里想到的第一件事就是：以前，新闻有条微博说70%网友赞成数学退出高考，有人谈定回答：数学就是用来淘汰这70%人的。在这里我想说，虽然开发上这样写代码肯定会被批斗，但是面试题，考的不只是开发上遇到的问题，也有考一些基础知识。这道题就是其中之一。而且，现在我也觉得还有必要知道这个知识，还没到全民写 ES6 的时代，抛弃 ES5 的时代。
alert(a)
a();
var a=3;
function a(){
alert(10)
}
alert(a)
a=6;
a();
//------------分割线------------------
alert(a)
a();
var a=3;
var a=function(){
alert(10)
}
alert(a)
a=6;
a();
这个之前写文章有写过，现在赋值粘贴下。
考点其实就两个，第一变量声明提前，第二函数声明优先于变量声明！
下面我简单分析一下，
第一部分运行结果：
1.函数声明优先于变量声明，所以，刚开始，a就是function a(){alert(10)} ，就会看到这个函数。
2.a()，执行函数，就是出现alert(10)
3.执行了var a=3; 所以alert(a)就是显示3
4.由于a不是一个函数了，所以往下在执行到a()的时候， 报错。
第二部分运行结果：
1.underfind
2.报错
在之前说过，预解析是把带有var和function关键字的事先声明，但不会赋值。所以一开始是underfind，然后报错是因为执行到a()的时候，a并不是一个函数。
//函数表达式，和变量声明同等
var a=function(){
alert(10)
}
//函数声明，优于变量声明
function a(){
alert(10)
}
4.考点-事件委托
一个简单的需求，比如想给ul下面的li加上点击事件，点击哪个li，就显示那个li的innerHTML。这个貌似很简单！代码如下！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="ul-test">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
<script type="text/javascript">
var oUl=document.getElementById("ul-test");
var oLi=oUl.getElementsByTagName("li");
for(var i=0,len=oLi.length;i<len;i++){
oLi[i].addEventListener("click",function(){
alert(this.innerHTML)
})
}
</script>
</html>
问题在于：
1.for循环，循环的是li，10个li就循环10次，绑定10次事件，100个就循环了100次，绑定100次事件！
2.如果li不是本来就在页面上的，是未来元素，是页面加载了，再通过js动态加载进来了，上面的写法是无效的，点击li是没有反应的！
应该怎么解决以上问题？
在道题的考点就是事件委托，就是把事件绑在ul上面，之后的li就可以随便添加。代码如下
var oUl=document.getElementById("ul-test");
oUl.addEventListener("click",function(ev){
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
//如果点击的最底层是li元素
if(target.tagName.toLowerCase()==='li'){
alert(target.innerHTML)
}
})
但是有些面试者就是从vue的角度回答这个问题--利用v-for进行绑定。虽然我们公司的项目是使用vue，这样说也没错，但是这道题我没提及到vue，说vue的，反而就是一个扣分项了。
5.考点-DOM操作
比如有一个需求，往ul里面添加10个li，如下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="ul-test">
</ul>
</body>
<script type="text/javascript">
var oUl=document.getElementById("ul-test");
for(var i=0;i<10;i++){
var oLi=document.createElement('li');
oLi.innerHTML=i;
oUl.appendChild(oLi);
}
</script>
</html>
问题：这里相当于操作了10次DOM，有什么方案，减少DOM的操作次数？可写代码简单说明。
这道题，有几个人还是从vue的角度来解决问题（v-for，data），虽然这样不能说错，但是我题目没提及vue的任何东西。考点就是利用innerHTML或者文档碎片的形式。
代码如下
innerHTML
var oUl=document.getElementById("ul-test");
//定义临时变量
var _html='';
for(var i=0;i<10;i++){
//保存临时变量
_html+='<li>'+i+'</li>'
}
//添加元素
oUl.innerHTML=_html;
文档碎片-createDocumentFragment
var oUl=document.getElementById("ul-test"),_frag = document.createDocumentFragment();
for(var i=0;i<10;i++){
var oLi=document.createElement('li');
oLi.innerHTML=i;
//把元素添加进文档碎片
_frag.appendChild(oLi);
}
//把文档碎片添加进元素
oUl.appendChild(_frag);
6.考点-对象深拷贝
写出一个函数，实现对，对象的深拷贝
要求实现一个函数clone。
let obj={
name:'小明',
age:24
}
let obj1=clone(obj);
修改obj1，不会影响到obj的值。
这道题，在obj上面，我故意只写一层，对象里面没有嵌套数组或对象，就是想看下面试者能不能往深处想一下。结果面试者都踩坑了。但是可以理解，毕竟大家都是针对题目而论。
基本上回答都是类似下面这样
function clone(object){
let _obj={}
for(let key in object){
_obj[key]=object[key];
}
return _obj;
}
let obj1=clone(obj);
//-------------------或者-------------
function clone(obj){
let _obj=Object.assign({},object);
return _obj;
}
let obj1=clone(obj);
这个方案，目的是达到了，但是如果obj里面的属性，嵌套着对象或者数组，这个就有问题了。所以理想的解决方案应该是这个。
function clone(object){
let _obj=JSON.parse(JSON.stringify(obj))
}
这种方案，如果需要属性值是函数或者是undefined，就会被过滤掉。保险的做法是下面这样。原理也很简单，就是逐个遍历，如果检测到属性值是时引用类型就用当前属性进行遍历。
function clone(obj){
if(!obj&& typeof obj!== 'object'){
return;
}
var newObj=obj.constructor===Object?{}:[];
for(var key in obj){
newObj[key] =(obj[key]&&typeof obj[key]==='object')?clone(obj[key]):obj[key];
}
return newObj;
}
7.其它考点
其余几道题都是比较笼统的题目，没有唯一的解决方案，这里就不统一回答了！
1.如果设计中使用了非标准的字体，你该如何去实现？
图片，字体图标代替，如果是比较小的英文字体可以使用css3的@font-face。
2.在开发项目上，知道那些优化的方式，提升性能，减少页面加载时间，代码质量，代码可读性等方面
性能优化-压缩代码，懒加载，预加载，合并请求，小图片转换base64编码，资源按需加载等。
代码质量优化-命名有意义，适当的注释，避免巨大函数，避免对象强耦合，代码逻辑清晰等。
3.列举Es6，常用的一些新特性。
参考资料如下：
ECMAScript 6 入门
30分钟掌握ES6/ES2015核心内容（上）
30分钟掌握ES6/ES2015核心内容（下）
实例感受-es6的常用语法和优越性
ES6 Promise 用法讲解
4.Div+css排版的时候，从页面渲染和代码可读性的角度，应该注意些什么？
标签语义化，class和id命名有意义并且命名统一规范，css避免深嵌套（3级就得注意），避免@import，!important，和*通配符，避免行内样式，在head引入css等。
5.说下自己对模块化开发的理解，以及模块化开发的好处。
提高开发效率，有利团队协同开发，
避免全局变量污染，命名冲突，
方便代码的复用维护等。
8.小结
面试题就是这10道，我自己的解决方案也说完了。虽热我们公司的技术栈用的主要是vue，webpack这一些，我面试交流的时候，也会问相关的问题，但是我在面试题里面我不出关于vue，webpack这些题目，就问文章这些题目，就是想知道面试者的基础如何（因为现在的行情，很多人都是注重学习热门的框架，库，工具等，却把基础落下了）。基础好的话，框架不难上手，但是基础不牢，就熟悉两三的框架和一些构建工具，以后技术转型可能会有阻力。现在前端的发展很快，技术很杂，但是基础一直没变。建议大家在学习新技术的同时，不要忘记巩固基础。
最后，如果大家对面试题有什么解法建议或者建议出什么题型，欢迎指点。
-------------------------华丽的分割线--------------------
想了解更多，关注关注我的微信公众号：守候书阁
