javascript面试题总结（二）

简述创建函数的几种方式

第一种（函数声明）：
function sum1(num1,num2){
return num1+num2;
}
第二种（函数表达式）：
var sum2 = function(num1,num2){
return num1+num2;
}
第三种（函数对象方式）：
Function构造函数
var sum3 = new Function(“num1”,”num2”,”return num1+num2”);

documen.write 和innerHTML 的区别？

• document.write 只能重绘整个页面
• innerHTML 可以重绘页面的一部分

哪些操作会造成内存泄漏？

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
1. setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
2. 闭包
3. 控制台日志
4. 循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

判断一个字符串中出现次数最多的字符，统计这个次数

var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) {
    if(!json[str.charAt(i)]){
        json[str.charAt(i)] = 1;
    }else{
        json[str.charAt(i)]++;
    }
};
var iMax = 0;
var iIndex = '';
for(var i in json){
    if(json[i]>iMax){
        iMax = json[i];
        iIndex = i;
    }
}
alert('出现次数最多的是:'+iIndex+'出现'+iMax+'次');

写一个获取非行间样式的函数

function getStyle(obj,attr,value){
    if(!value){
        if(obj.currentStyle){
            return obj.currentStyle(attr);
        }else{
            obj.getComputedStyle(attr,false);
        }
        }else{
            obj.style[attr] = value;
        }
}

请你谈谈Cookie 的弊端？

缺点：
1.Cookie数量和长度的限制。每个domain 最多只能有20 条cookie，每个cookie 长度不
能超过4KB，否则会被截掉。
2.安全性问题。如果cookie 被人拦截了，那人就可以取得所有的session 信息。即使加密
也与事无补，因为拦截者并不需要知道cookie 的意义，他只要原样转发cookie 就可以达到
目的了。
3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存
一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

iframe 的优缺点？

优点：
1. 解决加载缓慢的第三方内容如图标和广告等的加载问题
2. Security sandbox
3. 并行加载脚本
缺点：
1. iframe 会阻塞主页面的Onload 事件
2. 即时内容为空，加载也需要时间
3. 没有语意

希望获取到页面中所有的checkbox 怎么做？(不使用第三方框架)

var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];
var len = domList.length; //缓存到局部变量
while (len--) { //使用while 的效率会比for 循环更高
    if (domList[len].type == ‘checkbox’) {
        checkBoxList.push(domList[len]);
    }
}

那么问题来了，Javascript 的事件流模型都有什么？

• “事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播
• “事件捕获”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的

“DOM 事件流”包括三个阶段：事件捕获，目标阶段，事件冒泡

实现一个函数clone，可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制。

function clone(obj) {
    var o;
    switch(typeof obj){
        case 'undefined': break;
        case 'string':
            o=obj;
            break;
        case 'number':
            o=obj;
            break;
        case 'boolean':
            o=obj;
            break;
        case 'object':
            if(obj===null){
                o=null;
            }else{
                if(Object.prototype.toString.call(obj).slice(8,-1)==="Array"){
                    o=[];
                    for(var i=0;i<obj.length;i++){
                        o.push(clone(obj[i]));
                    }
                }else{
                    o={};
                    for(var key in obj){
                        o[key]=clone(obj[key]);
                    }
                }
            }
            break;
        default:
            o=obj;
            break;
    }
    return o;
}
console.log(clone('string1'));
console.log(clone(1));
console.log(clone(true));
console.log(clone([1,2,5]));
console.log(clone({name:'anay',sex:1,books:['xiaoxiao','sad']}));

在Javascript中什么是伪数组?如何将伪数组转化为标准数组?

伪数组(类数组)：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argumenst参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

var realArr=Array.prototype.slice.call(arguments);

Javascript中callee和caller的作用?

• caller是返回一个对函数的引用，该函数调用了当前函数; 在一个函数调用另一个函数时，被调用函数会自动生成一个caller属性，指向调用它的函数对象。如果该函数当前未被调用，或并非被其他函数调用，则caller为null。
• callee是返回正在被执行的function函数，也就是所指定的function对象的正文。
  那么问题来了？如果一对兔子每月生一对兔子；一对新生兔，从第二个月起就开始生兔子；假定每对兔子都是一雌一雄，试问一对兔子，第n 个月能繁殖成多少对兔子？（使用callee完成）

function getRabbitPair(n){
    var result;
    if(n==1){
        result=1;
        return result;
    }else if(n==2){
        result=2;
        return result;
    }else{
        result=arguments.callee(n-1)+arguments.callee(n-2);
        return result;
    }
}

web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。 除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

IE 和DOM 事件流的区别

总的来说：
- 执行顺序不一样
- 参数不一样
- 事件加不加on（ie加on）
- this 指向问题
注：attachEvent接受两个参数。第一个参数是事件名称，第二个参数observer是回调处理函数。这里得说明一下，有个经常会出错的地方，IE下利用attachEvent注册的处理函数调用时this指向不再是先前注册事件的元素，这时的this为window对象了。

IE采用冒泡型事件
Netscape（网络信息浏览器）使用捕获型事件
DOM使用先捕获后冒泡型事件
示例：

<body> 
   <div> 
      <button>click</button> 
   </div> 
</body> 

• 冒泡型事件模型：button->div->body (IE事件流)
• 捕获型事件模型：body->div->button (Netscape事件流)
• DOM事件模型：body->div->button->button->div->body (先捕获后冒泡) 普通添加事件的方法：

var btn = document.getElementById("btn");
btn.onclick = function(){
    alert(1);
}
btn.onclick = function(){
    alert(2);
}

执行上面的代码只会alert 2
事件绑定方式添加事件：

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
    alert(1);
},false);
btn.addEventListener("click",function(){
    alert(2);
},false);

执行上面的代码会先alert 1再执行alert 2
普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个！！！
.事件侦听函数的区别
IE使用:

扫描二维码关注公众号，回复： 2681027 查看本文章

[Object].attachEvent("name_of_event_handler", fnHandler); //绑定函数 
[Object].detachEvent("name_of_event_handler", fnHandler); //移除绑定 
DOM使用： 
[Object].addEventListener("name_of_event", fnHandler, bCapture); //**绑定函数 默认false，冒泡传递**
[Object].removeEventListener("name_of_event", fnHandler, bCapture); //移除绑定 

json和·jsonp的区别

json是一种数据交换格式 “暗号” 描述信息格式
jsonp是非官方跨域数据交互协议 “接头方式” 信息传递双方约定的方法
jsonp原理是：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。
由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。
jsonp优点是兼容性好，简单易用，支持浏览器与服务器双向通信。缺点是只支持GET请求。

call()和apply()的区别

• call方法：
  语法：call(thisObj,object)
  定义：调用一个对象的一个方法，以另一个对象替换当前对象
  说明：call方法可以用来代替另一个对象调用一个方法。Call方法可将一个函数的对象上下文从初始的上下文改变为由thisObjext指定的新对象。如果没有提供thisObj参数，那么Global对象被用作thisObj。
• apply方法：
  语法：apply(thisObj,[argArray])
  定义：应用到某一对象的一个方法，用另一个对象替换当前对象
  说明：如果arrArray不是一个有效的数组或者不是arguments对象，那么将导致一个TyperError。如果没有提供arrArray和thisObj任何一个参数，那么Global对象将被用作thisObj，并且无法被传递任何参数。

请你谈谈Cookie的弊端

cookie 虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。
每个特定的域名下最多生成20个 cookie
1).IE6或更低版本最多20个cookie
2).IE7和之后的版本最后可以有50个cookie。
3).Firefox最多50个cookie
4).chrome和Safari没有做硬性限制
IE 和 Opera 会清理近期最少使用的 cookie，Firefox 会随机清理cookie 。
cookie 的最大大约为 4096 字节，为了兼容性，一般不能超过 4095 字节。
IE 提供了一种存储可以持久化用户数据，叫做 uerData ，从 IE5.0 就开始支持。每个数据最多128K，每个域名下最多1M。这个持久化数据放在缓存中，如果缓存没有清理，那么会一直存在。
优点：极高的扩展性和可用性
- 通过良好的编程，控制保存在cookie中的session对象的大小。
- 通过加密和安全传输技术(SSL)，减少cookie被破解的可能性。
- 只在cookie中存放不敏感数据，即使被盗也不会有重大损失。
- 控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。
缺点：
- Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。
- 安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
- 有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

介绍一下你对浏览器内核的理解

浏览器最重要或者说核心的部分是“Rendering（打底） Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(如标准通用标记语言下的一个应用HTML、JavaScript)并渲染(显示)网页。 所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
- 渲染引擎：负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等)，以及计算网页的显示方式，后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
- JS引擎：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

Ajax的优缺点都有什么？

Ajax的优点：
- 页面无刷新，用户体验非常好。
- 使用异步方式与服务器通信，具有更加迅速的响应能力。
- 可以把一些服务器负担的工作转到客户端，利用客户端闲置的能力来处理，减轻服务器负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担。
- 基于标准化并被广泛支持的技术，不需要下载插件或者小程序。
Ajax的缺点:
- Ajax不支持浏览器back按钮。
- 安全问题， Ajax暴露了与服务器交互的细节。
- 对搜索引擎的支持比较弱。
- 破坏了程序的异常机制。
- 不容易调试。

表单提交中Get和Post方式的区别？

1. get 是从服务器上获取数据， post 是向服务器传送数据。
2. get 是把参数数据队列加到提交表单的 ACTION 属性所指的 URL 中，值和表单内各个字段一一对应，在 URL 中可以看到。 post 是通过 HTTP post 机制，将表单内各个字段与其内容放置在 http请求体 中一起传送到 ACTION 属性所指的 URL 地址 , 用户看不到这个过程。
3. 对于 get 方式，服务器端用 Request.QueryString 获取变量的值，对于 post 方式，服务器端用 Request.Form 获取提交的数据。
4. get 传送的数据量较小，不能大于 2KB 。 post 传送的数据量较大，一般被默认为不受限制。但理论上， IIS4 中最大量为 80KB ， IIS5 中为100KB 。
5. get 安全性低， post 安全性较高。