那些面试题

摘要：变量分为局部变量和全局变量。在函数内声明的变量只在这个函数内有定义，作用域是局部的，函数的参数也是局部变量。闭包的用途最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

都是自己整理的，除了题目，其他都别当真。（答案不是100分的对/(ㄒoㄒ)/~~）

zepto主要针对移动设备上的，只支持较新的浏览器，好处是代码量小，性能较好；zepto有一些基础的触摸事件，如tap、swipe；

jQuery主要是兼容性好，可以跑在PC也可以移动设备上，好处是兼容性好，缺点是代码量大，性能不够好，jQuery的2.X版本也不支持IE678也是基于这个考虑的。

大多数在jQuery 常用的API 和方法zepto都有，zepto种有些方法jQuery反而没有，大部分都能兼容。
具体的一些区别：

on事件委托的区别

Zepto 的each 方法只能遍历 数组，不能遍历JSON对象。

width()和height()的区别：Zepto由盒模型(box-sizing)决定，用.width()返回赋值的width，用.css("width")返回加border等的结果；jQuery会忽略盒模型，始终返回内容区域的宽/高(不包含padding、border)。

offset()的区别：Zepto返回{top,left,width,height}；jQuery返回{width,height}。

jQuery便是一个封装得非常好的类，比如，$("#btn1") 会生成一个 jQuery类的实例，理解这一点很重要。
$.extend是用来扩展jQuery类的，可以理解为添加静态方法，是全局性的，直接用jQuery类调用即可。

$.extend({minValue:function(a,b){return a
也可以把这类函数称作为工具函数，不直接操作DOM元素，而是操作Javascript的非元素对象，或者执行其他非对象的特定操作。
$.extend还可以用一个或多个其他对象来扩展一个对象，返回被扩展的对象
var settings = { validate: false, limit: 5, name: "foo" }; 
var options = { validate: true, name: "bar" }; 
$.extend(settings, options);
//settings == { validate: true, limit: 5, name: "bar" }

$.fn是指jQuery的命名空间，它是对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
   $.fn.extend({
       theAlert:function(){
          alert("自定义的函数");
        }
  })
  $("thediv").theAlert()
  
cookie、localStorage、sessionStorage的区别

LocalStorage（本地存储）和sessionStorage（会话存储） 是HTML5 Web Storage API 提供的，这两种方式都允许开发者使用js设置的键值对进行操作，在在重新加载不同的页面的时候读出它们。这一点与cookie类似。

数据的生命期：
cookie一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效；localStorage除非被清除，否则永久保存；sessionStroage仅在当前会话下有效，关闭页面或浏览器后被清除;

存放数据大小:
cookie:4K左右;localStorage和sessionStorage一般为5MB；

与服务器端通信：
cookie每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题；localStorage和sessionStorage仅在客户端（即浏览器）中保存，不参与和服务器的通信

易用性：
cookie需要程序员自己封装，源生的Cookie接口不友好；localStorage和sessionStorage源生接口可以接受，亦可再次封装来对Object和Array有更好的支持


JS跨域（ajax跨域、iframe跨域）解决方法

只要协议、域名、端口有任何一个不同，都被当作是不同的域。
要解决跨域的问题，我们可以使用以下几种方法：
通过jsonp跨域：
在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。jsonp的原理就是，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。如果你的页面使用jquery，那么通过它封装的方法$.getJSON(url,data,success(data,status,xhr))

function dosometing(jsondata){
    //处理获得的数据
}

我们看到获取数据的地址后面还有一个callback参数，按惯例是用这个参数名，但是你用其他的也一样。当然如果获取数据的jsonp地址页面不是你自己能控制的，就得按照提供数据的那一方的规定格式来操作了。
因为是当做一个js文件来引入的，所以 http://example.com/data.php 返回的必须是一个能执行的js文件，所以这个页面的php代码可能是这样的:


最终那个页面输出的是：dosomething(["a","b","c"])

通过修改document.domain来跨子域：
要注意的是，document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。

使用window.name来进行跨域：
window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。注意，window.name的值只能是字符串的形式，这个字符串的大小最大能允许2M左右甚至更大的一个容量，具体取决于不同的浏览器，但一般是够用了。



window.name = "消息";


function getData(){//iframe载入data.html页面后台执行的函数
    var iframe = document.getElementById("iframe");
    iframe.onload = function(){//这个时候a.html和data.html已经是处于同一个域了，可以互相访问
        var data = iframe.contentWindow.name;//获取iframe的window.name，也就是data.html页面给她设置的数据
        alert(data);
    }
    iframe.src = "b.html";//这里的b.html只要和a.html同一个域就行了，目的是让a能访问iframe里的东西，设置成about:blank也可以
}




window.onmessage = function(e){
    e = e || event;//获取时间对象
    alert(e.data);//通过data属性得到传送的消息
}

HTTP协议的主要特点

超文本传输协议(HTTP)是一种通信协议，它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器。目前我们使用的是HTTP/1.1 版本。
http协议是无状态的，同一个客户端的这次请求和上次请求是没有对应关系，对http服务器来说，它并不知道这两个请求来自同一个客户端。 为了解决这个问题， Web程序引入了Cookie机制来维护状态.
HTTP协议的主要特点可概括如下：

支持客户/服务器模式。

简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。

灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。

无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。

无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。


http请求由三部分组成，分别是：请求行、消息报头、请求正文
HTTP响应也是由三个部分组成，分别是：状态行、消息报头、响应正文
HTTP响应的状态代码有三位数字组成，第一个数字定义了响应的类别，且有五种可能取值：
1xx：指示信息--表示请求已接收，继续处理
2xx：成功--表示请求已被成功接收、理解、接受
3xx：重定向--要完成请求必须进行更进一步的操作
4xx：客户端错误--请求有语法错误或请求无法实现
5xx：服务器端错误--服务器未能实现合法的请求
常见状态代码、状态描述、说明：
200 OK      //客户端请求成功
400 Bad Request  //客户端请求有语法错误，不能被服务器所理解
401 Unauthorized //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用 
403 Forbidden  //服务器收到请求，但是拒绝提供服务
404 Not Found  //请求资源不存在，eg：输入了错误的URL
500 Internal Server Error //服务器发生不可预期的错误
503 Server Unavailable  //服务器当前不能处理客户端的请求，一段时间后可能恢复正常

GET和POST方法的区别

Http协议定义了很多与服务器交互的方法，最基本的有4种，分别是GET,POST,PUT,DELETE. 一个URL地址用于描述一个网络上的资源，而HTTP中的GET, POST, PUT, DELETE就对应着对这个资源的查，改，增，删4个操作。 我们最常见的就是GET和POST了。GET一般用于获取/查询资源信息，而POST一般用于更新资源信息.

GET提交的数据会放在URL之后，以?分割URL和传输数据，参数之间以&相连，如EditPosts.aspx?name=test1&id=123456.  POST方法是把提交的数据放在HTTP包的Body中.

GET提交的数据大小有限制（因为浏览器对URL的长度有限制），而POST方法提交的数据没有限制.

GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值。

GET方式提交数据，会带来安全问题，比如一个登录页面，通过GET方式提交数据时，用户名和密码将出现在URL上，如果页面可以被缓存或者其他人可以访问这台机器，就可以从历史记录获得该用户的账号和密码.


js的变量作用域

在js当中，变量的作用域就是定义这个变量的区域。变量分为：局部变量和全局变量。在函数内声明的变量只在这个函数内有定义，作用域是局部的，函数的参数也是局部变量。
理解作用域链可以更好的理解变量的作用域，每个JavaScript执行环境都有一个和它关联在一起的作用域链。在变量解析过程中首先查找局部的作用域链，然后查找外部的作用域链。
闭包的概念

闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
　　
闭包的用途:
最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
　　function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1}//没有var的全局变量，nAdd的值是一个匿名函数，而这个匿名函数本身也是一个闭包，可以在函数外部对函数内部的局部变量进行操作。
　　　　function f2(){//f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000

使用闭包的注意点：

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。    　


this和闭包的解读代码
   var name = "The Window";
   var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　return function(){//闭包函数
　　　　　　　　return this.name;//到父函数getNameFunc找name变量，找不到，到外部找，找到"The Window"
　　　　　　};
　　　　}
　　};
　　alert(object.getNameFunc()());//The Window
　　
    var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　var that = this;
　　　　　　return function(){
　　　　　　　　return that.name;
　　　　　　};
　　　　}
　　};
　　alert(object.getNameFunc()());//因为this的对象引用就是object，所以返回值在Object中开始查找，找到了Obeject中的name就不到全局变量中查找。
　　
this 的用法

this是Javascript语言的一个关键字。
它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。
function test(){
　alert(this.x);
}
var o = {
    x:1,
    m:test
};
o.m.apply();//undefined

function test(){
　alert(this.x);
}
var o = {
    x:1,
    m:test
};
o.m.apply(o);//1 
　　
call和apply两个方法的区别

这两函数的作用其实就是更改对象的内部指针，即改变对象的this指向的内容，这两个方法都能劫持另外一个对象的方法，继承另外一个对象的属性.
function add(c, d){
  return this.a + this.b + c + d;
}

var o = {a:1, b:3};

// 第一个参数对象o将代替add类里this对象
// 后面的参数就是需要逗号隔开的参数列表
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16

// 第一个参数对象o将代替add类里this对象
// 第二个参数为数组，就是需要传递的参数列表
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

//apply的一个例子，
    function Person(name,age){   //定义一个类
        this.name=name;     //名字
        this.age=age;       //年龄
        this.sayhello=function(){alert(this.name)}; 
    } 
    function Print(){            //显示类的属性
        this.funcName="Print"; 
        this.show=function(){ 
            var msg=[]; 
            for(var key in this){ 
                if(typeof(this[key])!="function"){ 
                    msg.push([key,":",this[key]].join("")); 
                } 
            } 
            alert(msg.join(" ")); 
        }; 
    } 
    function Student(name,age,grade,school){    //学生类
        Person.apply(this,arguments);//比call优越的地方
        Print.apply(this,arguments); 
        this.grade=grade;                //年级
        this.school=school;                 //学校
    } 
    var p1=new Person("卜开化",80); 
    p1.sayhello(); 
    var s1=new Student("白云飞",40,9,"岳麓书院"); 
    s1.show(); 
    s1.sayhello(); 
    alert(s1.funcName);
    
另外一个需要注意的：传null或undefined时，将是JS执行环境的全局变量。浏览器中是window，其它环境（如node）则是global。
    function fun() {
        alert(this);
    }
    fun.call(1);//“1”
    fun.call("a");//“a”
    fun.call(true);//“true”
    fun.call({name:"jack"}); //“[object Object]”
    fun.call(null); // window or global
    fun.call(undefined); // window or global
严格模式下情况又有所不同，ES3比较宽容尽量去揣测代码意图。ES5严格模式（ie6/7/8/9除外）则不再揣测，给call/apply传入的任何参数不再转换。
    "use strict"
    function fun() {
        alert(this);
    }
    fun.call(null)      // null
    fun.call(undefined) // undefined
js的继承机制

js中有三种继承方式:
1、js原型（prototype）继承:
function Person(name,age){ 
    this.name=name; 
    this.age=age; 
} 
Person.prototype.sayHello=function(){ 
    alert("使用原型得到Name："+this.name); 
} 
var per=new Person("马小倩",21); 
per.sayHello(); //输出：使用原型得到Name:马小倩 
function Student(){} 
Student.prototype=new Person("洪如彤",21); 
var stu=new Student(); 
Student.prototype.grade=5; 
Student.prototype.intr=function(){ 
    alert(this.grade); 
} 
stu.sayHello();//输出：使用原型得到Name:洪如彤 
stu.intr();//输出：5  

2、构造函数继承
function  Parent(name){ 
    this.name=name; 
    this.sayParent=function(){ 
        alert("Parent:"+this.name); 
    } 
} 

function  Child(name,age){ 
    this.tempMethod=Parent; 
    this.tempMethod(name); 
    this.age=age; 
    this.sayChild=function(){ 
        alert("Child:"+this.name+"age:"+this.age); 
    } 
} 

var parent=new Parent("江剑臣"); 
parent.sayParent(); //输出：“Parent:江剑臣” 
var child=new Child("李鸣",24); //输出：“Child:李鸣 age:24” 
child.sayChild();  

3、call、apply实现继承
function  Person(name,age,love){ 
        this.name=name; 
        this.age=age; 
        this.love=love; 
        this.say=function say(){ 
            alert("姓名："+name); 
        } 
    } 

    //call方式 
    function student(name,age){ 
        Person.call(this,name,age); 
    } 

    //apply方式 
    function teacher(name,love){ 
        Person.apply(this,[name,love]); 
        //Person.apply(this,arguments); //跟上句一样的效果，arguments 
    } 

    //call与aplly的异同： 
    //1,第一个参数this都一样,指当前对象 
    //2,第二个参数不一样：call的是一个个的参数列表；apply的是一个数组（arguments也可以） 

    var per=new Person("武凤楼",25,"魏荧屏"); //输出：“武凤楼” 
    per.say(); 
    var stu=new student("曹玉",18);//输出：“曹玉” 
    stu.say(); 
    var tea=new teacher("秦杰",16);//输出：“秦杰” 
    tea.say();  

transition transfrom translate animation有什么区别？

transition：过渡；transfrom：变换；translate：平移;animation：动画;
CSS3动画和js动画

css3在性能上可以快速加载，但是缺点就是 IE8或以下不支持，而且复杂的动画效果写起来比较困难
js兼容性比较强，能实现比较复杂的代码，缺点就是加载需要时间
bootsrtap封装jQuery插件的方式

用button.js举例
!function ($) {
     "use strict";
    var Button = function(element, options){
        this.$element  = $(element)
        this.options   = $.extend({}, Button.DEFAULTS, options)
    }
    Button.DEFAULTS = {}
    Button.prototype.toggle = function(){}
    
    function Plugin(options){
        return this.each(function(){
        ...
        new Button(this,options)
        ...
        })
    }
    
    var old = $.fn.Button;
    
    $.fn.Button = Plugin;
    $.fn.Buttn.Contructor = Button;//将插件类暴露给外界,可以修改和添加类里面的方法,如$.fn.Buttn.Contructor.prototype.show = function(){}
    
    // 避免命名空间冲突
    $.fn.Button.noConflict = function(){
        $.fn.Button = old;
        return this;
    }
}(window.jQuery);

js中new关键字的理解

new是用来实例化一个对象。
// 定义类 类名字是 classA
function classA(){
    this.name=1;
}
classA.prototype.show = function(){
    alert(this.name);
};
// 用new实例化
var b = new classA();
b.show();    

var b = new classA();这句话，new的作用流程是：
1、创建一个新的对象，这个对象的类型是object；
2、查找class的prototype上的所有方法、属性，复制一份给创建的Object
3、将构造函数classA内部的this指向创建的Object
4、创建的Object的__proto__指向classA的prototype，b.__proto__ = classA.portotype
5、执行构造函数classA
6、返回新创建的对象给变量b  
句话总结：new关键字以ClassA()为模板创建了一个新的对象，它复制了ClassA构造器中的所有成员变量，同时this指向新创建的对象。