前端基础开发面试准备（1）
1、JSP中call和apply的作用以及区别是什么？
答：（1）call和apply可以改变函数中this的指向，this默认指向object Window。
通过call和apply，我们可以实现对象继承。示例：
var Parent = function(){
this.name = "yjc";
this.age = 22;
}
var child = {};
console.log(child);//Object {} ,空对象
Parent.call(child);
console.log(child); //Object {name: "yjc", age: 22} # 改变的是child的this指向
以上实现了对象的继承。
（2）功能相同，区别是参数的传递方式不同，在使用call（）方法时，传递给函数的参数必须逐个列举出来，apply以数组的方式传递参数。
举例：
function test(a,b){
alert ( '我的this是'+this, '我的a是'+a + '我的b是'+b);
}
test.call('abcd',1,2) ;
test.apply('efgh',[1,2]) ;
参考文档：
https://www.nowcoder.com/test/question/done?tid=13738746&qid=15347#summary
2、position有几个属性？
答：共有5个属性，position 属性规定元素的定位类型。
（1）absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
（2）fixed：生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
（3）relative：生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素，所谓相对定位到底是什么意思呢，是基于哪里的相对呢？我们需要明确一个概念，相对定位是相对于元素默认的位置的定位。
（4）static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
（5）inherit：规定应该从父元素继承 position 属性的值。
参考文档：http://www.w3school.com.cn/cssref/pr_class_position.asp
3、行内元素和块状元素区别？
答：（1）块状元素独占一行，默认情况下，宽度自动填满父元素宽度 ，margin和padding的上下左右均对其有效
（2）行内元素默认不分行 ，行内元素宽高不能由css决定，而是由内容决定的
（3） 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果（水平方向有效，竖直方向无效）。
（4）可以使用display:block;或display:inline;实现块级元素和行内元素的相互转换
参考文档：https://www.cnblogs.com/ljwk/p/7090320.html
4、谈谈js的事件冒泡机制，如何去阻止事件冒泡？事件默认行为是什么？
答：（1）事件冒泡的定义：在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
（2）事件冒泡的作用：事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
（3）阻止事件冒泡（简单来说，就是阻止父元素也进行子元素一样的操作），如果是IE浏览器使用对象的cancelBubble方法，如果是非IE浏览器采用event对象的stopPropagation( )方法；
（4）事件的默认行为是指浏览器在事件传递和处理完成后自动执行的与该事件关联的默认动作。IE浏览器使用returnValue false来阻止默认事件，非IE浏览器使用event对象的preventDefault( )方法。
参考文档：https://www.cnblogs.com/ycc-020/p/6078968.html
5、讲讲promise和settimeout执行顺序？
答：Tasks按照队列的形式先进先执行，在两个相邻的Tasks之间，浏览器可能会出现重新渲染
Microtasks也是按照队列的形式先进先执行，它被执行的时间点有两个： ① 在每一次 Task 结束时;② 在每个回调之后执行（只要没有特殊需要插入执行的代码）
参考文档：http://appian.me.meckodo.com/#/article?id=20171015
6、箭头函数的特点有哪些？箭头函数能否做构造函数？
答：（1）语法简洁，能够写出漂亮的单行函数；内置return语句，当函数只想返回某个东西的时候，可以不必显现地写出return；this关键字无需重新指定，这在进行事件绑定时会很有帮助。对 this 的关联。函数内置 this 的值，取决于箭头函数在哪儿定义，而非箭头函数执行的上下文环境。
（2）new 不可用。箭头函数不能使用 new 关键字来实例化对象，不然会报错。所以箭头函数不能做构造函数
（3）this 不可变。函数内置 this 不可变，在函数体内整个执行环境中为常量。箭头函数中的this关键字，指向的是定义时的对象，而不是使用时的对象。即虽然在以往的函数中，this所指的对象只有在调用的时候才知道是谁，但是在箭头函数中，它是固定不变的
（4）没有arguments对象。更不能通过arguments对象访问传入参数。只能使用显式命名或其他ES6新特性来完成。
参考文档：https://www.cnblogs.com/bfc0517/p/6706498.html
7、说一下快速排序的优点和缺点以及时间复杂度，为什么是那么多？
答：
var times=0;
var quickSort=function(arr){
//如果数组长度小于等于1无需判断直接返回即可
if(arr.length<=1){
return arr;
}
var midIndex=Math.floor(arr.length/2);//取基准点
var midIndexVal=arr.splice(midIndex,1);//取基准点的值,splice(index,1)函数可以返回数组中被删除的那个数arr[index+1]
var left=[];//存放比基准点小的数组
var right=[];//存放比基准点大的数组
//遍历数组，进行判断分配
for(var i=0;i<arr.length;i++){
if(arr[i]<midIndexVal){
left.push(arr[i]);//比基准点小的放在左边数组
}
else{
right.push(arr[i]);//比基准点大的放在右边数组
}
console.log("第"+(++times)+"次排序后："+arr);
}
//递归执行以上操作,对左右两个数组进行操作，直到数组长度为<=1；
return quickSort(left).concat(midIndexVal,quickSort(right));
};
console.log(quickSort(arr));
（2）特点：对于分治算法，当每次划分时，算法若都能分成两个等长的子序列时，那么分治算法效率会达到最大。也就是说，基准的选择是很重要的。选择基准的方式决定了两个分割后两个子序列的长度，进而对整个算法的效率产生决定性影响。特点是快速，常用
（3）缺点是需要另外声明两个数组，浪费了内存空间资源。
8、top、padding-top、margin-top的区别？当margin-top、padding-top的值是百分比时，分别是如何计算的
答：（1）padding-top、margin-top的区别：一个是内边距，一个是外边距。top是容器距离页面边框的距离，而margin-top是容器距离另一个容器的距离；而padding-top是内容距离容器边界的距离。
（2）margin-top是相对最近父级块元素的width，padding-top也是相对最近父级块元素的width。
参考文档：http://blog.csdn.net/weixin_37219302/article/details/72896392
9、快速排序为什么不稳定？
答：（1）稳定的排序就是相等两个数，排序后其位置保持不变
（2）如果对基准元素的选择不合理，对于小于等于基准的元素放在左边，大于基准的元素放要在右边，如果本来基准元素的位置在要比较的元素之前，但是它们的数值相同，在这样一次交换后，可能造成位置进行交换，那么这不是我们期望的结果。
参考文档：https://zhidao.baidu.com/question/131953153.html
10、有一个元素width为300px,height为300px，如何实现水平垂直居中？
答：（1）子元素top,left,right,bottom均为0，为fixed是相对于浏览器垂直水平居中，margin是auto
<style type="text/css">
.img-center{
width: 300px;
height: 300px;
background-color: gold;
position: relative;
}
.son{
width: 300px;
height: 300px;
background-color: green;
margin: auto;
position: fixed;
left: 0;
right:0;
top:0;
bottom: 0;
}
</style>
</head>
<body>
<div class="img-center">
<div class="son">
this is a test
</div>
</div>
</body>
（2）第二种，margin-left和margin-top设为负值的一半，left和top占50%
（3）使用文字行高line-height
参考文档：http://www.jb51.net/css/502291.html
11、说说JS的继承方式？
答：（1）原型链继承：每创建一个函数，该函数就会自动带有一个 prototype 属性。该属性是个指针，指向了一个对象，我们称之为 原型对象，原型链继承通过改变指针的方向
function Show(){
this.name="run";
}
function Run(){
this.age="20"; //Run继承了Show,通过原型，形成链条
}
Run.prototype=new Show();
var show=new Run();
alert(show.name)//结果：run（2）构造函数继承（类继承）：通过改变this的作用环境，使得子类本身具有父类的各种属性。
参考文档：https://www.cnblogs.com/sarahwang/p/6870072.html
12、说一下JS中，this用在什么地方？
答：（1）在全局范围内，this指向全局对象（浏览器下指window）
（2）对象进行函数调用时，this指向当前对象（谁调用这个函数，函数里的this就指向谁）
（3）使用new实例化对象时，this指向新创建的对象
13、id选择器和class类选择器有何区别？
答：（1）id在文档中只能使用一次，而class可以多次使用
（2）id比class具有更高的样式优先级
（3）一个元素只能有一个id属性值，却可以拥有多个class属性值
（4）id和class都能使用hover伪类
参考文档：https://www.nowcoder.com/test/question/done?tid=14629750&qid=55723#summary
14、CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器的可视范围内？display: none和visibility:hidden有何区别？
答：（1）visibility:hidden会保留元素的空间，display: none不为被隐藏的对象保留其物理空间；
（2）visibility:hidden;所占据的空间位置仍然存在,仅为视觉上的完全透明；简单理解就是display:none可以理解为看不见摸不着，visibility：hidden可以理解为看不见摸得着
（3）visibility:hidden只会出发repaint，repaint发生更改时，元素的外观被改变，且在没有改变布局的情况下发生，如改变outline,visibility,background color，不会影响到dom结构渲染。
（4）display:none才会产生reflow，与repaint区别就是他会影响到dom的结构渲染，同时他会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。
参考文档：https://www.nowcoder.com/test/question/done?tid=14629750&qid=44713#summary
15、jquery的bind和unbind事件？
答：bind事件一般用于click和mouseover时候触发预定义的函数，而unbind用于取消之前的事件效果，保证第二次不会发生
$('#btn').bind('click mouseover',function(){
alert('hello!');
$(this).unbind('mouseover');
})
16、height和行高有什么区别？
答：（1）height一般指的是容器的整体高度，line-height一般指的是布局里面的一段文字，上下行之间的高度
（2）heigh(高度)：一般用来设置文字外围的DIV容器。line-height(行高)：一般针对字体来设置，如果一行文字在DIV里面，且行高等于高度的话，则文字会垂直居中。
17、javascript原始数据类型有哪些？
答：原始数据类型有number,string,null,boolean,undefined，后来加了一种类型叫做object
参考文档：https://www.nowcoder.com/test/question/done?tid=14954341&qid=55748#summary
18、表单提交和Ajax提交有和区别？
答：（1）Ajax在提交、请求、接收时，都是异步进行的，网页不需要刷新；Form提交则是新建一个页面，哪怕是提交给自己本身的页面，也是需要刷新的；
（2）Ajax在提交时，是在后台新建一个请求；Form却是放弃本页面，而后再请求
（3）Ajax在提交、请求、接收时，整个过程都需要使用程序来对其数据进行处理；Form表单提交时，却是根据你的表单结构自动完成，不需要代码干预。
（4）Ajax必须要使用JS来实现，不启用JS的浏览器，无法完成该操作；Form却是浏览器的本能，无论是否开启JS，都可以提交表单；
参考文档：http://www.cnblogs.com/zhujiabin/p/4901167.html
19、解释下浮动和它的工作原理？清除浮动的技巧
答：浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
（1）方法一：使用带clear属性的空元素，在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。
（2）方法二：使用CSS的overflow属性，给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
（3）方法三：给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。
（4）方法四：方法四：使用邻接元素处理，什么都不做，给浮动元素后面的元素添加clear属性。
（5）方法五：使用CSS的:after伪元素，给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
参考文档：https://segmentfault.com/a/1190000004865198
20、浮动元素的特性有哪些？
答：（1）浮动元素有左浮动(float:left)和右浮动(float:right)两种
（2）浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来
（3）相邻浮动的块元素可以并在一行，超出父级宽度就换行
（4）浮动让行内元素或块元素自动转化为行内块元素
（5）浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果
（6）父元素内整体浮动的元素无法撑开父元素，需要清除浮动
（7）浮动元素之间没有垂直margin的合并
此篇文章，还有20道题目，在我的面经中，详情看下面。
我会持续更新面试题目，包括linux，前端(vue,jquery,css)、python、mysql和redis的面经题目，后期加入golang。可以加我qq 2093905919或者微信 18828004657，跟我聊聊。（注：可以分享一部分面试题目，觉得可以的话，剩下的全部面试题目
多年经验，非常多而广的题目，适合突击面试复习，适合运维工程师，python工程师，运维开发，甚至前端开发（vue,asp,jquery）等等），需要打赏200元，绝对物超所值）
