前端面试可能问的问题

转自CSDN雄领IT

iframe有哪些优点和缺点：

缺点：
① iframe会阻塞主页面的Onload事件；
② 搜索引擎的检索程序无法解读这种页面，不利于SEO;
③ 会影响页面的并行加载。
什么是并行加载：同一时间针对同一域名下的请求。一般情况，iframe和所在页面在同一个域下面，而浏览器的并加载的数量是有限制的。
怎样解决：使用js动态给iframe的src加载页面内容，示例代码如下

 <iframe id="fram"></iframe>
 document.getelementbyid("fram").src="a2.html" 

优点：
1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
5.重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)
6.方便制作导航栏

盒子模型你是怎么理解的？

1）盒子模型有两种，W3C和IE盒子模型

（1）W3C定义的盒子模型包括margin、border、padding、content ，元素的width=content的宽度

（2）IE盒子模型与W3C的盒子模型唯一区别就是元素的宽度，元素的width=content+padding+border

回答：
我个人认为W3C定义盒子模型与IE定义的盒子模型，IE定义的比较合理，元素的宽度应该包含border（边框）和padding（填充），这个和我们现实生活的盒子是一样的，W3C也认识到自己的问题了，所以在CSS3中新增了一个样式box-sizing，包含两个属性content-box 和 border-box。
（1） content-box 元素的width=content+padding+border
（2） border-box 元素的width=width（用样式指定的宽度）
（3）对于行级元素，margin-top和margin-bottom对于上下元素无效，margin-left和margin-right有效
（4）对于相邻的块级元素margin-bottom和margin-top 取值方式
1） 都是正数： 取最大值

距离=Math.max(margin-botton,margin-top)

2） 都是负数： 取最小值

距离=Math.min(margin-botton,margin-top)

3）上面是正数，下面是负数或者 上面是负数，下面是正数： 正负相加

距离=margin-botton+margin-top

元素定位有哪些？

position为元素定位属性，包含以下属性值

1. absolute绝对定位

相对位置为父元素为非static的第一个父元素进行定位。

2. fixed 固定定位（老IE6不支持）

相对于浏览器窗口进行定位。

3. relative相对定位

相对于其正常（默认布局）位置进行定位。

加分项：

1.所有的定位如果left、top、right、bottom属性都为默认值，则为默认定位
2.absolute定位会脱离文档，浮动起来，多个层重叠可以使用z-index属性改变层叠顺序
3.absolute定位忽略padding，相对位置为相对定位容器的左上角内边框

样式导入有哪些方式？

样式导入方式

• link
• import

使用方式

• link的使用

 <link href="index.css" rel="stylesheet">

• import的使用

<style type="text/css">
 @import "index.css";
 </style>

不同点
link除了引用样式文件，还可以引用图片等资源文件，而import只引用样式文件
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" sizes="any" mask href="//www.baidu.com/img/baidu.svg">
<link rel="search" type="application/opensearchdescription+xml" href="/content-search.xml" title="百度搜索" />
兼容性不同，link不存在兼容性的问题，import在IE5以上支持，是css2.1新增的
在样式表文件可以使用import导入其它的样式表文件，而link不可以
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link支持使用Javascript控制DOM去改变样式；而@import不支持。

加分项

import的写法比较多
@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) //Windows NS4, Macintosh NS4不识别
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url("style.css") //Windows NS4, Macintosh NS4不识别
推荐使用 @import url(index.css);

::before 和:before有什么区别？

相同点
都可以用来表示伪类对象，用来设置对象前的内容
:befor和::before写法是等效的
不同点
:befor是Css2的写法，::before是Css3的写法
:before的兼容性要比::before好 ，不过在H5开发中建议使用::before比较好

加分项

伪类对象要配合content属性一起使用
伪类对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
伪类对象的特效通常要使用:hover伪类样式来激活

css样式的优先级是怎么样的？

样式优先级规则
1.优先级顺序为：!important>style>权重值

2. 如果权重相同，则最后定义的样式的起作用，应该避免这种情况出现
   权重规则
   标签的权重为1
   class的权重为10
   id的权重为100

如何居中一个元素（正常、绝对定位、浮动元素）?

（一）元素水平居中的方式
1）行级元素水平居中对齐（父元素设置 text-align:center）

2. 块级元素水平居中对齐（margin: 0 auto）
   3）浮动元素水平居中

宽度不固定的浮动元素

.outerbox{
float:left; 
position:relative; 
left:50%; 
} 
.innerbox{  
float:left; 
position:relative; 
right:50%; 
}

 <div class="outerbox">
  <div class="innerbox">我是浮动的</div>
 </div>

宽度固定的互动元素

 .outerbox{
     background-color:pink; /*方便看效果 */  
     width:500px ; 
     height:300px; /*高度可以不设*/
     margin: -150px 0 0 -250px; /*使用marin向左移动250px，保证元素居中*/
     position:relative;   /*相对定位*/
     left:50%;
     top:50%;
 }

<div class="outerbox">
   <div>我是浮动的</div>
</div>

4）让绝对定位的元素水平居中对齐

.center{
         position: absolute; /*绝对定位*/
         width: 500px;
         height:300px;
         background: red;
         margin: 0 auto; /*水平居中*/
         left: 0; /*此处不能省略，且为0*/
         right: 0; /*此处不能省略，且为0*/
}

（二）元素垂直居中对齐
1）对行级元素垂直居中（heiht与line-height的值一样）
2）对块级元素垂直居中对齐
2.1 父元素高度固定的情况

1）父元素的height与line-height值相同

2）需要垂直居中的元素

vertical-align:middle;// 垂直居中对齐

display:inline|inline-block 块级元素转行级元素
2.2 父元素高度不固定的情况

父元素的padding-top和padding-bottom一样

CSS样式-display有哪些作用？

元素默认的display值的情况如下
block(块级元素)
<div>、<p> <ul> <ol> <form> ……
inline（内联元素）
<span> <a> <img> <input> <select> <label> ……
list-item（项目列表）
<li>
none(不显示)
<head>（头部元素都是） <title>
<thead> <tbody> <tfoot>

• 常见的属性值（属性值太多，只要说常用的就好）
  none：元素隐藏
  block：块级元素
  inline-block：内联块级元素
  list-item:列表项目
  表格系列方面的显示
  table
  table-row

一个满屏 品 字布局 如何设计?

1. 元素水平居中对齐

1. 使用margin对齐(推荐)

2)使用left：50%

3)使用text-align

2. 元素对相对窗口定位

1. 使用filxed（推荐）

2)使用absolute定位

3. 使用html和body的width和height填?这个窗口

3.元素左右定位

1)使用float左右浮动

2)使用绝对定位进行左右定位（推荐）

用纯CSS创建一个三角形的原理是什么？

1.采用的是均分原理
盒子都是一个矩形或正方形，从形状的中心，向4个角上下左右划分4个部
2.代码的实现
第一步 保证元素是块级元素
第二步 设置元素的边框
第三步 不需要显示的边框使用透明色

CSS样式-如何清除元素浮动？

1.使用clear:both清除浮动
示例1：使用div

<div class="box">

 <div class="div"></div>

 <div class="clear"></div>

</div>

.box{ width:300px;margin:0 auto;border:10px solid #000;}

.div{ width:200px;height:200px;background:red;float:left;}

.clear{ height:0px;font-size:0;clear:both;overflow: hidden;}

示例2:使用<br clear="all">

<div class="box">

 <div class="div"></div>

   <br clear="all"/>

</div>

.box{ width:300px;margin:0 auto;border:10px solid #000;}

.div{ width:200px;height:200px;background:red;float:left;}

伪类对象::after+zoom:1(推荐使用)

<div class="box clear">

 <div class="div"></div>

</div>

.box{margin:0 auto;border:10px solid #000;}

.div{ width:200px;height:200px;background:red;float:left;}

.clear{zoom:1;}

.clear:after{display:block;clear:both;content:"";visibility:hidden;height:0}

2.使用overflow属性

<div class="box">

 <div class="div1"></div>

</div>

.box{ width:300px;border:1px solid #000;overflow:auto;}

.div1{ width:260px;height:400px;background:Red;float:left;}
注意：overflow:auto;、overflow:hidden;都可以

3.使用display属性

<div class="box">

 <div class="div"></div>

</div>

.box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;}

.div{ width:200px;height:200px;background:red;float:left;}

注意：父元素不能水平居中，在父元素使用text-align:center解决   

4.父级元素浮动

<div class="box">

 <div class="div"></div>

</div>

.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}

.div{ width:200px;height:200px;background:red;float:left;}

注意：父元素不能水平居中，可以使用定位解决    

position: relative;

left: 50%;

margin-left: -150px;

JavaScript中如何翻转一个字符串？

1）使用字符串函数

str.split('').reverse().join('');

2）使用for循环

function reverseString(str) {   
var newStr="";
for(var i=str.length-1;i>=0;i--){
newStr+=str[i];
}
return newStr;
}

3）使用递归

function reverseString(str) {
 if (str === "") {
 return "";
 } else {
 return reverseString(str.substr(1)) + str.charAt(0);
 }
}
reverseString("hello"); // => olleh

如何向数组中间插入或删除元素？

第一种方法 使用splice方法

splice(start, deleteCount, value, ...)

start
开始插入和(或)删除的数组元素的下标。
deleteCount
从start开始，包括start所指的元素在内要删除的元素个数。这个参数是可选的，如果没有指定它，splice()将删除从start开始到原数组结尾的所有元素。
value, ...
要插入数组的零个或多个值，从start所指的下标处开始插入。
第二种方法 比较常规

var str = [0, 1, 3, 4, 6, 7];//原始字符串
var insWord = 5;//待插入字符串
var index = 4;//待插入位置
//待插入位置的元素全部向后移动一位
for(var i=str.length-1;i>=index;i--){
 str[i+1]=str[i];
}
str[index]=insWord;//移动完后，将待插入的位置赋值为待插入的值
console.log(str);//[0, 1, 3, 4, 5, 6, 7]

用js实现千位分隔符，怎么实现?

方法一：使用正则表达式

<span style="font-size:14px;">function format (num) {
    var reg=/\d{1,3}(?=(\d{3})+$)/g; 
    return (num + '').replace(reg, '$&,');
}</span>
正则表达式 \d{1,3}(?=(\d{3})+$)  表示前面有1~3个数字，后面的至少由一组3个数字结尾。
?=表示正向引用，可以作为匹配的条件，但匹配到的内容不获取，并且作为下一次查询的开始。
$& 表示与正则表达式相匹配的内容，具体的使用可以查看字符串replace()方法的

第二种：方法-正常思维算法

function format(num){
 num=num+'';//数字转字符串
  var str="";//字符串累加
  for(var i=num.length- 1,j=1;i>=0;i--,j++){
      if(j%3==0 && i!=0){//每隔三位加逗号，过滤正好在第一个数字的情况
          str+=num[i]+",";//加千分位逗号
          continue;
      }
      str+=num[i];//倒着累加数字
  }
  return str.split('').reverse().join("");//字符串=>数组=>反转=>字符串
}

怎样创建、添加、移除、移动、和查找节点?

1.createDocumentFragment()
创建一个虚拟节点对象,对于频繁操作DOM时推荐使用，减少对页面重绘频率从而提高页面响应的速度。
2.createElement()
根据标签名称创建一个具体的元素，对应的属性为innerHTML，此方法使用的频率高，创建元素基本上都会选择这种方法。
3.createTextNode()
创建一个文本节点，对应的属性为innerText。
移除元素
parentNode.removeChild(childNode)

替换元素
parentNode.replaceChild(newChild,oldChild);//替换元素

插入元素
parentNode.insertBefore(newChild,refChild)//在refChild前插入节点

追加元素
parentNode.appendChild(childNode)

查找

1. parentNode.getElementsByTagName(tagName)获取所在父节点下的指定标签名节点,返回HTMLCollection类型
2. document.getElementsByClassName(className)//根据类名获取节点，返回HTMLCollection
3. document.getElementById(id)//通过元素Id，唯一性
4. 高级选择器 document.querySelector

事件是什么？如何阻止事件冒泡？

事件用于监听浏览器的操作行为，浏览器触发动作时被捕捉到而调用相应的函数。

事件执行三个阶段
① 事件捕获阶段
② 处于目标阶段
③ 事件冒泡阶段
捕获型事件是自上而下，而冒泡型事件是自下而上的，而我们程序员通常要做的就是第二阶段，完成事件的动作。而第一、三阶段由系统封装自动调用完成。

冒泡阻止
event.stopPropagation()
IE浏览器
event.cancelBubble = true;

谈一下Jquery中的bind,live,delegate,on的区别？

• bind：把事件绑定到每一个匹配的元素上
  1.兼容性比较好
  2.绑定事件到所有选出来的元素上
  3.不会绑定事件到动态添加的那些元素上
  4.当元素很多时，会出现效率问题，特别是嵌套层次比较深的元素。
• live：把所有的事件都绑定到jquery对象$(document) ，主要特点：
  1.事件只需要绑定一次，不需要绑定到筛选出来的元素上。
  2.动态添加元素后依然拥有绑定事件。
  3.不能使用event.stopPropagation() 来阻止事件的冒泡。
• delegate：将事件绑定到指定的父元素上，和live类似但比较能活。主要特点：
  1.可以用在动态添加的元素上
  2.绑定的父元素可以采用就近原则，减少查询的次数，比live的性能好
  3.在live和delegate两者推荐使用delegate
• On：是jQuery1.7中新增的，前面的三种方法都是依赖on方法来实现的。，主要特点：
  1.事件的添加和卸载都要是通过on来实现的，提供一种统一的事件处理方法。
  2.增加了使用的难度，对于不熟悉on的使用的，很有可能就勿用，导致性能下降。

原型是什么？原型链是什么？

• 原型是什么？
  在JavaScript中原型是一个prototype对象，用于表示类型之间的关系。

• 原型链是什么？
  JavaScript万物都是对象，对象和对象之间也有关系，并不是孤立存在的。对象之间的继承关系，在JavaScript中是通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条，专业术语称之为原型链。

什么是闭包，为什么要用它？

闭包是什么
我个人理解，闭包是就是函数中的函数，里面的函数可以访问外面函数的变量，外面的变量的是这个内部函数的一部分。
辅助理解

<script>
    function  outer(){
        var num=0;//内部变量
       return  function add(){//通过return返回add函数，就可以在outer函数外访问了。
            num++;//内部函数有引用，作为add函数的一部分了
           console.log(num);
        };
    }
    var func1=outer();//
    func1();//实际上是调用add函数， 输出1
    func1();//输出2
    var func2=outer();
    func2();// 输出1
    func2();// 输出2
</script>

闭包的作用
1.使用闭包可以访问函数中的变量。
2.可以使变量长期保存在内存中，生命周期比较长。

加分项

闭包不能滥用，否则会导致内存泄露，影响网页的性能。闭包使用完了后，要立即释放资源，将引用变量指向null。

Ajax 是什么? 如何创建一个Ajax？

Ajax是什么
我理解Ajax 是一种异步请求数据的一种技术，对于改善用户的体验和程序的性能很有帮助。
Ajax的使用
1.创建Ajax核心对象XMLHttpRequest

var xmlhttp;
if (window.XMLHttpRequest)
  {// 兼容 IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// 兼容 IE6, IE5
  xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
  }

2.向服务器发送请求

xmlhttp.open(method,url,async);
send(string)

• 注意：open 的参数要牢记，很多面试官爱问这样的细节
  method：请求的类型；GET 或 POST
  url：文件在服务器上的位置
  async：true（异步）或 false（同步）
  send(string)方法post请求时才使用字符串参数，否则不用带参数。
• 注意：post请求一定要设置请求头的格式内容

xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

3.服务器响应处理
responseText 获得字符串形式的响应数据。
responseXML 获得XML 形式的响应数据。
3.1 同步处理

xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

直接在send()后面处理返回来的数据。
3.2 异步处理
异步处理相对比较麻烦，要在请求状态改变事件中处理。

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 &&xmlhttp.status==200)
    {
   document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

• 一共有5中请求状态，从0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

• xmlhttp.status：响应状态码。这个也是面试比较爱问的，这个必须知道4个以上，比较常见的有：

200: "OK"

403 （禁止） 服务器拒绝请求。

404 （未找到） 服务器找不到请求的网页。

408 （请求超时） 服务器等候请求时发生超时。

500 （服务器内部错误） 服务器遇到错误，无法完成请求。

JavaScript有几种类型的值？你能画一下他们的内存图吗？

两大类：

栈：原始数据类型（Undefined，Null，Boolean，Number、String）

堆：引用数据类型（对象、数组和函数）

区别：

两种类型的区别是：存储位置不同；

原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；

引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其

在栈中的地址，取得地址后从堆中获得实体

谈谈你对this的理解

this的指向

this表示当前对象，this的指向是根据调用的上下文来决定的，默认指向window对象，指向window对象时可以省略不写，例如：

this.alert() <=> window.alert()<=> alert();

调用的上下文环境包括全局和局部

• 全局环境

全局环境就是在<script></script>里面，这里的this始终指向的是window对象

• 局部环境

1）在全局作用域下直接调用函数，this指向window
2）对象函数调用，哪个对象调用就指向哪个对象

<input type="button"id="btnOK" value="OK">
<script>
varbtnOK=document.getElementById("btnOK");
btnOK.onclick=function(){
console.log(this);//this指向的是btnOK对象
}
</script>

3）使用 new 实例化对象，在构造函数中的this指向实例化对象。

var Show=function(){
    this.myName="Mr.Cao";   //这里的this指向的是obj对象
}
var obj=new Show();

4）使用call或apply改变this的指向

var Go=function(){
     this.address="深圳";
}
var Show=function(){
     console.log(this.address);//输出 深圳
}
var go=new Go();
Show.call(go);//改变Show方法的this指向go对象

• 加分项

1. 用于区分全局变量和局部变量，需要使用this
   2.返回函数当前的对象，看jquery1.8.3源码。
   3.将当前的对象传递到下一个函数，看jquery1.8.3源码。

同步和异步有什么区别？

• 同步的概念

同步，我的理解是一种线性执行的方式，执行的流程不能跨越。一般用于流程性比较强的程序，我们做的用户登录功能也是同步处理的，必须用户通过用户名和密码验证后才能进入系统的操作。

• 异步的概念

异步，是一种并行处理的方式，不必等待一个程序执行完，可以执行其它的任务。在程序中异步处理的结果通常使用回调函数来处理结果。在JavaScript中实现异步的方式主要有Ajax和H5新增的Web Worker。

谈谈你对模块化开发的理解？

什么是模块化

所谓的模块化开发就是封装细节，提供使用接口，彼此之间互不影响，每个模块都是实现某一特定的功能。模块化开发的基础就是函数
（一）使用函数封装

functionfunc1(){
　　　　//...
}
functionfunc2(){
　　　　//...
}

上面的函数func1 ()和func2 ()，组成一个模块。使用的时候，直接调用就行了。这种做法的缺点很明显："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。
（二）使用对象封装

为了解决上面的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面。

varobj = {
    age : 0,
    func1 : function (){
        //...
    },
    func2 : function (){
        //...
    }
};

上面的函数func1 ()和func2 (），都封装在obj对象里。使用的时候，就是调用这个对象的属性。
　obj.func1();
这样做也是有问题的，变量可以被外面随意改变而导致不安全。比如，年龄被修成负数。
obj.age = -100;
如何保证对象的属性不被访问了？
（三）立即执行函数写法

使用"立即执行函数"（Immediately-Invoked FunctionExpression，IIFE），可以达到不暴露私有成员的目的。这个也是闭包处理的一种方式。

var oj= (function(){
　　　　var _age= 0;
　　　　var func1= function(){
　　　　　　//...
　　　　};
　　　　var func2= function(){
　　　　　　//...
　　　　};
　　　　return {
　　　　　　m1 : func1,
　　　　　　m2 : func2
　　　　};
})();

使用上面的写法，外部代码无法读取内部的age变量。
console.info(obj.age);//undefined
（四）放大模式
如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用"放大模式"（augmentation）。在原有的基础上扩展更多的方法。

var obj =(function (mod){
　　　　mod.func3= function () {
　　　　　　//...
　　　　};
　　　　returnmod;//方便方法连续调用
})(obj);

（五）宽放大模式（Loose augmentation）

在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。如果采用上面的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用"宽放大模式"。

　　var obj =( function (mod){
　　　　//...
　　　　returnmod;
　　})(window.obj|| {});//确保对象不为空

（六）输入全局变量

独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。为了在模块内部调用全局变量，必须显式地将其他变量输入模块。

(function(window, undefined ) {
  ……
})(window );

这是jQuery框架的源码，将window对象作为参数传入，这样做除了保证模块的独立性，还使得模块之间的依赖关系变得明显。

目前，通行的JavaScript模块规范共有两种：CommonJS和AMD。

如何实现浏览器内多个标签页之间的通信?

• 方法一：使用localStorage
  使用localStorage.setItem(key,value);添加内容
  使用storage事件监听添加、修改、删除的动作

window.addEventListener("storage",function(event){
        $("#name").val(event.key+”=”+event.newValue);
});

方法二、使用cookie+setInterval

<inputid="name"><input type="button" id="btnOK"value="发送">
 $(function(){
        $("#btnOK").click(function(){
            varname=$("#name").val();
            document.cookie="name="+name;
        });
    });
    //获取Cookie天的内容
    function getKey(key) {
        return JSON.parse("{\""+ document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") +"\"}")[key];
    }
    //每隔1秒获取Cookie的内容
    setInterval(function(){
        console.log(getKey("name"));
     },1000);

call() 和 apply() 的区别？

• 相同点：两个方法产生的作用是完全一样的，都用来改变当前函数调用的对象。
• 不同点：调用的参数不同，比较精辟的总结：
  foo.call(this,arg1,arg2,arg3) == foo.apply(this, arguments)==this.foo(arg1, arg2, arg3)
• 使用
  1.call的使用
  语法
  call([thisObj[,arg1[, arg2[, [,.argN]]]]])
  参数
  thisObj 可选项。将被用作当前对象的对象。
  arg1,arg2, , argN 可选项。将被传递方法参数序列。
  说明
  call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

<input id="myText">
<script>
    function Obj()
    {
       this.value="对象！";
    }
    varvalue="global 变量";
    function Fun1(a,b){
       alert(this.value);
    }
    window.Fun1();   //global 变量
    Fun1.call(window,1,2);  //global 变量
    Fun1.call(document.getElementById('myText'));  //input text
    Fun1.call(new Obj());   //对象！
</script>

2.apply()
apply与call的功能几乎一样，第一个参数意义都一样，只是第二个参数有点不同apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，call从第二个参数开始，依次传值给调用函数的参数

eval是做什么的？

eval()的作用
把字符串参数解析成JS代码并运行，并返回执行的结果；

eval("2+3");//执行加运算，并返回运算值。
eval("varage=10");//声明一个age变量

eval的作用域

functiona(){
 eval("var x=1"); //等效于 var x=1;
 console.log(x); //输出1
}
a();
console.log(x);//错误 x没有定义

说明作用域在它所有的范围内容有效

• 注意事项
  应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
• 其它作用
  由JSON字符串转换为JSON对象的时候可以用eval

js延迟加载的方式有哪些？

1.defer 属性
<scriptsrc="file.js" defer></script>
浏览器会并行下载 file.js和其它有 defer 属性的script，而不会阻塞页面后续处理。defer属性在IE 4.0中就实现了，超过10多年了！Firefox从 3.5 开始支持defer属性 。
注：所有的defer脚本保证是按顺序依次执行的。
2.async 属性
<scriptsrc="file.js" async></script>
async属性是HTML5新增的。作用和defer类似，但是它将在下载后尽快执行，不能保证脚本会按顺序执行。它们将在onload 事件之前完成。
Firefox3.6、Opera 10.5、IE 9和 最新的Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer，这样IE 4之后的所有IE 都支持异步加载。
3.动态创建DOM方式

<script type="text/javascript">
   function downloadJSAtOnload() {
       varelement = document.createElement("script");
      element.src = "defer.js";
      document.body.appendChild(element);
   }
   if (window.addEventListener)
      window.addEventListener("load",downloadJSAtOnload, false);
   else if (window.attachEvent)
      window.attachEvent("onload",downloadJSAtOnload);
   else window.onload =downloadJSAtOnload;
</script>

4.使用Jquery的getScript()方法

  $.getScript("outer.js",function(){//回调函数，成功获取文件后执行的函数
        console.log("脚本加载完成")
  });

new操作符具体干了什么呢?

new共经过了4个阶段
1、创建一个空对象

var obj=new Object();

2、设置原型链

var result =Func.call(obj);

3、让Func中的this指向obj，并执行Func的函数体。

var result =Func.call(obj);

4、判断Func的返回值类型：
如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象。

if (typeof(result) == "object"){
  func=result;
}
else{
    func=obj;;
}

CSS3有哪些新特性？

1.CSS3的选择器

1）E:last-child 匹配父元素的最后一个子元素E。
2）E:nth-child(n)匹配父元素的第n个子元素E。
3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

2. @Font-face 特性

Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

3. 圆角
4. 多列布局 （multi-column layout）
   5.阴影（Shadow）
   6.CSS3 的渐变效果
   7.css弹性盒子模型
5. CSS3制作特效

1. Transition 对象变换时的过渡效果

transition-property 对象参与过渡的属性
transition-duration 过渡的持续时间
transition-timing-function 过渡的类型
transition-delay 延迟过渡的时间

2. Transforms 2D转换效果

主要包括 translate（水平移动）、rotate（旋转）、scale（伸缩）、skew（倾斜）

3. Animation动画特效

html5有哪些新特性、移除了那些元素？

（一）.H5新特性
增强了图形渲染、影音、数据存储、多任务处理等处理能力主要表现在

1. 绘画 canvas;
2. 本地离线存储 localStorage
   长期存储数据，浏览器关闭后数据不丢失;
   1.特点
   数据永久存储，没有时间限制；大小限制5M(够用了)；只存储字符串。
   2.数据存取方式

localStorage.a = 3;//设置a为"3"
localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值
localStorage.setItem("b","isaac");//设置b为"isaac"
var a1 = localStorage["a"];//获取a的值
var a2 = localStorage.a;//获取a的值
var b = localStorage.getItem("b");//获取b的值
var b2= localStorage.key(0);//获取第一个key的内容
localStorage.removeItem("c");//清除c的值
localStorage.clear();//清除所有的数据

推荐使用：
getItem()
setItem()
removeItem()
3.事件监听

if(window.addEventListener){
 window.addEventListener("storage",handle_storage,false);//
}else if(window.attachEvent){ //兼容IE
 window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
 }

对象e为localStorage对象，Chrome、Firefox支持差，IE支持较好。

3. sessionStorage的数据在浏览器关闭后自动删除;操作参考localStorage

4. 用于媒介回放的 video和 audio 元素;

5. 语意化更好的内容元素，比如article、footer、header、nav、section;

6. 表单控件，calendar、date、time、email、url、search;

7. 新的技术webworker(专用线程)

8. websocketsocket通信

9. Geolocation 地理定位
   （二）移除的元素

• 纯表现的元素
  <basefont> 默认字体，不设置字体，以此渲染
  <font> 字体标签
  <center> 水平居中
  <u> 下划线
  <big> 大字体
  <strike> 中横线
  <tt> 文本等宽
• 框架集
  <frameset>
  <noframes>
  <frame>

如何在页面上实现一个圆形的可点击区域？

1. map+area

<img src="t.jpg" width="1366" height="768" border="0" usemap="#Map" />
<map name="Map" id="Map">
 <area shape="circle" coords="821,289,68" href="www.baidu.com" target="_blank" />
</map>

2. border-radius（H5）

<style>
 .disc{
     width:100px;
     height:100px;
     background-color:dimgray;
     border-radius: 50%;
     cursor: pointer;
     position: absolute;
     left:50px;
     top:50px;  
     line-height: 100px;
     text-align: center;
     color: white;
 }
</style>
<div class="disc">智学无忧</div>

3. 纯js实现
   需要求一个点在不在圆上简单算法、获取鼠标坐标等等
   两点之间的距离计算公式

上面公式对于JavaScript代码如下：

|AB|=Math.abs(Math.sqrt(Math.pow(X2-X1),2)+Math.pow(Y2-Y1,2)))
Math.abs()求绝对值
Math.pow(底数,指数)
Math.sqrt()求平方根
示例：
假设圆心为（100,100）,半径为50，在圆内点击弹出相应的信息，在圆外显示不在圆内的信息

document.onclick=function(e){
    var r=50;//圆的半径
var x1=100,y1=100,x2= e.clientX;y2= e.clientY;
//计算鼠标点的位置与圆心的距离
    var len=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));
    if(len<=50){
        console.log("内")
    }else{
        console.log("外")
    }
 }

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

相同点：都存储在客户端
不同点：
1.存储大小
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2.有效时间
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3. 数据与服务器之间的交互方式
   cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
   sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

• 额外拓展【加分项】：Cookie的操作（有点小难度）防止面试官细问cookie的操作。
• 设置Cookie
  cookie的几个要素
  cookie的内容：采用 key=value;key=value……存储，参数名自定义
  cookie的过期时间：使用参数expires
  cookie的路径：使用参数path，"/"表示这个网站的页面，不推荐!容易产生冲突
  注意：形如“/pro/index.html”路径，在google浏览器正常，在IE浏览器得不到值

var name = "jack";
var pwd = "123";
var now = new Date();
now.setTime(now.getTime() +1 * 24 * 60 * 60 * 1000);//转毫秒
var path = "/";//可以是具体的网页
document.cookie = "name=" + name + ";expires=" + now.toUTCString() + ";path=" + path;//姓名
document.cookie= "pwd=" + pwd + ";expires=" + now.toUTCString()+ ";path=" + path; //密码

• 读取cookie
  获取cookie内容
  vardata=document.cookie;//获取对应页面的cookie
  解析cookie
• 方式1：截取字符串

function getKey(key) {
    var data = document.cookie;
    var findStr = key + "=";
    //找到key的位置
    var index = data.indexOf(findStr);
    if (index == -1)
        return null;
    var subStr = data.substring(index +findStr.length);
    var lastIndex = subStr.indexOf(";");
    if (lastIndex == -1) {
        return subStr;
 } else {
        return subStr.substring(0,lastIndex);
 }
}

• 方式2：使用正则表达式+JSON

function getKey(key) {
    return JSON.parse("{\"" +document.cookie.replace(/;\s+/gim, "\",\"").replace(/=/gim, "\":\"") + "\"}")[key];
}

清除cookie

var name = null;
var pwd = null;
var now = new Date();
var path = "/";//可以是具体的网页
document.cookie= "name=" + name + ";expires=" + now.toUTCString()+ ";path=" + path;//姓名
document.cookie = "pwd=" + pwd + ";expires=" + now.toUTCString()+ ";path=" + path; //密码

什么是响应式开发？

什么是响应式
顾名思义，同一个网站兼容不同的大小的设备。如PC端、移动端（平板、横屏、竖排）的显示风格。
需要用到的技术

1. Media Query（媒体查询）
   用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸，是否可触摸，屏幕精度，横屏竖屏等信息。
2. 使用em或rem做尺寸单位
   用于文字大小的响应和弹性布局。
3. 禁止页面缩放
   <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />
4. 屏幕尺寸响应
   a) 固定布局：页面居中，两边留白，他能适应大于某个值一定范围的宽度，但是如果太宽就会有很多留白，太窄会出现滚动条，在PC页面上很常见。
   b) 流动布局：屏幕尺寸在一定范围内变化时，不改变模块布局，只改变模块尺寸比例。比固定布局更具响应能力，两边不留白，但是也只能适应有限的宽度变化范围，否则模块会被挤（拉）得不成样子。
   c) 自定义布局：上面几种布局方式都无法跨域大尺寸变化，所以适当时候我们需要改变模块的位置排列或者隐藏一些次要元素。
   d) 栅格布局：这种布局方式使得模块之间非常容易对齐，易于模块位置的改变用于辅助自定义布局。
   响应式设计注意事项
   1.宽度不固定，可以使用百分比
   head{width:100%;}
   content{width:50%;}
5. 图片处理
   图片的宽度和高度设置等比缩放，可以设置图片的width为百分比，height:auto;
   背景图片可以使用background-size 指定背景图片的大小。