js&jq面试笔记（上）

时间 2019-11-16

原文原文链接

js&jq涉及内容众多，分为上下两部分进行整理，该部分为上部分。

一、对前端工程师这个职位你是怎么样理解的？

前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好;
参与项目，快速高质量完成实现效果图，精确到1px;
与团队成员，UI设计，产品经理的沟通;
作好的页面结构，页面重构和用户体验;
处理hack，兼容、写出优美的代码格式;
针对服务的优化、拥抱最新前端技术。

DOM相关

一、原生JavaScript操做DOM

<table border="1" id="t">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

首先经过题目给的table id 得到该对象;
tableObj.rows.length; 得到行数;
tableObj.rows[x].cells[y].innerText 能够得到x行y列的值;
遍历tablejavascript

function show(){
    var    tableRowInfo ="";
    tableObj = document.getElementById("t");
    for(var i =0 ;i<tableObj.rows.length ; i++){
        
        for(var j=0 ;j<tableObj.rows[i].cells.length ; j++){
            tableRowInfo  +=  tableObj.rows[i].cells[j].innerText + " ";
        }
        console.log(tableRowInfo); // 打印每行信息
        tableRowInfo ="";    
    }
}

二、获取页面html标签的个数

var elementArr = document.getElementsByTagName('*')
var tagNameArr = []
for(var i= 0,len=elementArr.length;i<len;i++){
    if(tagNameArr.indexOf(elementArr[i].tagName) == -1){
        tagNameArr.push(elementArr[i].tagName)
    }
}

三、DOM事件流包括哪几个阶段

事件流，从页面接收事件的顺序；IE的事件流叫作事件冒泡；Netscape的事件流叫作事件捕获；
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段

document.addEventListener(type, handler, false);//true事件捕获模式，false事件冒泡模式css

四、html元素添加事件的方法

原生方法：

//1
<input type='buttom' value='click me' onclick='try{showMessage()}catch(ex){}'>

//2
var btn = document.getElementById('myBtn')
btn.onclick = function(){}

//3
btn.addEventListener('click',function(){},false)//false在冒泡阶段调用事件处理程序

IE：btn.attachEventListener('click',function(){},false)

五、用js代码完成，body里面生成100个div，内容是1-100自身序号，颜色按照红、黄、蓝、绿交替变色，10行10列

// CSS 
#box { position:relative; }
#box div { width: 60px; height: 60px; position: absolute; }

// HTML 
<div id="box"></div>

// JavaScript 
<script>
var box = document.getElementById('box');
var str = '';
var arr = ['red', 'yellow', 'blue', 'green'];

for (var i = 0; i < 100; i++) {
    str += '<div style="left:' + i%10*60 + 'px; top:' + Math.floor(i/10)*60 + 'px; background:' + arr[i%arr.length] + ';">' + (i+1)+'</div>';
}
box.innerHTML += str;

正则表达式

一、写一个function，清除字符串先后的空格。（兼容全部浏览器）

function trim(str) {
    if (str && typeof str === "string") {
        return str.replace(/(^\s*)|(\s*)$/g,""); //去除先后空白符
    }
}

二、使用正则表达式验证邮箱格式html

var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
var email = "example@qq.com";
console.log(reg.test(email));  // true

js其余

一、一个圆心坐标为(0,0)的圆，半径r=10，求45°方向的点坐标(x,y)

x = Math.cos(Math.PI/4)*r
y = Math.sin(Math.PI/4)*r

二、事件委托的实现原理是什么，优缺点

原理：事件冒泡，子元素的单击事件会冒泡到顶层元素document对象上
优势：DOM操做少，只获取一个顶层DOM元素；减小事件注册，节省内存占用；简化了DOM节点更新时的事件更新
缺点：不支持不冒泡的事件；出现不指望的事件误判
适合采用事件委托技术的事件包括：click、mousedown、mouseup、keydown、keyup、keypress前端

不冒泡的事件：blur、focus、load、unload java

使用原生js为如下li实现事件委托，点击后打印对应的node-type属性值node

<ul id="test">
    <li node-type="1">b</li>
    <li node-type="2">a</li>
    <li node-type="3">t</li>
</ul>
var ele = document.getElementById('test');
ele.addEventListener('click',function(e){
    var value = e.target.attributes[0].nodeValue;
    console.log(value);
},false)

三、js捕获离开（刷新、关闭、后退）页面事件

onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。

该事件可用于弹出对话框，提示用户是继续浏览页面仍是离开当前页面。对话框默认的提示信息根据不一样的浏览器有所不一样，标准的信息相似"肯定要离开此页吗？"。该信息不能删除。但你能够自定义一些消息提示与标准信息一块儿显示在对话框。
注意：若是你没有在 <body> 元素上指定 onbeforeunload 事件，则须要在 window对象上添加事件，并使用 returnValue 属性建立自定义信息。nginx

window.onbeforeunload = function(){
    setTimeout(function(){console.log('cancel');},1000);
    return '肯定离开？'
}

四、typeof 和 instanceof 操做的用法、实例

typeof操做符判断基本数据类型；instanceof检测对象的继承关系，左操做数是对象，右操做数是构造函数

console.log(typeof null);//object
console.log(typeof undefined);//undefined
console.log(typeof 'a');//string
console.log(typeof 1);//number
console.log(typeof true);//boolean
console.log(typeof []);//object

instanceof能够准确判断 左对象 是 右对象 的实例
console.log([] instanceof Array);//true
console.log('a' instanceof String);//false
console.log(/a/ instanceof RegExp);//true
console.log([] instanceof Object);//true

五、页面的三种弹窗

alert警告框；confirm确认框；prompt提示框

六、请指出document load和document ready的区别？

共同点：这两种事件都表明的是页面文档加载时触发。
异同点：
ready 事件的触发，表示文档结构已经加载完成（不包含图片等非文字媒体文件）。
onload 事件的触发，表示页面包含图片等文件在内的全部元素都加载完成。

七、函数节流定义、做用、示例

函数节流：某些代码不能够在没有间断的状况下连续重复执行，不只消耗内存大、占用CPU时间长，同时还会形成不指望的后果，必须采起节流手段；
基本思想：第一次调用函数，建立一个定时器，在指定的时间间隔后运行代码；第二次调用，清除前一次的定时器并设置另外一个；
目的：只用在，执行函数的请求中止了一段时间以后才执行；

var processor = {
  timeoutId: null,
  performProcessing: function(){
    //执行的代码
  },
  process: function(){
    clearTimeout(this.timeoutId);
    var that = this;
    this.timeoutId = setTimeout(function(){
      that.performProcessing();
    },500);
  }
}

processor.process();

在微信小程序开发中，scroll-view标签用于建立可滚动的列表区域，这个属性能够绑定用户滚动到列表底部的事件，
以下：<scroll-view scroll-y bindscrolltolower="bottom"></scroll-view>，可是，页面到达底部以前的临界点，这个事件会重复触发无数次，致使向后台请求分页数据无数次。此时，能够采用函数节流技术；

八、开发过程当中如何调试抓包（http、https）

pc端：chrome浏览器-Network
手机的通讯包：Fiddler是一个http协议调试代理工具，它可以记录并检查全部你的电脑和互联网之间的http通信，设置断点，查看全部的“进出”Fiddler的数据（指cookie,html,js,css等文件）。
Fiddler 要比其余的网络调试器要更加简单，由于它不只仅暴露http通信还提供了一个用户友好的格式。

九、http状态码

1信息，2成功，3重定向，4客户端错误，5服务器错误
302请求的资源被临时移动；
303查看其余地址；
304请求的资源未修改，读取缓存资源；
403请求被服务器拒绝；
404没法找到资源；
500服务器内部错误；
502无效请求程序员

1xx：1开头的是信息状态码
2xx：2开头的是请求成功
3xx：3开头的是重定向
4xx：4开头的是客户端错误
5xx：5开头的是服务器错误web

十、一次完整的HTTP事务是怎样的一个过程？

基本流程：ajax
1. 域名解析
2. 发起TCP的3次握手
3. 创建TCP链接后发起http请求
4. 服务器端响应http请求，浏览器获得html代码
5. 浏览器解析html代码，并请求html代码中的资源
6. 浏览器对页面进行渲染呈现给用户

11：从输入url到显示页面，都经历了什么

通常会经历如下几个过程：
一、首先，在浏览器地址栏中输入url
二、浏览器先查看浏览器缓存-系统缓存-路由器缓存，若是缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操做。
三、在发送http请求前，须要域名解析(DNS解析)(DNS（域名系统，Domain Name System）是互联网的一项核心服务，它做为能够将域名和IP地址相互映射的一个分布式数据库，可以令人更方便的访问互联网，而不用去记住IP地址。)，解析获取相应的IP地址。
四、浏览器向服务器发起tcp链接，与浏览器创建tcp三次握手。（TCP即传输控制协议。TCP链接是互联网链接协议集的一种。）
五、握手成功后，浏览器向服务器发送http请求，请求数据包。
六、服务器处理收到的请求，将数据返回至浏览器
七、浏览器收到HTTP响应
八、读取页面内容，解析html源码
九、生成Dom树、解析css样式、js交互，浏览器渲染
十、客户端和服务器交互
十一、ajax查询

十二、常见的兼容性问题，列举三种

所谓的浏览器兼容性问题，是指由于不一样的浏览器对同一段代码有不一样的解析，形成页面显示效果不统一的状况。在大多数状况下，咱们的需求是，不管用户用什么浏览器来查看咱们的网站或者登录咱们的系统，都应该是统一的显示效果。因此浏览器的兼容性问题是前端开发人员常常会碰到和必需要解决的问题。
html，H5新标签低版本浏览器没法解析；img标签的alt属性不一样浏览器解析不一样；css，margin和padding属性不一样浏览器的初始值不一样；font-size在chrome浏览器中最小字体是12px;
js，标准的事件绑定方法为addEventListener，IE下是attachEvent;

1三、ajax中get请求与post请求的区别

get请求会将参数跟在url后进行传递，而post请求则是做为http消息的实体内容发送给web服务器，可是这种区别对用户是不可见的;
使用Get请求发送数据量小,Post请求发送数据量大;
get安全性很是低，post安全性较高;
在如下状况中，请使用 POST请求：没法使用缓存文件（更新服务器上的文件或数据库）；向服务器发送大量数据（POST 没有数据量限制）；
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
若符合下列任一状况，则用GET方法：请求是为了查找资源，HTML表单数据仅用来帮助搜索。请求结果无持续性的反作用。收集的数据及HTML表单内的输入字段名称的总长不超过1024个字符。

1四、ajax的原生js过程

目前Ajax技术有两种方式实现请求：1、经过他的核心对象XHR（XMLHttpRequest的缩写）；
2、经过window.fetch()方法进行请求。
1.经过XHR对象进行请求（原生js）代码以下：

//一、建立XHR对象
var request = new XMLHttpRequest();//在大多数浏览器中，在ie五、ie6中不支持这个方式
//在ie五、ie6中兼容只需定义下面这个函数
var request;
if(window.XMLHttpRequest){
    request = new XMLHttpRequest();
}else{
    request = new ActiveXObject("Microsoft.XMLHTTP");
}


//二、进行请求完整代码
var xhr = '';
var requestData = '';
//兼容性处理
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

xhr.open('GET/POST','url',true/false);//get和post请求，true为异步请求、false我为同步请求,请求的URL中可带参数进行请求
xhr.setRequestHeader("Content-type", "application/json");//添加http头信息，该函数的顺序必须是open以后，send以前
xhr.send(JSON.stringify({
    name: '小明',
    age: 20
}));//post的send(String)必需要，send用于发送请求参数，若是不须要请求体发送请求参数，则为null。
    //send传输的数据是以json数据格式传给后台的。
//返回响应
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
            //请求成功的处理函数，服务器返回的数据存入responseText属性中
            requestData = xhr.responseText;//获取到后台响应的数据
            var date = JSON.parse(requestData);//将响应数据转化成json格式，以便使用
            //使用数据
            //~~~
        }else{
            //请求数据错误的处理函数
        }
    }else{
        //ajax发送失败，没有获得响应数据
    }
}

2.使用jQuery的$.ajax()方法实现请求，代码以下：

$.ajax({
    type: 'GET',//请求方式
    url: 'url',//请求资源地址或请求接口
    data: {
        //请求参数
    },
    success: function(data){//服务器响应的数据都存入data中
        //请求成功处理函数
        if(data.status === '0'){
            alert(data.message);
        } else {
            //向本身的html添加服务器响应的数据
        }
    }
    error: function(){
        //请求失败处理函数
    }
});

目前市场上已经在使用window.fetch()方法，XMLHttpRequest 是一个设计粗糙的 API、不符合关注分离（Separation of Concerns）的原则，配置和调用方式很是混乱，并且基于事件的异步模型写起来也没有现代的 ·Promise，generator/yield，async/await· 友好。Fetch 的出现就是为了解决XHR的问题

请求代码以下：

window.fetch(url).then(function(response){//响应值放入response中
    return response.json();//用json()方法把相应的数据转化为javascript对象
}).then(function(data)
    //请求成功处理函数
}).catch(function(e){
    //请求失败处理函数
})

1五、页面中如何响应鼠标点击并提取点击坐标

document.onclick = clickStat;
function clickStat() {
    var e = arguments[0] || window.event,x = '',y = '';
    if(e.clientX || e.clientY){
        x = e.clientX;
        y = e.clientY;
    }else{//兼容ie
        x = e.clientX + document.body.scrollLeft - document.body.clientLeft;
        y = e.clientY + document.documentElement.scrollTop;
    }
    console.log(x,y)
}

1六、ajax请求时，如何解析JSON数据

eval();//此方法不推荐
eval( '(' + jsonDate + ')' );

JSON.parse();//推荐方法
JSON.parse( jsonDate );
eval();方法解析的时候不会去判断字符串是否合法，并且json对象中的js方法也会被执行，这是很是危险的；

1七、写出3个使用this的典型应用

在html元素事件属性中使用，如：

<input type=”button” onclick=”showInfo(this);” value=”点击一下”/>

构造函数

function Animal(name, color) {
　　this.name = name;
　　this.color = color;
}

input点击，获取值

<input type="button" id="text" value="点击一下" />
<script type="text/javascript">
    var btn = document.getElementById("text");
    btn.onclick = function() {
        alert(this.value);    //此处的this是按钮元素
    }
</script>

apply()/call()求数组最值

var  numbers = [5, 458 , 120 , -215 ]; 
var  maxInNumbers = Math.max.apply(this, numbers);  
console.log(maxInNumbers);  // 458
var maxInNumbers = Math.max.call(this,5, 458 , 120 , -215); 
console.log(maxInNumbers);  // 458

1八、比较typeof与instanceof？

相同点：JavaScript 中 typeof 和 instanceof 经常使用来判断一个变量是否为空，或者是什么类型的。
typeof的定义和用法：返回值是一个字符串，用来讲明变量的数据类型。
细节：

1.typeof 通常只能返回以下几个结果：number,boolean,string,function,object,undefined。
2.typeof 来获取一个变量是否存在，如 if(typeof a!="undefined"){alert("ok")}，而不要去使用 if(a) 由于若是 a 不存在（未声明）则会出错。
3.对于 Array,Null 等特殊对象使用 typeof 一概返回 object，这正是 typeof 的局限性。
Instanceof定义和用法：instanceof 用于判断一个变量是否属于某个对象的实例。

a instanceof b?alert("true"):alert("false"); //a是b的实例？真:假

var a = new Array(); 
alert(a instanceof Array);  // true
alert(a instanceof Object)  // true
如上，会返回 true，同时 alert(a instanceof Object) 也会返回 true;这是由于 Array 是 object 的子类。

function test(){};
var a = new test();
alert(a instanceof test)   // true

细节：

1.以下，获得的结果为‘N’,这里的 instanceof 测试的 object 是指 js 语法中的 object，不是指 dom 模型对象。

if (window instanceof Object){ alert('Y')} else {  alert('N');}  // 'N'

1九、如何理解闭包？

定义和用法：当一个函数的返回值是另一个函数，而返回的那个函数若是调用了其父函数内部的其它变量，若是返回的这个函数在外部被执行，就产生了闭包。
表现形式：使函数外部可以调用函数内部定义的变量。
根据做用域链的规则，底层做用域没有声明的变量，会向上一级找，找到就返回，没找到就一直找，直到window的变量，没有就返回undefined。这里明显count 是函数内部的flag2 的那个count 。

var count=10;   //全局做用域 标记为flag1
    function add(){
        var count=0;    //函数全局做用域 标记为flag2
        return function(){
            count+=1;   //函数的内部做用域
            alert(count);
        }
    }
    var s = add()
    s();//输出1
    s();//输出2

变量的做用域
要理解闭包，首先必须理解Javascript特殊的变量做用域。
变量的做用域分类：全局变量和局部变量。
特色：
一、函数内部能够读取函数外部的全局变量；在函数外部没法读取函数内的局部变量。
二、函数内部声明变量的时候，必定要使用var命令。若是不用的话，你实际上声明了一个全局变量！
使用闭包的注意点

一、滥用闭包，会形成内存泄漏：因为闭包会使得函数中的变量都被保存在内存中，内存消耗很大，因此不能滥用闭包，不然会形成网页的性能问题，在IE中可能致使内存泄露。解决方法是，在退出函数以前，将不使用的局部变量所有删除。
二、会改变父函数内部变量的值。因此，若是你把父函数看成对象（object）使用，把闭包看成它的公用方法（Public Method），把内部变量看成它的私有属性（private value），这时必定要当心，不要随便改变父函数内部变量的值。

20、什么是跨域？跨域请求资源的方法有哪些？

什么是跨域？

因为浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不一样即为跨域。存在跨域的状况：

网络协议不一样，如http协议访问https协议。

端口不一样，如80端口访问8080端口。

域名不一样，如qianduanblog.com访问baidu.com。

子域名不一样，如abc.qianduanblog.com访问def.qianduanblog.com。

域名和域名对应ip,如www.a.com访问20.205.28.90.

跨域请求资源的方法：

一、porxy代理

    定义和用法：proxy代理用于将请求发送给后台服务器，经过服务器来发送请求，而后将请求的结果传递给前端。

    实现方法：经过nginx代理；

    注意点：一、若是你代理的是https协议的请求，那么你的proxy首先须要信任该证书（尤为是自定义证书）或者忽略证书检查，不然你的请求没法成功。

二、CORS 【Cross-Origin Resource Sharing】

定义和用法：是现代浏览器支持跨域资源请求的一种最经常使用的方式。

    使用方法：通常须要后端人员在处理请求数据的时候，添加容许跨域的相关操做。以下：

res.writeHead(200, {
    "Content-Type": "text/html; charset=UTF-8",
    "Access-Control-Allow-Origin":'http://localhost',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
    'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});

(3)、jsonp

定义和用法：经过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会当即执行（没有阻塞的状况下）。

特色：经过状况下，经过动态建立script来读取他域的动态资源，获取的数据通常为json格式。

<script>
    function testjsonp(data) {
       console.log(data.name); // 获取返回的结果
    }
</script>
<script>
    var _script = document.createElement('script');
    _script.type = "text/javascript";
    _script.src = "http://localhost:8888/jsonp?callback=testjsonp";
    document.head.appendChild(_script);
</script>

缺点：

　　一、这种方式没法发送post请求（这里）

　　二、另外要肯定jsonp的请求是否失败并不容易，大多数框架的实现都是结合超时时间来断定。

2一、谈谈垃圾回收机制方式及内存管理

定义和用法：垃圾回收机制(GC:Garbage Collection),执行环境负责管理代码执行过程当中使用的内存。
原理：垃圾收集器会按期（周期性）找出那些不在继续使用的变量，而后释放其内存。可是这个过程不是实时的，由于其开销比较大，因此垃圾回收器会按照固定的时间间隔周期性的执行。
实例以下：

function fn1() {
    var obj = {name: 'hanzichi', age: 10};
}
function fn2() {
    var obj = {name:'hanzichi', age: 10};
   return obj;
}
var a = fn1();
var b = fn2();

fn1中定义的obj为局部变量，而当调用结束后，出了fn1的环境，那么该块内存会被js引擎中的垃圾回收器自动释放；在fn2被调用的过程当中，返回的对象被全局变量b所指向，因此该块内存并不会被释放。

垃圾回收策略：标记清除(较为经常使用)和引用计数。
标记清除：

　　定义和用法：当变量进入环境时，将变量标记"进入环境"，当变量离开环境时，标记为："离开环境"。某一个时刻，垃圾回收器会过滤掉环境中的变量，以及被环境变量引用的变量，剩下的就是被视为准备回收的变量。

　　到目前为止，IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或相似的策略，只不过垃圾收集的时间间隔互不相同。

引用计数：

　　定义和用法：引用计数是跟踪记录每一个值被引用的次数。

　　基本原理：就是变量的引用次数，被引用一次则加1，当这个引用计数为0时，被视为准备回收的对象。

内存管理
一、何时触发垃圾回收？

垃圾回收器周期性运行，若是分配的内存很是多，那么回收工做也会很艰巨，肯定垃圾回收时间间隔就变成了一个值得思考的问题。

IE6的垃圾回收是根据内存分配量运行的，当环境中的变量，对象，字符串达到必定数量时触发垃圾回收。垃圾回收器一直处于工做状态，严重影响浏览器性能。

IE7中，垃圾回收器会根据内存分配量与程序占用内存的比例进行动态调整，开始回收工做。

二、合理的GC方案：(1)、遍历全部可访问的对象; (2)、回收已不可访问的对象。

三、GC缺陷：(1)、中止响应其余操做；

四、GC优化策略：(1)、分代回收（Generation GC）;(2)、增量GC

开发过程当中遇到的内存泄露状况，如何解决的？
一、定义和用法：

内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。C#和Java等语言采用了自动垃圾回收方法管理内存，几乎不会发生内存泄露。咱们知道，浏览器中也是采用自动垃圾回收方法管理内存，但因为浏览器垃圾回收方法有bug，会产生内存泄露。

二、内存泄露的几种状况:

1.意外的全局变量引发的内存泄露
function leak(){  
  leak="xxx";//leak成为一个全局变量，不会被回收  
}
2.闭包引发的内存泄露

3.没有清理的DOM元素引用

4.被遗忘的定时器或者回调 5）子元素存在引发的内存泄露

(1)、当页面中元素被移除或替换时，若元素绑定的事件仍没被移除，在IE中不会做出恰当处理，此时要先手工移除事件，否则会存在内存泄露。

实例以下：
<div id="myDiv">
    <input type="button" value="Click me" id="myBtn">
</div>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
        document.getElementById("myDiv").innerHTML = "Processing...";
    }
</script>

解决方法以下：

<div id="myDiv">
    <input type="button" value="Click me" id="myBtn">
</div>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
    btn.onclick = null;
        document.getElementById("myDiv").innerHTML = "Processing...";
    }
</script>

(2)、因为是函数内定义函数，而且内部函数--事件回调的引用外暴了，造成了闭包。闭包能够维持函数内局部变量，使其得不到释放。

实例以下：
function bindEvent(){
    var obj=document.createElement("XXX");
    obj.onclick=function(){
        //Even if it's a empty function
    }
}
解决方法以下：

function bindEvent(){
    var obj=document.createElement("XXX");
    obj.onclick=function(){
         //Even if it's a empty function
    }
    obj=null;
}

2二、如何判断一个变量是对象仍是数组？

判断数组和对象分别都有好几种方法，其中用Object.prototype.toString.call()兼容性最好。

2三、定时器的执行顺序或机制。

由于js是单线程的，浏览器遇到setTimeout或者setInterval会先执行完当前的代码块，在此以前会把定时器推入浏览器的待执行事件队列里面，等到浏览器执行完当前代码以后会看一下事件队列里面有没有任务，有的话才执行定时器的代码。
因此即便把定时器的时间设置为0仍是会先执行当前的一些代码。

2四、Javascript中callee和caller的做用？

caller是返回一个对函数的引用，该函数调用了当前函数；caller返回调用者，指向当前函数的直接父函数
callee是返回正在被执行的function函数，也就是所指定的function对象的正文。callee是被执行的function对象，他是arguments的一个属性，就是指向当前函数b的父函数a
callee, caller不建议使用，由于这两个属性在严格模式(use strict)下都不存在。

2五、Web Storage与Cookie相比存在的优点：

(1)、存储空间更大：IE8下每一个独立的存储空间为10M，其余浏览器实现略有不一样，但都比Cookie要大不少。

(2)、存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。

(3)、更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，如setItem,getItem,removeItem,clear等,使得数据操做更为简便。cookie须要本身封装。

(4)、独立的存储空间：每一个域（包括子域）有独立的存储空间，各个存储空间是彻底独立的，所以不会形成数据混乱。

2六、浏览器缓存有哪些，一般缓存有哪几种

http缓存

websql

cookie

localstorage

sessionstorage

2七、document.write和innerHTML的区别：

document.write是直接写入到页面的内容流，若是在写以前没有调用document.open, 浏览器会自动调用open。每次写完关闭以后从新调用该函数，会致使页面被重写。

innerHTML则是DOM页面元素的一个属性，表明该元素的html内容。你能够精确到某一个具体的元素来进行更改。若是想修改document的内容，则须要修改document.documentElement.innerElement。

innerHTML将内容写入某个DOM节点，不会致使页面所有重绘

2八、xml和json的区别，请用四个词语来形容

JSON相对于XML来说，数据的体积小，传递的速度更快些

JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互

XML对数据描述性比较好；

JSON的速度要远远快于XML

2九、new操做符到底到了什么

var Func=function(){};  

var func=new Func ();  

new共通过了4几个阶段

一、建立一个空对象
    var obj=new Object();  


二、设置原型链
    obj.__proto__= Func.prototype;  


三、让Func中的this指向obj，并执行Func的函数体。
    var result =Func.call(obj); 
    

四、判断Func的返回值类型：

    若是是值类型，返回obj。若是是引用类型，就返回这个引用类型的对象。

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

(1) 建立一个新对象；
(2) 将构造函数的做用域赋给新对象（所以 this 就指向了这个新对象） ；
(3) 执行构造函数中的代码（为这个新对象添加属性） ；
(4) 返回新对象。

30、简述同步和异步的区别

同步是阻塞模式，异步是非阻塞模式。

同步就是指一个进程在执行某个请求的时候，若该请求须要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；

异步是指进程不须要一直等下去，而是继续执行下面的操做，无论其余进程的状态。当有消息返回时系统会通知进程进行处理，这样能够提升执行的效率。

3一、sessionStorage 、localStorage 和 cookie 之间的区别

共同点：用于浏览器端存储的缓存数据

不一样点：

(1)、存储内容是否发送到服务器端：当设置了Cookie后，数据会发送到服务器端，形成必定的宽带浪费；

    web storage,会将数据保存到本地，不会形成宽带浪费；

(2)、数据存储大小不一样：Cookie数据不能超过4K,适用于会话标识；web storage数据存储能够达到5M;

(3)、数据存储的有效期限不一样：cookie只在设置了Cookid过时时间以前一直有效，即便关闭窗口或者浏览器；

    sessionStorage,仅在关闭浏览器以前有效；localStorage,数据存储永久有效；

(4)、做用域不一样：cookie和localStorage是在同源同学口中都是共享的；sessionStorage在不一样的浏览器窗口中不共享，即便是同一个页面；