朋友发来了最近面试的一些题目，下面谈谈我对这些面试题的理解。
1.call和apply的区别和用途
它们的作用都是将函数绑定到另外一个对象上去运行，仅在定义参数方式上有区别，call的第二个参数可以是任意类型，apply的第二个参数只能是数组。
2.闭包的理解
闭包就是一个函数引用另一个函数的变量。就是一个函数里定义子函数，子函数可以访问父函数的变量，并且这个变量会始终保存在内存中。所以闭包不能滥用，否者会造成网页性能问题，ie中可能会导致内存泄漏，所以在退出函数前，将不必要的局部变量全部删除。
function a(){
var n=23;
function b(){
alert(n)
}
return b;
}
var result=a();
result(); //233.对prototype的理解,如何用
js中每个对象都有prototype属性，解释为返回对象类型原型的引用。
prototype对象是实现面向对象的一个重要机制,
prototype表示了一个类的属性的集合，通过new来生成一个类的对象时，prototype对象的属性就会成为实例化对象的属性。
原型对象上的所有属性和方法，都会被对象实例所共享。
原型对象的作用，就是定义所有对象实例所共享的属性和方法。
prototype,对于构造函数来说，它是一个属性，对于对象实例来说，它是一个原型对象。
4.javascript的方法都有什么
1.类方法
2.对象方法
3.原型方法
function People(name){
this.name=name;
//对象方法
this.showName=function(){
alert("my name is "+this.name);
}
}
//类方法
People.Run=function(){
alert("i can run");
}
//原型方法
People.prototype.add=function(){
alert("add people");
}5.调错的思路
首先，看js是否成功的执行进来，我一般用console.log在控制台输出；其次，看是否存在逻辑问题，变量问题，参数问题。可以用断点调试排查。
6.node.js用http模块输出helloworld
// 引入http模块
var http=require('http');
// 创建server，指定处理客户端请求的函数
http.createServer(function(req,res){
res.writeHead(200,{ 'Content-Type': 'text/plain' });
res.write('Hello World!');
res.end();
}).listen(1338);
console.log("成功啦");7.canvas绘制长方形
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "yellow";
ctx.fillRect(50, 50, 200, 100);//坐标，宽高8.用js获取1-10的随机数，放入一个数组，然后排序。
function sortArr(num,sortnum){//sortnum为1或者-1，1为生序排列，-1为降序排列
var arr=[];
for(var i=0;i<num;i++){
var item=Math.floor(Math.random()*10+1);
arr.push(item);
}
if(sortnum>=1){
return arr.sort(function(a,b){
return a-b;
})
}else{
return arr.sort(function(a,b){
return b-a;
})
}
}
console.log(methord(5,0))9.click的绑定方式有几种都是什么
一共有三种
1.在DOM元素中直接绑定
<input onclick='add()' type="button" value="确定">2.在js代码中绑定
elementObject.onclick=function(){}
$(".div").click(function(){})
$(".div).on("click",function(){})
$(".div").bind("click",function(){})
$('a').live('click', function(){});3.绑定事件监听函数
document.getElementById("btn").addeventlistener("click",clickone,false);10.都用过什么版本控制器
只用过svn和git
11.前端框架用过哪些
jquery,Bootstrap,Amaze UI，Node.js,d3.js,highcharts.js,echart.js等
12.打包工具都用过什么
webpack
13.实现：左边自适应宽度，右边固定宽度200px,两个部分等高，最小高度200px
<style>
.outer{display: table;width: 100%;min-height: 200px;}
.left{background-color: yellow;display: table-cell;}
.right{width: 200px;background-color: #ff0000;display: table-cell;}
</style>
<div class="outer">
<div class="left">左侧内容<br>左侧内容<br>左侧内容<br>左侧内容</div>
<div class="right">右侧内容</div>
</div>14.BOM对象
浏览器对象模型，核心对象是window,包含frames,history,location,navigator,screen.BOM提供了浏览器显示内容与浏览器窗口进行交互的对象。
console.log([]==false);//true
console.log({}==false);//false
console.log({}==true);//false对象== 布尔类型, 对象先转换为字符串(toString()),然后把字符串转换为数字(Number() "" --> 0), 布尔类型也转换为数字(true是1, false是0); 最后让两个数字比较
15.XSS
跨站脚本攻击，是web程序中常见的漏洞。其原理是攻击者向有XSS漏洞的网站中输入(传入)恶意的HTML代码，当其它用户浏览该网站时，这段HTML代码会自动执行，从而达到攻击的目的。如，盗取用户Cookie、破坏页面结构、重定向到其它网站等。
xss防御
1.对用户的输入进行处理，只允许输入合法的值
2.不能对用户数据进行严格过滤的时候，对标签进行转换
< => < > => > & => & " => " 空 =>
16.事件响应模型target currentTarget
target在事件流的目标阶段,currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的，而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件活动的对象（一般为父级）。
17.事件流怎么实现的
事件从响应到触发一共分为三个阶段，捕获阶段，目标阶段和冒泡阶段。大部分浏览器都采用事件冒泡流，即事件从里向外执行，例如body里有个div，div里有个button,点击button,那么执行事件的顺序就是button的事件，div的事件，body的事件。还有一种"事件捕获流"，是从外往里执行。
18.数组的排序、数组的合并
数组用sort进行排序，用concat进行合并
19.原型链
js在创建对象的时候，都有一个叫做_proto_的内置属性，用于指向创建它的函数对象的原型对象prototype。我们把有_proto_串起来的直到Object.prototype._proto_为null的链叫做原型链。
var person=function(name){
this.name=name;
}
person.prototype.getName=function(){
return this.name;
}
var zs=new person("zhangsan");
zs.getName(); //zhangsan
zs._proto_===person.prototype
person.prototype._proto===Object.prototype
Object.prototype._proto==null
//上面就是原型链20.jQuery链式是怎么实现的
链式操作实际上是通过对象上的方法最后return this把对象在返回回来，然后接着继续调用方法。
function Person(){
}
Person.prototype={
setName:function(name){
this.name=name;
return this;
},
getName:function(){
return this.name;
},
setAge:function(){age}{
this.age=age;
return this;
}
}
var people=new Person();
people().setName("张三").setAge(18).getName();21.轮播图原生js怎么写，怎么处理划屏时会出现的空白页情况
.#outer{ width:500px; height:300px; margin:50px auto;}
#left,#right{ float:left; width:50px; height:50px; text-align:center; line-height:50px; font-size:20px; font-weight:bold;
margin-top:125px; display:inline; background:#ccc; cursor:pointer;}
#dancer{ width:300px;height:300px; float:left; overflow:hidden; position:relative;}
#inner{ position:absolute; left:0px; top:0px; width:1500px; height:300px;}
#inner div{ float:left; width:300px; height:300px; text-align:center; line-height:300px; background:#F00;}
<div class="box">
<div id="left">《</div>
<div class="out"><div id="inner">
<div>111</div>
<div style="background-color:#3F0;">222</div>
<div style="background-color:#600;">333</div>
<div style="background-color:#F00;">444</div>
</div>
</div>
<div id="right">》</div>
</div>
var timer = "null";
function animate(ele, target) {
window.clearTimeout(timer);
var nspeed = (target - ele.offsetLeft) / 8;
nspeed = nspeed > 0 ? Math.ceil(nspeed) : Math.floor(nspeed);
function move() {
if (ele.offsetLeft > target) { //左移动
if (ele.offsetLeft + nspeed < target) { //过界
ele.style.left = target + "px";
} else {
ele.style.left = ele.offsetLeft + nspeed + "px";
}
} else if (ele.offsetLeft < target) { //右移动
if(ele.offsetLeft+nspeed>target){
ele.style.left = target + "px";
}else{
ele.style.left = ele.offsetLeft + nspeed + "px";
}
}
timer=window.setTimeout(move,30);
}
move();
}
var oInner=document.getElementById("inner");
var oCopy=oInner.getElementsByTagName("div").item(0).cloneNode(true);
oInner.appendChild(oCopy);
oInner.style.width=oInner.clientWidth+oCopy.clientWidth+"px";
var len=oInner.getElementsByTagName("div").length;
var left=document.getElementById("left");
var right=document.getElementById("right");
var step=0;
var autotimer="null";
function autoMove(){
window.clearTimeout(autotimer);
step++;
if(step==len){
oInner.style.left = 0;
step = 1;
}
animate(oInner,-200*step);
autotimer=window.setTimeout(autoMove,2000);
}
window.setTimeout(autoMove,2000);
left.onclick=function(){
window.clearTimeout(autotimer);
step++;
if(step==len){
oInner.style.left = 0;
step = 1;
}
animate(oInner,-200*step);
autotimer=window.setTimeout(autoMove,2000);
}
right.onclick=function(){
window.clearTimeout(autotimer);
step--;
if(step==-1){
oInner.style.left = "-800px";
step = len-2;
}
animate(oInner,-200*step);
autotimer=window.setTimeout(autoMove,2000);
}
点击时需要清除自动动画的timer来解决划屏的空白问题
22.盒子模型box-sizing,border-box
设置了这个属性后，盒子的大小包含宽度，border和padding的值。便于排版和计算
23.let和var区别
1.var定义的变量是全局变量或者函数变量，而let定义的变量是块级变量。
2.let声明的变量不能重复声明。
3.补充一下const,const必须初始化，并且值为常量，声明以后不能修改
24.两个相同顺序的不同数组，如何合并成一个同序的数组，两个数组从大到小排序合并
我的理解是先数组合并concat,然后去重，然后sort排序
function contactArr(arra,arrb){
var arr=arra.concat(arrb);
for(var i=0;i<arr.length-1;i++){
for(var j=i+1;j<arr.length;){
if(arr[i]==arr[j]){
arr.splice(j,1);
}else{
j++
}
}
}
arr.sort(function(a,b){
return b-a;
})
return arr;
}
var a=[1,2,3,4,5];
var b=[1,3,4,5,6,7];
var c=contactArr(a,b);
console.log(c); //7,6,5,4,3,2,125.用过的js、jQuery、css框架
很多，能想起来的如,bootstrap，jquery-easyui.js、echarts.js、d3.js、hightcharts.js、fullpage.js、swiper.js、jquery.nicescroll.js、tinyscrollbar.js、圆形进度条插架，日期插架、瀑布流插架等
26.样式，选择器、优先级
！important>行内样式>id>class>标签
27.手机触发的事件
touchstart,touchmove,touchend,touchcancel
28.可视屏幕宽高
document.documentElement.clientWidth和ducument.documentElement.clientHeight
29.滚动区域宽高
document.body.scrollWidth和document.body.scrollHeight
30.ajax异步结果处理
请求失败做对应的处理，请求成功看返回什么数据格式，然后在做对应的处理
31.手机适配
1.页面头部写
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
2.宽度尽量都使用百分比
3.用相对大小字体
4.运用css的@media定义不同的样式规则
5.图片自适应,最大百分百 max-width:100%
32.rem和em的区别
em相对于自己的字体大小，如果自己的字体大小没有定义，那么继承自父级。rem相对于html元素的字体大小
33.函数变量声明提升
变量的声明提升，在函数内部会提升到函数顶部，但是赋值还是在原来的位置
var a="a";
function a(){
console.log(a); //undefined
var a="b";
console.log(a);//b
}
//函数里面的变量a跟外面的变量a其实不是一码事如果是下面这样，结果就大不一样了
var a="a";
function a(){
console.log(a); //a
a="b";
console.log(a);//b
}
//函数里面的变量a跟外面的变量a是一码事函数声明也会提升，看下面例子
var getName = function(){
console.log(2);
}
function getName (){
console.log(1);
}
getName(); //2
代码解析
var getName; //变量声明提升
function getName(){ //函数声明提升到顶部
console.log(1);
}
getName = function(){ //变量赋值依然保留在原来的位置
console.log(2);
}
getName(); // 最终输出：2
34.typeof各种空
console.log(typeof([]));//object
console.log(typeof({}));object35.如何判断null和undefined
用typeof判断，typeof(null)返回Object,typeof(undefined)返回undefined
36.this指什么？
1.当在全局作用域下this指向window
2.对象方法调用时this指向调用该方法的对象
3.使用new调用构造函数时，this指向新生成的对象
4.内部函数，内部嵌套函数this指向的是window
5.call,apply里的this指向绑定的对象
6.事件绑定，直接在页面元素上绑定，this指向window.在js中绑定，除了attachEvent绑定的事件方法的this指向window,其它this指向绑定事件的element。
37.宽高等比例用纯css
通过padding-bottom实现，如下是宽高1:1，如果想要1:2，对应padding-bottom的值为42%
<style>
.item {
float: left;
width: 21%;
margin: 10px 2%;
height: 0;
padding-bottom: 21%;
background-color: #dbe0e4;
}
</style>
<div class="outer">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>38.子元素浮动怎么把父元素撑开，不能用浮动和overflow
.outer:after{
content: "";
height: 0px;
display: block;
clear: both;
}39.如何实现垂直居中，多行文字单行文字，有图片的文字
//多行文字垂直居中单行文字垂直居中有图片的文字垂直居中
.div{display: table;width: 100%;height: 300px;}
.div span{display: table-cell;vertical-align:middle;}.div{width:100%;height: 300px;display: flex;flex-direction: column;justify-content: center;align-items: center;}//仅单行文字垂直居中
.div{width: 100%;height: 30px;line-height:30px;}40.flex
flex弹性布局的父元素具备的属性有flex-direction(决定子元素的排列方向),flex-wrap(决定子元素是在一行上还是可以换行),flex-flow(前俩个的简写),justify-content(决定横向的对齐方式),align-items(决定竖向的对其方式),align-content
子元素的属性有order,flex-flow,flex-shrink,flex-basis,flex,align-self
41.盒模型
盒子模型包含元素content,padding,border,margin。一个盒子如果不设置box-sizing,通常设置的宽度仅仅是content的宽度，而盒子的实际宽度要加上border和padding。如果设置box-sizing:border-box,那么设置的宽度就包含了border和padding
42.http状态，协议
http协议是客户端与服务器端的一种数据通信的约定和规则。
常用状态码200请求成功，404请求资源不存在，500服务器错误
43.缓存有哪些，有什么区别？
缓存分为私有缓存和公有缓存。
私有缓存是针对客户端，存放在用户的电脑的磁盘和内存中。
公有缓存指服务器缓存。
44.JavaScript scoping（js作用域）
函数的作用域是在函数内部，即在函数内声明的变量只能在函数内部或者函数嵌套的任意函数体内可用。
变量的作用域，没有用var声明的变量可用在全局使用。用let声明的变量只能在对应的代码块里使用。
45.如何理解js的面向对象模式
js中的对象就是名值对的集合，面向对象的特点是封装，继承和多态。主要通过原型链实现继承。
46.如何理解js的设计模式
设计模式是一套被反复使用的，多数人知晓的，经过分类编目的，代码设计经验的总结。使用设计模式是为了可重用代码，让代码更容易被他人理解，保证代码的可靠性。设计模式的目的是使代码可重复利用，提高系统开发进度。
47.如何理解浏览器的事件机制
首先，要从事件流说起，事件流分为三个阶段，捕获阶段，处于目标阶段和冒泡阶段。大部分浏览器都遵循这个标准，但是ie浏览器的事件流只有2个阶段，即处于目标阶段和冒泡阶段。
其次，来说事件。事件包含DOM0级事件和DOM2级事件。DOM0级事件是直接绑定在元素上，在冒泡阶段执行，多次注册时只执行最后一次注册的。DOM2级事件可以多次注册，并且可以设置在捕获阶段注册事件（非ie）。
var EventUtil = {
addEventListener: function (element, type, callback) { //注册事件，因为浏览器的兼容性考虑，注册事件一般都是注册在事件的冒泡阶段
if (element.addEventListener) {
element.addEventListener(type, callback, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, callback);
} else {
element['on' + type] = callback;
}
},
removeEventListener: function(element, type, callback) { //撤销事件
if (element.removeEventListener) {
element.removeEventListener(type, callback, false);
} else if (element.detachEvent) {
element.detachEvent('on' + type, callback);
} else {
element['on' + type] = null;
}
}
};
48.div是谁的实例化
应该是HTMLDivElement
49.promiss怎么用
var promise = new Promise(function(resolve, reject) {
$.ajax({
type: "get",
url: url,
dataType: "json",
data: data,
success: function (data, status) {
resovled(data.data);
},
error: function (error) {
rejected(error);
}
})
promise.then(function(value) {
// success
}, function(value) {
// failure
});
50.birdge接口怎么实现
51.CDN
52.angular2数据绑定怎么实现
53.[ng-model]为什么实现双向数据绑定，调用了哪个H5的原生属性，change
54.observe和promise
55.浏览器性能提升有很多方法，为什么使用以下几种，以及除此之外还有那些？（1）静态文件合并（2）静态文件放到多个域名下（3）http缓存
56.js引擎，如何动态渲染数据
57.app打包工具
58.router如何使用
59.如何封装一个组件
60.封装的组件怎么调用，
61css事件穿透
设置样式pointer-events: none;
62.js的深浅拷贝
浅拷贝只复制对象索引值，新旧对象共享一块内存，深拷贝会创建一个一模一样的对象，不共享内存，修改新的不会改变原对象63.组件间的传值
64http协议，tcp三次握手，状态码
65浏览器输入地址到中间呈现的过程跨modu对象le的如何调用
6419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
